Babel：在 Shakapacker + React + Typescript 上找不到模块“@babel/plugin-proposal-class-properties”

Question

环境：[Rails 6.0.6、React、Typescript、Shakapacker、Yarn]

这是一个不寻常的错误，我无法找到任何其他类似问题或 Github 问题的答案。

在本地运行

rails assets:precompile

时，我看到出现此错误：

./app/javascript/packs/server_rendering.js 模块构建中出现错误 失败（来自./node_modules/babel-loader/lib/index.js）： 错误：找不到从以下位置导入的包“@babel/plugin-proposal-class-properties” my_app/babel-virtual-resolve-base.js

at new NodeError (my_app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:195:5)
at packageResolve (my_app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:899:9)
at moduleResolve (my_app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:939:18)
at defaultResolve (my_app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:1017:15)
at resolve (my_app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:1030:12)
at tryImportMetaResolve (my_app/node_modules/@babel/core/lib/config/files/plugins.js:142:45)
at resolveStandardizedNameForImport (my_app/node_modules/@babel/core/lib/config/files/plugins.js:164:19)
at resolveStandardizedName (my_app/node_modules/@babel/core/lib/config/files/plugins.js:173:22)
at loadPlugin (my_app/node_modules/@babel/core/lib/config/files/plugins.js:52:20)
at loadPlugin.next (<anonymous>)
at createDescriptor (my_app/node_modules/@babel/core/lib/config/config-descriptors.js:140:16)
at createDescriptor.next (<anonymous>)
at step (my_app/node_modules/gensync/index.js:261:32)
at evaluateAsync (my_app/node_modules/gensync/index.js:291:5)
at my_app/node_modules/gensync/index.js:44:11
at Array.forEach (<anonymous>)
at Function.async (my_app/node_modules/gensync/index.js:43:15)
at Function.all (my_app/node_modules/gensync/index.js:216:13)
at Generator.next (<anonymous>)
at createDescriptors (my_app/node_modules/@babel/core/lib/config/config-descriptors.js:102:41)
at createDescriptors.next (<anonymous>)
at createPluginDescriptors (my_app/node_modules/@babel/core/lib/config/config-descriptors.js:99:17)
at createPluginDescriptors.next (<anonymous>)
at my_app/node_modules/@babel/core/lib/gensync-utils/functional.js:39:27
at Generator.next (<anonymous>)
at mergeChainOpts (my_app/node_modules/@babel/core/lib/config/config-chain.js:349:34)
at mergeChainOpts.next (<anonymous>)
at chainWalker (my_app/node_modules/@babel/core/lib/config/config-chain.js:316:14)
at chainWalker.next (<anonymous>)
at loadFileChain (my_app/node_modules/@babel/core/lib/config/config-chain.js:191:24)
at loadFileChain.next (<anonymous>)
at buildRootChain (my_app/node_modules/@babel/core/lib/config/config-chain.js:77:27)
at buildRootChain.next (<anonymous>)
at loadPrivatePartialConfig (my_app/node_modules/@babel/core/lib/config/partial.js:72:62)
at loadPrivatePartialConfig.next (<anonymous>)
at loadPartialConfig (my_app/node_modules/@babel/core/lib/config/partial.js:115:25)
at loadPartialConfig.next (<anonymous>)
at step (my_app/node_modules/gensync/index.js:269:25)
at evaluateAsync (my_app/node_modules/gensync/index.js:291:5)
at my_app/node_modules/gensync/index.js:93:9
at new Promise (<anonymous>)
at async (my_app/node_modules/gensync/index.js:92:14)
at stopHiding - secret - don't use this - v1 (my_app/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)
at Object.loadPartialConfigAsync (my_app/node_modules/@babel/core/lib/config/index.js:34:85)
at Object.loader (my_app/node_modules/babel-loader/lib/index.js:116:30)
at Object.<anonymous> (my_app/node_modules/babel-loader/lib/index.js:39:12)

这对应于

babel.config.js

文件中加载的插件。 如果我更改插件的顺序，顶部的插件会显示错误。

plugins: [
  '@babel/plugin-proposal-class-properties',
  'babel-plugin-macros',
  '@babel/plugin-syntax-dynamic-import',
  ...

无论出于何种原因，直到今天部署到登台时都没有显示任何错误。 也许缓存被清除了，这个问题是由我几周前进行的节点包/shakapacker升级引起的。 否则我一生都无法确定最近是什么变化可能导致了这种情况。

无论如何，好消息是我对此有答案。

Answer 1

答案是通过

yarn remove

/

yarn add

将有问题的插件从 devDependency 移至依赖项。 我查看了 babel.config.js 中产生错误的插件，然后从 devDependency 中删除并将它们添加为正常依赖项，如下所示。

[旧包.json]

"dependencies": {
    "@babel/core": "^7.25.2",
    "@babel/plugin-transform-runtime": "^7.25.4",
    "@babel/preset-env": "^7.25.4",
    "@babel/runtime": "7",
  [...]
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    [...]
  }

[新的package.json]

"dependencies": {
    "@babel/core": "^7.25.2",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/plugin-transform-runtime": "^7.25.4",
    "@babel/preset-env": "^7.25.4",
    "@babel/preset-typescript": "^7.24.7",
    "@babel/runtime": "7",
    [...]

"devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    [...]
  }

我还必须使用预设打字稿插件更新 babel.config.js

presets: [ ..., 
        [
        '@babel/preset-typescript',
        {
          useBuiltIns: true
        }
      ] ]

我很乐意为您提供一个精彩的解释，解释为什么它有效以及到底是什么导致了这个问题，但我对此没有答案。 我一直在使用 Typescript，并在几周内毫无问题地部署到我的服务器。