我在 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']
}
}
}
]
}
}
}
}
谁能帮我解决这个问题,我不知道为什么会出现这个错误。我已经设置了插件,但是运行时似乎找不到它。
您看到的错误消息表明“importAttributes”语法未启用。要解决此问题,您需要确保 Babel 配置为识别并解析此实验性语法。您提供的配置似乎部分正确,但有一些问题需要解决。
在
package.json
中更新您的 Babel 配置:
在您的 package.json
中,您应该确保包含用于解析实验性“importAttributes”语法的正确预设。将您的 "babel"
配置替换为以下内容:
"babel": {
"presets": [
["@babel/preset-env", { "targets": "node current" }],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-syntax-import-attributes"
]
}
在这里,我更新了“目标”选项以包含“节点”和“当前”,以确保更好的兼容性。另外,请确保“插件”部分包含“@babel/plugin-syntax-import-attributes。”
确保“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
]
}
}
}
}
安装缺少的 Babel 插件: 确保您安装了必要的 Babel 插件。如果缺少,您可以使用 npm 或yarn 安装它们:
npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-syntax-import-attributes
重新启动您的开发服务器: 进行这些更改后,重新启动开发服务器以应用更新的 Babel 配置。
通过这些更改,Babel 应该正确配置为解析“importAttributes”语法,并且错误应该得到解决。