Webpack 不能要求 Popper

Question

我正在尝试将我的 javascript 文件移动到 Webpack。我对 Webpack 不是很熟悉，所以我不确定我是否正确编写了这些代码。我正在尝试加载 jquery-ui、popper 和 bootstrap 4。但是，当 requiring Popper 时出现错误。请注意，我在 Rails.

上为 Ruby 使用 Wepacker gem

我在我的 environment.js 文件中包含了以下代码，以便在每个文件中自动包含 jQuery。

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}))

module.exports = environment

这部分有效。所以，从那里我运行 yarn add jquery-ui.

然后在我的 /pack/application.js 文件中包含 require('jquery-ui')。

从我的 js 文件中，以下代码打印到我的控制台：

$(document).ready(function(){
    if (jQuery.ui) {
      console.log("loaded");
    }
});

在此之后，我尝试安装 uiring popper 和 yarn add popper。

然后从我的 document.ready 函数中调用 popper 我得到一个错误：

$(document).ready(function(){

    console.log(window.Popper)

});

错误：

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/ubuntu/environment/node_modules/path-platform/path.js: 'return' outside of function (32:2)

  30 | if (_path.posix) {
  31 |   module.exports = _path;
  32 |   return;
     |   ^
  33 | }
  34 | 
  35 | // resolves . and .. elements in a path array with directory names there
    at Parser.raise (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:6420)
    at Parser.parseReturnStatement 
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10370)
    at Parser.parseStatementContent 
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10057)
    at Parser.parseStatement (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10009)
    at Parser.parseBlockOrModuleBlockBody 
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10585)
    at Parser.parseBlockBody (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10572)
    at Parser.parseBlock (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10556)
    at Parser.parseStatementContent 
    (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10085)
    at Parser.parseStatement (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10009)
    at Parser.parseIfStatement 
    (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10363)
    at Parser.parseStatementContent 
    (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10054)
    at Parser.parseStatement (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10009)
    at Parser.parseBlockOrModuleBlockBody 
    (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10585)
at Parser.parseBlockBody (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10572)
at Parser.parseTopLevel (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:9940)
at Parser.parse (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:11447)
at parse (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:11483)
at parser (home/ubuntu/environment/node_modules/@babel/core/lib/transformation/normalize-file.js:168)
at normalizeFile (home/ubuntu/environment/node_modules/@babel/core/lib/transformation/normalize-file.js:102)
at runSync (home/ubuntu/environment/node_modules/@babel/core/lib/transformation/index.js:44)
at runAsync (home/ubuntu/environment/node_modules/@babel/core/lib/transformation/index.js:35)
at process.nextTick (home/ubuntu/environment/node_modules/@babel/core/lib/transform.js:34)
at process._tickCallback (internal/process/next_tick.js:61)
at Object../node_modules/path-platform/path.js (index.js:82)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:1)
at Object../node_modules/parents/index.js (index.js:39)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:19)
at Object../node_modules/module-deps/index.js (index.js:623)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:3)
at Object../node_modules/browserify/index.js (index.js:846)

这是我的 pack/application.js 文件

require("@rails/ujs").start()
require("@rails/activestorage").start()

require('jquery-ui')
require('popper')

Answer 1

我刚做了同样的事情，然后意识到问题出在哪里。 popper is some kind of advanced browser testing library in Node. Bootstrap depends on popper.js ，这是浏览器的工具提示弹出库。

因此，要解决此问题，您需要：

yarn remove popper
yarn add popper.js

Webpack 不能要求 Popper

Cannot Require Popper with Webpack

javascript

ruby-on-rails

webpack

webpacker