Ad

Rails Webpack ERROR In Entry Module: Can't Resolve Application.js In Production (Heroku)

I have a Rails 6 app with Webpacker. Everything works well in development but I get an error trying to resolve the entry path when I try pushing to Heroku.

Error: Can't resolve '/application.js' in '/tmp/build_7eddbca060f445328dcebb3128a5bc19'

As a result, I modified the context and entry function in webpack.config.js to the following:

context: path.resolve(__dirname, '../../app/javascript/packs'),
entry: { 
        application: 'application.js',
},

This however gives me the following error, even though that is the location of my application.js file

ERROR in Entry module not found: Error: Can't resolve 'application.js' in '/app/javascript/packs'
remote: error Command failed with exit code 2.

Does anyone know the reason?

webpack.config.js

const path = require('path');

module.exports = env => {

    let prod = env !== undefined && env.production === true;

    return {

        devtool: prod ? 'source-map' : 'eval-cheap-module-source-map',

        context: path.resolve(__dirname, '../../app/javascript/packs'),
        entry: { 
                application: 'application.js',
        },
        resolve: {
                extensions: ['.js', '.jsx']
        },
        performance: {
                hints: false,
                maxEntrypointSize: 512000,
                maxAssetSize: 512000
        },

        output: {
               path: path.resolve(__dirname, '../../dist/'), 
               filename: prod ? "[name].bundle.js" : "[name].js"
        },

        optimization: {
                splitChunks: {
                chunks: 'all',
                },
        },
   }
}

package.json

{
  "private": true,
  "scripts": {
    "webpack": "webpack",
    "start": "webpack-dev-server --open",
    "dev": "webpack --mode=development",
    "build": "webpack --mode=production --env.production"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "autoprefixer": "^9.7.5",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.0.4",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.1",
    "postcss-font-magician": "^2.3.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "url-loader": "^4.0.0",
    "webpack": "^4.42.1",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2",
    "@popperjs/core": "^2.3.3",
    "@rails/actioncable": "^6.0.0",
    "@rails/actiontext": "6.0.2-1",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "ahoy.js": "^0.3.5",
    "bootstrap": "^4.4.1",
    "chart.js": "^2.9.3",
    "chartkick": "^3.2.0",
    "expose-loader": "^0.7.5",
    "imports-loader": "^0.8.0",
    "jquery": "^3.5.1",
    "jquery-ujs": "^1.2.2",
    "local-time": "^2.1.0",
    "popper.js": "^1.14.1",
    "quill": "^1.3.6",
    "rails-erb-loader": "^5.5.2",
    "trix": "1.0.0",
    "turbolinks": "^5.2.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  },
  "version": "0.1.0"
}

webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: ['app/assets']

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .erb
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: false

Ad

Answer

Fixed it by removing context and instead setting the entry path explicitly

entry: './app/javascript/packs/application.js',
Ad
source: stackoverflow.com
Ad