在 Meteor 中使用 Babel 配置 MUI 组件选择器 API 在项目启动时出现“TypeError： Cannot read property 'id' of null”

问：

我有一个 Meteor React 项目，我为此添加了 Material UI v5（安装说明），它带有 CSS-in-JS 样式的 Emotion：

$ meteor create --react meteor-react-mui
Created a new Meteor app in 'meteor-react-mui'.

$ cd meteor-react-mui

$ meteor npm install @mui/material @emotion/react @emotion/styled
+ @emotion/[email protected]
+ @emotion/[email protected]
+ @mui/[email protected]
added 79 packages from 99 contributors and audited 193 packages in 51.3s

我想使用组件选择器 API，因此我根据需要进行了安装：@emotion/babel-plugin

$ meteor npm install @emotion/babel-plugin
+ @emotion/babel-plug[email protected]
updated 1 package and audited 194 packages in 1.643s

...然后我将配置（如上述文档所述）添加到我的文件中：.babelrc

{
  "plugins": [
    [
      "@emotion",
      {
        "importMap": {
          "@mui/system": {
            "styled": {
              "canonicalImport": ["@emotion/styled", "default"],
              "styledBaseImport": ["@mui/system", "styled"]
            }
          },
          "@mui/material/styles": {
            "styled": {
              "canonicalImport": ["@emotion/styled", "default"],
              "styledBaseImport": ["@mui/material/styles", "styled"]
            }
          }
        }
      }
    ]
  ]
}

但是，现在当我启动项目时，我遇到了以下错误：

$ meteor
[[[[[ ~/.../meteor-react-mui ]]]]]

=> Started proxy.                             
=> Started HMR server.                        
/.../.meteor/packages/meteor-tool/.../dev_bundle/lib/node_modules/meteor-promise/promise_server.js:218
      throw error;
      ^

TypeError: Cannot read property 'id' of null
    at InputFile.resolve (/tools/isobuild/compiler-plugin.js:403:61)
    at packages/babel-compiler.js:574:23
    at Array.some (<anonymous>)
    at requireWithPrefixes (packages/babel-compiler.js:569:26)
    at requireWithPath (packages/babel-compiler.js:487:14)
    at resolveHelper (packages/babel-compiler.js:459:24)
    at resolveHelper (packages/babel-compiler.js:450:21)
    at packages/babel-compiler.js:432:19
    at Array.forEach (<anonymous>)
    at walkHelper (packages/babel-compiler.js:431:10)
    at walkBabelRC (packages/babel-compiler.js:417:24)
    at BabelCompiler.BCp._inferHelper (packages/babel-compiler.js:514:17)
    at BabelCompiler.BCp._inferFromBabelRc (packages/babel-compiler.js:359:14)
    at BabelCompiler.BCp.inferExtraBabelOptions (packages/babel-compiler.js:333:10)
    at BabelCompiler.BCp.processOneFileForTarget (packages/babel-compiler.js:209:10)
    at packages/babel-compiler.js:123:25

以下是我的依赖项：package.json

{
  "dependencies": {
    "@babel/runtime": "^7.20.7",
    "@emotion/babel-plugin": "^11.11.0",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.17",
    "meteor-node-stubs": "^1.2.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Meteor 发布版本：.meteor/release

[email protected]

和 Meteor 打包版本：.meteor/packages

[email protected]             # Packages every Meteor app needs to have
[email protected]       # Packages for a great mobile UX
[email protected]                   # The database Meteor supports right now
[email protected]            # Reactive variable for tracker

[email protected]   # CSS minifier run for production mode
[email protected]    # JS minifier run for production mode
[email protected]                # ECMAScript 5 compatibility for older browsers
[email protected]              # Enable ECMAScript2015+ syntax in app code
[email protected]              # Enable TypeScript syntax in .ts and .tsx modules
[email protected]            # Server-side component of the `meteor shell` command
[email protected]  # Update client in development without reloading the page


[email protected]             # Define static page content in .html files
react-meteor-data       # React higher-order component for reactively tracking Meteor data

注意：如果我使用模板（而不是上面所示的模板），我会遇到同样的问题，但错误消息略有不同：--typescript--react

TypeError: Cannot read property 'id' of null
    at InputFile.resolve (/tools/isobuild/compiler-plugin.js:403:61)
    at packages/babel-compiler.js:574:23
    at Array.some (<anonymous>)
    at requireWithPrefixes (packages/babel-compiler.js:569:26)
    at requireWithPath (packages/babel-compiler.js:487:14)
    at resolveHelper (packages/babel-compiler.js:459:24)
    at resolveHelper (packages/babel-compiler.js:450:21)
    at packages/babel-compiler.js:432:19
    at Array.forEach (<anonymous>)
    at walkHelper (packages/babel-compiler.js:431:10)
    at walkBabelRC (packages/babel-compiler.js:417:24)
    at TypeScriptCompiler.BCp._inferHelper (packages/babel-compiler.js:514:17)
    at TypeScriptCompiler.BCp._inferFromBabelRc (packages/babel-compiler.js:359:14)
    at TypeScriptCompiler.BCp.inferExtraBabelOptions (packages/babel-compiler.js:333:10)
    at TypeScriptCompiler.BCp.processOneFileForTarget (packages/babel-compiler.js:209:10)
    at packages/babel-compiler.js:123:25