Rails Webpack Error: Custom JS resolves in Development but not in Production

Question

I have a Rails 6 app using Webpack. Everything compiles and works normally in development environment but I get an error for only one of my files when pushing to production.

ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve 'thredded_imports.js' in 'path\app\javascript\packs'
 @ ./app/javascript/packs/application.js 26:0-33

I have tried using relative and absolute paths. I have tried reinstalling webpacker and the associated erb loaders to no avail. I had a similar problem with other custom js, but they compiled after setting a relative path in my application.js.. ie

require(../conversations)

This does not work with this gem js file. Does anyone have any ideas? Have spent the last days setting up my webpack configs from scratch, setting entry points, resolves, modules all without success.

application.js

import 'core-js/stable'
import 'regenerator-runtime/runtime'

import jQuery from "jquery"
import LocalTime from "local-time"
LocalTime.start()

require("trix")  // rich text editor
require("@rails/actiontext")
// require("turbolinks").start()

require("../conversations")  // didn't resolve in production until I added relative path
require("thredded_imports.js") // still doesn't resolve in production with or without relative path (../)

$(document).ready(function(){
    $('#main-content').on('click', '.toggle', function (e) {
    // $(".toggle").on('click', function (e) {
        e.preventDefault();
      $(this).next().toggle('slow');
    });
})

package.json

{
  "private": true,
  "version": "1.0.0",
  "main": "application.js",
  "engines": {
    "node": "^12.16.2",
    "yarn": "^1.22.4"
  },
  "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.43.0",
    "webpack-cli": "^3.3.11",
    "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",
    "enhanced-resolve": "^4.1.1",
    "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.config.js

const path = require('path');

module.exports = {
    mode: 'none',
    entry: './app/javascript/packs/application.js',
    resolve: {
        modules: [path.resolve(__dirname, 'app'), path.resolve(__dirname, 'node_modules')],
                extensions: ['.js', '.jsx', '.js.erb']
    },
    output: {
        path: path.resolve(__dirname, './dist/'), 
        filename: "[name].bundle.js"
    },

    watch: true
}

Answer 1

Note that you must use require like this: require('./thredded_imports.js');