Babel: Cannot find module '@babel/plugin-proposal-class-properties' on Shakapacker + React + Typescript

Question

Environment: [Rails 6.0.6, React, Typescript, Shakapacker, Yarn]

This was an unusual error and I could not find the answer on any other similar questions or Github issues.

When running rails assets:precompile locally I saw this error come up:

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)

And this corresponded to the plugins loaded in babel.config.js file. If I changed the order of plugins, the plugin at the top would show the error.

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

For whatever reason, this had not been showing any errors when deploying to staging until today. Perhaps a cache was cleared, and this issue arose from node package / shakapacker upgrades I did several weeks ago. Otherwise I can not for the life of me determine what change could have caused this more recently.

Anyway the good news is I have an answer for this.

Answer 1

The answer was to move the problematic plugins from devDependencies to dependencies via yarn remove/yarn add. I looked at the plugins from babel.config.js which produced errors, removed then from devDependencies and added them as normal dependencies as shown below.

[old package.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",
    [...]
  }

[new 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",
    [...]
  }

I also had to update babel.config.js with a preset-typescript plugin

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

I'd love to give you a brilliant explanation for why this works and what exactly caused this issue but I have no answers for that. I'd been using Typescript the entire time and deploying to my server without issue for several weeks.