我正在尝试将其他Gatsby插件添加到Gatsby项目中。我想将“ gatsby-plugin-styled-components”添加到gatsby-config.js文件中。任何帮助,将不胜感激。新手快速反应并学到很多东西。
已经添加并在运行npm run build
/**
* Configure your Gatsby site with this file.
*
* See: https://www.gatsbyjs.org/docs/gatsby-config/
*/
module.exports = {
plugins: [`gatsby-plugin-emotion`],
}
gatsby-starter-hello-world@0.1.0 build / Users / jappleman / code / hello-world / tutorial-part-two
gatsby构建
error We encountered an error while trying to load your site's gatsby-config.
Please fix the error and try again.
Error: /Users/jappleman/code/hello-world/tutorial-part-two/gatsby-config.js:8
plugins: ['`gatsby-plugin-emotion`],['`gatsby-plugin-styled-components'],
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unterminated template literal
- v8-compile-cache.js:226 NativeCompileCache._moduleCompile
[tutorial-part-two]/[v8-compile-cache]/v8-compile-cache.js:226:18
- v8-compile-cache.js:172 Module._compile
[tutorial-part-two]/[v8-compile-cache]/v8-compile-cache.js:172:36
- loader.js:712 Object.Module._extensions..js
internal/modules/cjs/loader.js:712:10
- loader.js:600 Module.load
internal/modules/cjs/loader.js:600:32
- loader.js:539 tryModuleLoad
internal/modules/cjs/loader.js:539:12
- loader.js:531 Function.Module._load
internal/modules/cjs/loader.js:531:3
- loader.js:637 Module.require
internal/modules/cjs/loader.js:637:17
- v8-compile-cache.js:159 require
[tutorial-part-two]/[v8-compile-cache]/v8-compile-cache.js:159:20
- get-config-file.js:33
[tutorial-part-two]/[gatsby]/dist/bootstrap/get-config-file.js:33:22
- Generator.next
- new Promise
答案 0 :(得分:0)
gatsby-config.js导出object
module.exports = {}
,在该对象中,您要在项目上使用的plugins
被指定为插件名称(array)的strings,您已经将该插件名称安装为项目的依赖项(例如,在您的终端中输入npm install gatsby-plugin-react-helmet
或yarn add gatsby-plugin-react-helmet
)。
module.exports = {
plugins: [
`gatsby-plugin-react-helmet`
]
}
但是,您将要安装的某些插件可能需要设置一些选项才能正常工作。因此,应将这些插件分别指定为同一插件数组中的一个对象。并且在这种情况下,每个对象的resolve
属性的值是插件的名称,通常后面跟着自己的options
的对象。
module.exports = {
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-transformer-remark`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/data/`
}
}
]
}
有关更多信息,请参见Using a Plugin in Your Site
此外,鉴于您的错误是由SyntaxError引起的,请参见MDN - Template_literals,以了解反引号与常规引号之间的区别,
`gatsby-plugin-styled-components` & 'gatsby-plugin-styled-components'
&为什么以下行可能导致Unterminated string literal SyntaxError:
plugins: ['`gatsby-plugin-emotion`],['`gatsby-plugin-styled-components']
此后,如果解决方法不明显,请尝试将plugins
更改为以下任意一项:
plugins: [`gatsby-plugin-emotion`],[`gatsby-plugin-styled-components`]
或
plugins: ['gatsby-plugin-emotion'],['gatsby-plugin-styled-components']