使用Webpack构建Gatsby组件无法转换Gatsby模块

凯尔·卡里卡·圣

我正在尝试创建一个Gatsby组件库(使用特定的Gatsby库而不是常规的React组件)。

我一直babel在使用Just进行编译,但是我希望能够翻译任何CSS-in-JS并执行其他操作,因此我尝试使用Webpack进行构建。

当我尝试编译Gatsby组件时,它在Gatsby模块中失败。我知道Gatsby是未转译的ES6,因此我将其包含node_modules在webpack配置中进行转译,但我仍然:

ERROR in ./node_modules/gatsby/cache-dir/gatsby-browser-entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/kylecalica/Code/gatsby-learn/gatsby-components/node_modules/gatsby/cache-dir/gatsby-browser-entry.js: Unexpected token (25:4)

  23 | 
  24 |   return (
> 25 |     <React.Fragment>
     |     ^
  26 |       {finalData && render(finalData)}
  27 |       {!finalData && <div>Loading (StaticQuery)</div>}
  28 |     </React.Fragment>

Webpack:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
  filename: "index.html"
});

module.exports = {
  entry: path.join(__dirname, "/src/index.js"),
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, "/webpack/dist")
  },
  module: {
    rules: [
      {
       test: /\.(js|jsx)$/,
       use: {
         loader: "babel-loader"
       }
     },
     {
       test: /\.css$/,
       use: ['style-loader', 'css-loader']
     },

   ]
  },
  plugins: [htmlWebpackPlugin],
  devServer: {
   contentBase: path.join(__dirname, "dist"),
   port: 9000,
   open: true
 }
};

我目前正在尝试使用盖茨比所说的话对我的代码中的Storybook进行操作,但是很难弄清楚如何将其从奇怪的方式转换为我的方式?

故事书的Webpack方式:

module.exports = ({ config }) => {
  // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
  config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

  // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
  config.module.rules[0].use[0].loader = require.resolve("babel-loader")

  // use @babel/preset-react for JSX and env (instead of staged presets)
  config.module.rules[0].use[0].options.presets = [
    require.resolve("@babel/preset-react"),
    require.resolve("@babel/preset-env"),
  ]

  config.module.rules[0].use[0].options.plugins = [
    // use @babel/plugin-proposal-class-properties for class arrow functions
    require.resolve("@babel/plugin-proposal-class-properties"),
    // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
    require.resolve("babel-plugin-remove-graphql-queries"),
  ]

  // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
  config.resolve.mainFields = ["browser", "module", "main"]

  return config
}

.babelrc:

{
  "presets": [
    "babel-preset-gatsby-package",
    "@babel/preset-react",
    "@babel/preset-env"
    ]
}
凯尔·卡里卡·圣

我通过转换Storybook的webpack模块具有的功能来解决此问题。我仍然将其通过测试,但目前可以正常编译:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
  filename: "index.html"
});

module.exports = {
  entry: path.join(__dirname, "/src/index.js"),
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, "webpack")
  },
  module: {
    rules: [
      {
       test: /\.(js|jsx)$/,
       use: {
         loader: "babel-loader",
         options: {
           presets: ["babel-preset-gatsby-package"],
           plugins: ["@babel/plugin-proposal-class-properties"]
         },
       },
       exclude: [/node_modules\/(?!(gatsby)\/)/],
     },
     {
       test: /\.css$/,
       use: ['style-loader', 'css-loader']
     },

   ]
  },
  plugins: [htmlWebpackPlugin],
  devServer: {
   contentBase: path.join(__dirname, "dist"),
   port: 9000,
   open: true
 }
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Gatsby组件道具CSS模块

无法在gatsby构建中使用文档,必须转换为钩子

Gatsby - webpack 无法使用 `gatsby-plugin-alias-imports` 解析别名导入

Gatsby 站点上内置模块的 Webpack 重大更改

Typescript和React(使用Gatsby加载程序):无法将图像导入为模块

从函数访问Gatsby组件

在 Gatsby 中如何排除 gatsby 构建的目录?

在Netlify上调试失败的Gatsby(无法解析组件)

Webpack无法编译-模块构建失败

尝试使用Webpack构建AMD模块—出现“无法解析模块'导出'”错误

在React组件中使用CSS模块以及由webpack构建的Typescript

在 React (Gatsby) 中使用 CSS 模块的全局 SCSS

使用Gatsby Link组件时如何获得FluentUI样式

如何使用gatsby将数据从graphicQL传递到React组件?

如何在Gatsby插件中使用React组件?

如何在 Gatsby Graphql 中使用组件中的变量

Gatsby网站的Netlify构建失败

无法使用Gatsby和Typescript从gatsby-config.js文件中读取siteMetadata对象

将位置道具传递给页面会产生构建错误 - 链接组件 - Gatsby

Netlify Gatsby构建错误,本地构建

使用Webpack 4构建React组件库

反应 | Gatsby:主页组件内部或外部的组件

在 Gatsby 中使用 ParticleJS

使用 Gatsby 请求

gatsby-plugin-mdx 找不到模塊“gatsby/webpack”

将图形查询片段转换为组件的问题(Gatsby+DatoCMS)

使用 Webpack 与主模块一起构建独立模块

Gatsby节点无法生成页面

JS无法在Gatsby上运行