javascript - 不能通过Webpack要求Popper(Cannot Require Popper with Webpack)

Question

I'm attempting to move my javascript files to Webpack.

(我正在尝试将JavaScript文件移至Webpack。)

I'm not very familiar with Webpack so I am not sure that I have coded any of this correctly.

(我对Webpack不太熟悉，因此不确定我是否正确编写了其中的任何代码。)

I am trying to load jquery-ui, popper, and bootstrap 4. However, I am getting an error when requiring Popper .

(我正在尝试加载jquery-ui，popper和bootstrap4。但是，在需要Popper时出现错误。)

Please note that I am using the Wepacker gem for Ruby on Rails.

(请注意，我将Wepacker gem用于Ruby on Rails。)

I have included the following code in my environment.js file to include jQuery automatically in each file.

(我在我的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

This part works.

(这部分有效。)

So, from there I ran yarn add jquery-ui .

(因此，我从那里开始执行yarn add jquery-ui 。)

Then in my /pack/application.js file I included require('jquery-ui') .

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

From my js file the following code prints to my console:

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

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

After this I tried installing and requiring popper with yarn add popper .

(这个我试过后安装，并要求popper与yarn add popper 。)

Then calling popper from inside my document.ready function I get an error:

(然后从document.ready函数内部调用popper，我得到一个错误：)

$(document).ready(function(){

    console.log(window.Popper)

});

The error:

(错误：)

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)

Here is my pack/application.js file

(这是我的pack / application.js文件)

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

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

  ask by Cannon Moyer translate from so

Answer 1

I just did the same thing, then realized what the issue was.

(我只是做了同样的事情，然后才意识到问题出在哪里。)

popper is some kind of advanced browser testing library in Node.

(popper是Node中的一种高级浏览器测试库。)

Bootstrap depends on popper.js , which is a tooltip popup library for the browser.

(引导程序依赖于popper.js ，这是浏览器的工具提示弹出库。)

So to fix this, you'll want to:

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

yarn remove popper
yarn add popper.js