Meteor配置MUI组件选择器API启动时报TypeError: Cannot read property 'id' of null

问题场景 #

我搭建了一个Meteor React项目，按官方指南安装了基于Emotion CSS-in-JS的Material UI v5：

$ 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/react@11.11.1
+ @emotion/styled@11.11.0
+ @mui/material@5.14.17
added 79 packages from 99 contributors and audited 193 packages in 51.3s

为了使用components selector API，我按要求安装了@emotion/babel-plugin：

$ meteor npm install @emotion/babel-plugin
+ @emotion/babel-plugin@11.11.0
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）：

METEOR@2.13.3

• Meteor包列表（.meteor/packages）：

meteor-base@1.5.1             # Packages every Meteor app needs to have
mobile-experience@1.1.0       # Packages for a great mobile UX
mongo@1.16.7                   # The database Meteor supports right now
reactive-var@1.0.12            # Reactive variable for tracker

standard-minifier-css@1.9.2   # CSS minifier run for production mode
standard-minifier-js@2.8.1    # JS minifier run for production mode
es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers
ecmascript@0.16.7              # Enable ECMAScript2015+ syntax in app code
typescript@4.9.4              # Enable TypeScript syntax in .ts and .tsx modules
shell-server@0.5.0            # Server-side component of the `meteor shell` command
hot-module-replacement@0.5.3  # Update client in development without reloading the page


static-html@1.3.2             # Define static page content in .html files
react-meteor-data       # React higher-order component for reactively tracking Meteor data

补充说明：使用--typescript模板创建项目时，会触发相同问题，仅错误信息中的编译器类型不同：

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

解决方案 #

该错误源于Meteor的Babel编译器对.babelrc配置文件的解析存在局限性，无法正确处理@emotion插件的importMap配置。解决步骤如下：

1. 删除项目根目录下的.babelrc文件
2. 在项目根目录创建babel.config.js文件，写入以下内容：

module.exports = function(api) {
  api.cache(true);
  return {
    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"]
              }
            }
          }
        }
      ]
    ]
  };
};

3. 重启Meteor项目：执行meteor命令

babel.config.js是项目级别的Babel配置文件，能被Meteor的编译系统正确识别和解析，从而避免路径解析错误。

内容的提问来源于stack exchange，提问作者ghybs