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

Question

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)
  }
}

Answer 1

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.