我在babel配置中使用了importAttributes，但是显示了这个错误：

: SyntaxError: E:\Flowise\packages\ui\src\App.js: Support for the experimental syntax 'importAttributes' isn't currently enabled (22:5):
flowise-ui:build:   20 |       type: 'css'
flowise-ui:build:   21 |     }
flowise-ui:build: > 22 |   });
flowise-ui:build:      |     ^
flowise-ui:build:   23 |   console.log('cssModule: ', cssModule);
flowise-ui:build:   24 |   return /*#__PURE__*/React.createElement(StyledEngineProvider, {
flowise-ui:build:   25 |     injectFirst: true
flowise-ui:build: 
flowise-ui:build: Add @babel/plugin-syntax-import-attributes (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-import-attributes) to the 'plugins' section of your Babel config to enable parsing.

在package.json中

"babel": {
        "presets": [
            ["@babel/preset-env",
            {
                "targets": {
                    "node": "current"
                }
            }],
            "@babel/preset-react"
        ],
        "plugins": ["@babel/plugin-syntax-import-attributes"]
    },

在craco.config.js中

module.exports = {
    webpack: {
        configure: {
            module: {
                rules: [
                    {
                        test: /\.m?js$/,
                        resolve: {
                            fullySpecified: false
                        }
                    },
                    {
                        test: /\.(?:js|mjs|cjs)$/,
                        exclude: /node_modules/,
                        use: {
                            loader: 'babel-loader',
                            options: {
                                presets: [
                                    ['@babel/preset-env', { targets: "defaults" }]
                                ],
                                plugins: ['@babel/plugin-syntax-import-attributes']
                            }
                        }
                    }
                ]
            }
        }
    }
}

谁能帮我解决一下，我不知道为什么会出现这个错误。我已经设置了插件，但它似乎没有找到当运行它.

module.exports = {
webpack: {
configure: {
module: {
rules: [
{
test: /\.m?js$/,
resolve: {
fullySpecified: false
}
},
// Remove the Babel rule here
]
}
}
}
}

1条答案

按热度按时间

o8x7eapl1#

您看到的错误消息表明未启用“importAttributes”语法。要解决这个问题，您需要确保Babel被配置为识别和解析这个实验性语法。您提供的配置似乎部分正确，但有几个问题需要解决。
1.在package.json中更新您的Babel配置：在您的package.json中，您应该确保包含正确的预设来解析实验性的“importAttributes”语法。将"babel"配置替换为以下配置：

"babel": {
  "presets": [
    ["@babel/preset-env", { "targets": "node current" }],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-syntax-import-attributes"
  ]
}

在这里，我更新了“targets”选项，使其同时包含“node”和“current”，以确保更好的兼容性。另外，确保“plugins”部分包含“@babel/plugin-syntax-import-attributes”。
1.确保“craco”配置不干扰：看起来你正在使用craco来自定义Webpack配置。确保您的craco.config.js文件与package.json中的Babel配置不冲突。您不需要在craco.config.js中再次指定Babel选项。从craco.config.js中删除Babel相关规则：

module.exports = {
  webpack: {
    configure: {
      module: {
        rules: [
          {
            test: /\.m?js$/,
            resolve: {
              fullySpecified: false
            }
          },
          // Remove the Babel rule here
        ]
      }
    }
  }
}

1.安装缺少的Babel插件：确保您安装了必要的Babel插件。如果缺少它们，您可以使用npm或yarn安装它们：

npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-syntax-import-attributes

1.重新启动开发服务器：完成这些更改后，重新启动开发服务器以应用更新的Babel配置。
通过这些更改，Babel应该可以正确配置为解析'importAttributes'语法，并且错误应该可以解决。

展开查看全部

赞(0）回复(0）举报 2023-10-19

如何在React webpack中使用插件选项

1条答案

相关问题

热门标签

最新问答