Shakapacker+React+TS环境下Babel找不到指定插件问题

环境 #

• Rails 6.0.6
• React
• TypeScript
• Shakapacker
• Yarn

问题描述 #

这是一个罕见错误，同类问题及GitHub议题中均无现成解决方案。本地执行rails assets:precompile时触发以下报错：

ERROR in ./app/javascript/packs/server_rendering.js Module build
failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find package '@babel/plugin-proposal-class-properties' imported from
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中加载的插件直接相关：调整插件顺序后，排在顶部的插件会触发此错误。此前部署到预发布环境未出现该问题，推测原因可能是本地缓存清除，或是数周前Node包/Shakapacker升级引发依赖缺失。

解决方案 #

安装缺失的Babel开发依赖插件即可解决问题，执行以下命令：

yarn add @babel/plugin-proposal-class-properties --dev

安装完成后重新运行rails assets:precompile，即可正常完成资产预编译。

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