Search code examples
ruby-on-railswebpackbabeljsbabel-loader

`babel-loader` dependency error when `rake assets:precompile` in production

I've inherited a Rails application and I'm trying to get it to build manually in production

The application uses

  • webpacker-3.5.5 ruby gem to manage JavaScript assets
  • webpack v3.12.0
  • sprockets gem to manage traditional CSS / Image assets

As part of the webpacker gem config, it uses babel-loader on JSX/React assets particularly. I'm not quite sure what this does, but I'm guessing it's some sort of pre-processor? 

module.exports = {
  test: /\.jsx?$/,
  exclude: /node_modules/,
  use: [{
    loader: "babel-loader",
    options: {
      cacheDirectory: true,
      // Use .babelrc - not webpack config JS - to define all options
      babelrc: true
    }
  }]
}

When I try to run rake assets:precompile on the production server, it errors on the step where it tries to build assets with webpack

> rake assets:precompile
yarn install v1.17.3
warning package.json: No license field
warning delly@1.0.0: No license field
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.18s.
Webpacker is installed 🎉 🍰
Using /app/config/webpacker.yml file for setting up webpack paths
Compiling…
Compilation failed:

Hash: 27785324c8b2ba6004dd
Version: webpack 3.12.0
Time: 119ms
        Asset     Size  Chunks             Chunk Names
manifest.json  2 bytes          [emitted]

ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in '/app'

ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in '/app'

This does not happen in development locally, only production.

Any idea why this would be erroring? Is babel-loader required in production or can I remove it from production entirely?

Here is my package.json that defines installation of the package:

{
  "name": "delly",
  "version": "1.0.0",
  "scripts": {
    "test": "node_modules/.bin/jest --no-cache --config spec/javascript/jest.config.js",
    "test:debug": "node --inspect-brk node_modules/.bin/jest --no-cache --config spec/javascript/jest.config.js --colors --verbose"
  },
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-modules-commonjs": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.8.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-module-resolver": "^3.2.0",
    "eslint": "^4.6.1",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.6.1",
    "i18n-js": "^3.2.2",
    "jest": "^24.8.0",
    "jest-dom": "^3.4.0",
    "js-yaml": "^3.13.1",
    "react-testing-library": "^7.0.1",
    "stylelint": "^9.3.0",
    "stylelint-config-rational-order": "^0.0.2",
    "webpack-dev-server": "2.11.2"
  },
  "dependencies": {
    "@rails/webpacker": "^3.5.5",
    "axios": "^0.19.0",
    "core-js": "3",
    "html-react-parser": "^0.4.6",
    "jquery": "^3.3.1",
    "jquery-ujs": "^1.2.2",
    "prop-types": "^15.6.1",
    "rails-erb-loader": "^5.4.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-on-rails": "^11.3.0",
    "react-toggle-switch": "^3.0.4",
    "react-transition-group": "1.x",
    "react_ujs": "^2.4.4"
  }
}

a

Solution

  • When you run rake assets:precompile in production mode, it also runs webpack using production mode, in this case, only packages set in dependencies are loaded, if you review packages.json, babel-loader is set in devDependencies.\

    The solution? move babel-loader to dependencies