如何为 Babel 启用导入断言？

Question

在我的 React 应用程序中，我想使用导入断言：

import data from "./json/clients-m.json" assert { type: "json" }

但是，我收到以下错误：

./src/Clients.js 中的错误 模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）： SyntaxError: E:\src\Clients.js: 当前未启用对实验性语法“importAssertions”的支持。

将 @babel/plugin-syntax-import-assertions (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-import-assertions) 添加到 Babel 配置的“插件”部分以启用解析。

第 1:41 行：解析错误：此实验性语法需要启用解析器插件：“importAssertions”。 (1:41)

我已经安装了这个插件：

npm install @babel/plugin-syntax-import-assertions --save-dev

然后我创建了.babelrc.json:

{
  "plugins": [
    "@babel/plugin-syntax-import-assertions"
  ]
}

并且还将这个插件添加到package.json：

{
  "name": "clients-frontend",
  "version": "0.1.0",
  "private": true,
  "babel": {
    "plugins": [
      "@babel/plugin-syntax-import-assertions"
    ]
  },
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    "@babel/plugin-syntax-import-assertions": "^7.16.7"
  }
}

但是，我不断收到此错误。 ????

Answer 1

react-scripts 默认不加载 babel 配置。安装以下包

npm i -D customize-cra react-app-rewired

这些包让你可以自定义react-scripts 的 babel 默认配置，这样你就可以使用额外的插件了

现在，更改 package.json 中的脚本

"scripts": {
-    "start": "react-scripts start",
+    "start": "react-app-rewired start",
-    "build": "react-scripts build",
+    "build": "react-app-rewired build",
-    "test": "react-scripts test",
+    "test": "react-app-rewired test"
  }

在应用的根目录下创建一个文件config-overrides.js，内容如下

/* config-overrides.js */
/* eslint-disable react-hooks/rules-of-hooks */
const { useBabelRc, override } = require('customize-cra');

module.exports = override(useBabelRc());

现在，在包的根目录下创建.babelrc

{
  "plugins": [
    "@babel/plugin-syntax-import-assertions"
  ]
}

现在，您的 babel 配置将正确加载。还有另一个库 craco 可让您自定义 react-scripts 配置

Answer 2

也尝试安装babel-eslint 软件包。并且，在您的 .eslintrc.json 文件中添加：

{
  "parserOptions": {
    "babelOptions": {
      "parserOpts": {
        "plugins": ["importAssertions"]
      }
    }
  }
}

Answer 3

如果您（像我一样）使用 ejected react-script 应用程序，也许您需要在第一个 babel-loader 部分 (test:/\.(js|mjs|jsx|ts|tsx)$/, include:paths.appSrc) 的 webpack.config.js 中设置您的配置：

// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve('babel-preset-react-app/webpack-overrides',),
    presets: [/* ... */],
    plugins: [ // ADD THIS ?
      require.resolve('@babel/plugin-syntax-import-assertions'),
      [require.resolve('babel-plugin-direct-import'), {
        modules: [
          require.resolve('@mui/material'),
          require.resolve('@mui/icons-material'),
          require.resolve('@mui/lab'),
          require.resolve('@mui/base'),
          require.resolve('@mui/system'),
        ],
      }],
      isEnvDevelopment && shouldUseReactRefresh && require.resolve('react-refresh/babel'),
    ].filter(Boolean),
    // ...
  },
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
  test: /\.(js|mjs)$/,
  exclude: /@babel(?:\/|\\{1,2})runtime/,
  // ...