Cameron Butcher
Cameron Butcher

Reputation: 21

Module Build Failed - Error: Cannot find module (Babel & Rails 6)

Rails beginner here and first time poster! Running into this console error which is breaking my JS. Really grateful for any help!!:

Console Error

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '/Users/cameron/Documents/Rails Projects/main/rsvp_new/node_modules/@babel/compat-data/data/corejs3-shipped-proposals.json'.

.babelrc

{
  "presets": [
    "airbnb"
  ],
  "plugins": [
    "add-module-exports",
    ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
  ],
}

.package.json

    {
  "name": "rsvp_new",
  "private": true,
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-react": "^7.12.10",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "^6.0.0-pre.1",
    "@zxing/library": "^0.18.3",
    "babel": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.44.2",
    "webpack-dev-server": "^3.11.0"
  }
}

babel.config.js

module.exports = function(api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.'
    )
  }

  return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]
    ].filter(Boolean),
    plugins: [
      'babel-plugin-macros',
      '@babel/plugin-syntax-dynamic-import',
      isTestEnv && 'babel-plugin-dynamic-import-node',
      '@babel/plugin-transform-destructuring',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true
        }
      ],
      [
        '@babel/plugin-proposal-object-rest-spread',
        {
          useBuiltIns: true
        }
      ],
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false,
          regenerator: true,
          corejs: false
        }
      ],
      [
        '@babel/plugin-transform-regenerator',
        {
          async: false
        }
      ]
    ].filter(Boolean)
  }
}

Upvotes: 1

Views: 4665

Answers (3)

thb
thb

Reputation: 441

Had the same error, just added the package :

yarn add babel-plugin-macros

Upvotes: 0

Gülsen Keskin
Gülsen Keskin

Reputation: 800

have you tried this

npm install @babel/compat-data

Upvotes: 0

Cameron Butcher
Cameron Butcher

Reputation: 21

Managed to solve it, although still a mystery on how this fixed it.

I first used git checkout and went back to an earlier commit to see if the error still persisted. Thankfully the error had gone. I then returned to my latest commit and the error seemed to have resolved.

I'm sorry this answer couldn't be more helpful. But if there's any advice to anyone who faces comes across this, revisit an earlier commit where you believe the error wasn't persisting and see if the error still appears in the console.

Will post more about this if I find any further info.

Upvotes: 1

Related Questions