Rails webpack 错误：第 3 方 gem 无法解析 jQuery

Posted 2023-05-09

【中文标题】Rails webpack 错误：第 3 方 gem 无法解析 jQuery

【英文标题】：Rails webpack error: 3rd party gem cannot resolve jQuery

【发布时间】：2020-09-05 21:18:29

【问题描述】：

我有一个第三方 gem，thredded，当我在 application.js 中需要它时，它会尝试访问 jQuery。 当我将它加载到我的 application.js 中时，如下所示，出现错误。

require("thredded_imports.js")
import jQuery from "jquery";

我得到的错误是：

Module not found: Error: Can't resolve 'jquery' in 'C:\Ruby26-x64\lib\ruby\gems\2.6.0\gems\thredded-0.16.16\app\assets\javascripts\thredded\components'

问题似乎是 Webpack 无法访问我的 node_modules 文件夹，因为我在路径中的不同文件夹中收到了其中一些不是 node_modules 的消息

C:\Ruby26-x64\lib\ruby\gems\2.6.0\gems\thredded-0.16.16\app\assets\javascripts\thredded\components\node_modules doesn't exist or is not a directory

我尝试配置我的 webpack.config.js 以添加 node_modules，但它似乎不起作用。有什么想法吗？

webpack.config.js

module.exports = env => 
    let prod = env !== undefined && env.production === true;
    return 
        devtool: prod ? 'source-map' : 'eval-cheap-module-source-map',

        entry: 
            'app': 'app.js',
            'sign-up': 'sign-up.js'   
        ,

        devServer: 
            contentBase: './dist',
            index: 'event-create.html'
        ,

        externals: 
            // require("jquery") is external and available
            //  on the global var jQuery
                'jquery': 'jQuery'
        ,

        resolve: 
                modules: [
                "node_modules",
                path.resolve(__dirname, '..', 'node_modules')
                ],
                alias: 
                        jquery: 'jquery/src/jquery',
                
        ,

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

    

环境.js

const  environment  = require('@rails/webpacker')
const erb = require('./loaders/erb')

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin(
  $: 'jquery',
  jQuery: 'jquery',
    Popper: ['popper.js', 'default']
))

environment.loaders.append('expose', 
  test: require.resolve('jquery'),
  use: [
    loader: 'expose-loader',
    options: '$'
  , 
    loader: 'expose-loader',
    options: 'jQuery',
  ]
)

environment.loaders.prepend('erb', erb)
module.exports = environment

package.json

 "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",
    "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"
  ,

【参考方案1】：

通过在我的 environment.js 中明确设置路径来解决这个问题

const path = require('path');

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin(
  $: 'jquery',
  jQuery: path.resolve(path.join(__dirname, '../../node_modules', 'jquery')),
    Popper: ['popper.js', 'default']
))

【讨论】：

这为我节省了大量时间。在遵循 Thredded 对带有 webpacker 的 Rails 6 的说明后，Webpack 编译挂起。谢谢！

【参考方案2】：

我猜你在 environment.js 中缺少以下内容，在 exports 之前：

environment.loaders.append('expose', 
  test: require.resolve('jquery'),
  use: [
    loader: 'expose-loader',
    options: '$'
  , 
    loader: 'expose-loader',
    options: 'jQuery',
  ]
)

和npm install expose-loader，为了暴露jQuery。

希望对您有所帮助！

【讨论】：

很遗憾没用。我已经发布了完整的 environment.js

【参考方案3】：

也可以使用require.resolve("jquery")获取绝对路径

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin(
  $:      require.resolve("jquery"),
  jQuery: require.resolve("jquery")
))