Cannot find module @babel/compat-data/data/corejs3-shipped-proposals

[kdiogenes]

After installing tailwindcss-rails and trying to compile with bin/rails webpacker:compile I get the following error:

ERROR in ./app/javascript/packs/application.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '/home/kadu/sources/myapp/node_modules/@babel/compat-data/data/corejs3-shipped-proposals'
    at createEsmNotFoundErr (internal/modules/cjs/loader.js:842:15)
    at finalizeEsmResolution (internal/modules/cjs/loader.js:835:15)
    at resolveExports (internal/modules/cjs/loader.js:424:14)
    at Function.Module._findPath (internal/modules/cjs/loader.js:464:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:802:27)
    at Function.Module._load (internal/modules/cjs/loader.js:667:27)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (/home/kadu/sources/myapp/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/home/kadu/sources/myapp/node_modules/@babel/preset-env/lib/polyfills/corejs3/usage-plugin.js:10:55)
    at Module._compile (/home/kadu/sources/myapp/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (/home/kadu/sources/myapp/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/home/kadu/sources/myapp/node_modules/@babel/preset-env/lib/index.js:29:44)
    at Module._compile (/home/kadu/sources/myapp/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (/home/kadu/sources/myapp/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at requireModule (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/files/plugins.js:165:12)
    at loadPreset (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/files/plugins.js:83:17)
    at createDescriptor (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at /home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-chain.js:320:26)
    at /home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at Generator.next (<anonymous>)
    at buildRootChain (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-chain.js:90:27)
    at buildRootChain.next (<anonymous>)
    at loadPrivatePartialConfig (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/partial.js:95:62)

I tried with different versions of nodejs (15.10.0 and 12.21.0) with same results. I tried the solution presented in https://nodachisoft.com/common/en/article/en000018/#Solution and get another error:

EntryModuleNotFoundError: Entry module not found: Error: Can't resolve 'babel-loader' in '/home/kadu/sources/myapp'
    at /home/kadu/sources/myapp/node_modules/webpack/lib/Compilation.js:1075:31
    at /home/kadu/sources/myapp/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /home/kadu/sources/myapp/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /home/kadu/sources/myapp/node_modules/webpack/lib/NormalModuleFactory.js:337:24
    at /home/kadu/sources/myapp/node_modules/neo-async/async.js:2830:7
    at /home/kadu/sources/myapp/node_modules/neo-async/async.js:6877:13
    at /home/kadu/sources/myapp/node_modules/neo-async/async.js:2830:7
    at done (/home/kadu/sources/myapp/node_modules/neo-async/async.js:2925:13)
    at /home/kadu/sources/myapp/node_modules/webpack/lib/NormalModuleFactory.js:449:23
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/ModuleKindPlugin.js:30:40
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/forEachBail.js:30:14
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
resolve 'babel-loader' in '/home/kadu/sources/myapp'
  Parsed request is a module
  using description file: /home/kadu/sources/myapp/package.json (relative path: .)
    resolve as module
      /home/kadu/sources/bitcoin/node_modules doesn't exist or is not a directory
      /home/kadu/sources/node_modules doesn't exist or is not a directory
      /home/kadu/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /home/kadu/sources/myapp/node_modules
        using description file: /home/kadu/sources/myapp/package.json (relative path: ./node_modules)
          using description file: /home/kadu/sources/myapp/package.json (relative path: ./node_modules/babel-loader)
            no extension
              /home/kadu/sources/myapp/node_modules/babel-loader doesn't exist
            .js
              /home/kadu/sources/myapp/node_modules/babel-loader.js doesn't exist
            .json
              /home/kadu/sources/myapp/node_modules/babel-loader.json doesn't exist
            as directory
              /home/kadu/sources/myapp/node_modules/babel-loader doesn't exist

This is my package.json:

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@hotwired/turbo-rails": "^7.0.0-beta.5",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "autoprefixer": "^9",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "postcss": "^7",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

Any hint what I'm doing wrong and how we can avoid this problem for others?

[kdiogenes]

I just tried node 12.13.1 and it worked :/

[dhh]

We've dropped webpack support from this gem. It's now exclusively intended for use with sprockets. Will introduce another, easy way to add TW to a webpack setup. But doesn't make sense to share it in the same gem.