Webpack не загружает bootstrap v4.0.0-beta

Недавно я создал конфигурацию с webpack и bootstrap v4.0.0-alpha.6, которая отлично работала до сегодняшнего дня, когда я попытался перейти на бета-версию v4, и теперь я не могу заставить ее работать должным образом :( У меня есть эта конфигурация:

webpack.config.js

entry: {
    app: "./src/app.js"
},
output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'js/[name].js',
    hotUpdateChunkFilename: 'hot/hot-update.js',
    hotUpdateMainFilename: 'hot/hot-update.json'
},
module: {
    loaders: [
        { test: /\.js$/, exclude: /node-modules/, loader: 'babel-loader' },
        { test: /\.html$/, loader: 'raw-loader', exclude: /node_modules/ },
        {   test: /\.(css|scss|sass)$/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ['css-loader', 'postcss-loader', 'sass-loader']
            }),
            exclude: /node_modules/
        }           
    ]
},
plugins: [
    new webpack.ProvidePlugin({ // inject ES5 modules as global vars
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
    }),
    new ExtractTextPlugin('/css/[name].css'),

в моем app.js у меня есть require('bootstrap'); Теперь, когда я пытаюсь сделать сборку, я получаю сообщение об ошибке:

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module build failed: ReferenceError: Unknown plugin "transform-es2015-modules-strip" specified in "E:\\Documente\\Work\\wordpress\\wordpressSite\\wp-content\\themes\\bsTheme\\node_modules\\bootstra
p\\.babelrc" at 0, attempted to resolve relative to "E:\\Documente\\Work\\wordpress\\wordpressSite\\wp-content\\themes\\bsTheme\\node_modules\\bootstrap"

Проблема, кажется, здесь, в bootstrap/.babelrc

{
    "presets": [
        [
            "es2015",
            {
                "loose": true,
                "modules": false
            }
        ]
    ],
    "plugins": [
        "transform-es2015-modules-strip"
    ]
}

Я попытался зайти в каталог bootstrap и npm install: npm install (я не знаю, почему я должен это делать, поскольку у меня уже есть своя конфигурация для bable/autoprefixer) У меня уже есть babel-core, babel-loader, babel-preset- es2015, установленный в моем собственном пакете. transform-es2015-modules-strip Я установил transform-es2015-modules-strip и снова transform-es2015-modules-strip сборку:

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'jquery' in 'E:\Documente\Work\wordpress\wordpressSite\wp-content\themes\bsTheme\node_modules\bootstrap\dist\js'
 @ ./node_modules/bootstrap/dist/js/bootstrap.js 1:0-17
 @ ./src/app.js

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in 'E:\Documente\Work\wordpress\wordpressSite\wp-content\themes\bsTheme\node_modules\bootstrap\dist\js'
 @ ./node_modules/bootstrap/dist/js/bootstrap.js 1:0-20
 @ ./src/app.js

Поэтому я попробовал и установил jquery и popper в своем проекте как зависимость от dev... избавился от ошибки jquery, но..:

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in 'E:\Documente\Work\wordpress\wordpressSite\wp-content\themes\bsTheme\node_modules\bootstrap\dist\js'
 @ ./node_modules/bootstrap/dist/js/bootstrap.js 1:0-20
 @ ./src/app.js

Из идей... и это кажется сложным... Я не могу понять, что я делаю неправильно, единственное, что я могу придумать, - это bootstrap.js файл bootstrap.js прямо с моей другой js files... long post, но я хотел быть как можно более конкретным.

Что я должен сделать, чтобы заставить его работать снова, я бы очень признателен за помощь. Спасибо

Ответы

Ответ 1

После нескольких тестов это мой вывод для запуска bootstrap v4.0.0-beta с Webpack поэтому вам нужно будет вручную установить jquery и popper.js, он больше не будет установлен bootstrap в качестве зависимостей. Он не будет работать без jquery, и выпадающие меню /popups не будут работать без popper.js, поэтому:

npm install [email protected] -D
npm install jquery -D
npm install popper.js -D

Я закончил редактирование сообщения, потому что было указано, что popper и popper.js - это две разные библиотеки (которых я не знал), я пытался установить popper.js с npm install popper и поэтому у меня возникла проблема.. поэтому установите его с помощью npm install popper.js установит последнюю версию (и правильную библиотеку). Затем вам нужно изменить в webpack.config.js, как указано в https://getbootstrap.com/docs/4.0/getting-started/webpack/.

plugins: [
    ...
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],            
        ...
      })
    ...
  ]

Тогда остальная часть конфигурации должна быть такой же, как и для v4 alpha. Во всяком случае, это то, что я узнал после того, как боролся с этим какое-то время. Надеюсь, это поможет кому-то.

Ответ 2

Я получил эту ошибку при обновлении до последней версии 4.0.0 bootstarp.

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in 'E:\work\nodejs\mepos\node_modules\bootstrap\dist\js'
 @ ./node_modules/bootstrap/dist/js/bootstrap.js 7:100-120

Я просто добавил зависимость popper.js и она решила проблему. (jquery уже был добавлен в мои зависимости)

npm install popper.js --save

Ответ 3

Я нашел ту же ошибку и после некоторого поиска найти решение для поиска:

Прежде всего вам необходимо установить:

npm install babel-plugin-transform-es2015-modules-strip

И они устанавливают:

babel-preset-es2015
babel-preset-stage-2

Также я прикреплен к изображению до и после. Надежда - это помощь.

Ответ 5

Думаю, из-за поппера? Popper v1.10 недоступен для npm, поэтому вы, вероятно, установили Popper v1.0.0.