Rails Webpack 錯誤：自定義 JS 在開發中解決，但在生產中未解決

Question

我有一個使用 Webpack 的 Rails 6 應用程序。 一切都在開發環境中編譯並正常工作，但是在推送到生產環境時，我只有一個文件出現錯誤。

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

我嘗試過使用相對路徑和絕對路徑。 我嘗試重新安裝 webpacker 和相關的 erb 加載器，但無濟於事。 我對其他自定義 js 也有類似的問題，但它們是在我的 application.js 中設置相對路徑后編譯的 .. 即

require(../conversations)

這不適用於此 gem js 文件。 有沒有人有任何想法？ 過去幾天從頭開始設置我的 webpack 配置，設置入口點，解析，模塊都沒有成功。

應用程序.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

請注意，您必須像這樣使用 require ： require('./thredded_imports.js');