Webpack ne parvient pas à charger bootstrap v4.0.0-beta

Question

J'ai récemment fait une config avec webpack et bootstrap v4.0.0-alpha.6 qui a bien fonctionné jusqu'à aujourd'hui, quand j'ai essayé de changer de v4 beta et maintenant je n'arrive pas à le faire fonctionner correctement :( J'ai cette config:

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'),

dans mon app.js j'ai l' require('bootstrap'); Maintenant, quand j'essaie de faire construire maintenant j'obtiens une erreur:

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"

Le problème semble être ici, en bootstrap/.babelrc

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

J'ai essayé d'aller dans le bootstrap répertoire et ran: npm install (je ne sais pas pourquoi je devrais le faire car j'ai déjà ma propre config pour bable/autoprefixer) J'ai déjà babel-core, babel-chargeur, babel-preset-es2015 installé dans mon propre paquet.json j'ai installé transform-es2015-modules-strip et a couru de construire à nouveau:

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

J'ai donc essayé et installé jquery et popper dans mon projet en tant que dev dépendance...se débarrasser de l'jquery erreur, mais..:

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

D'idées...et cela semble plus compliqué...je n'arrive pas à savoir ce que je fais mal, la seule chose que je peux trouver est d'obtenir de l' bootstrap.js le fichier de le mettre directement mes fichiers js... long post, mais je voulais être le plus précis possible.

Que dois-je faire pour le faire fonctionner de nouveau, je voudrais vraiment l'apprécier un peu d'aide. Merci

Answer 1

Après plusieurs tests, c'est ma conclusion pour l'exécution d' bootstrap v4.0.0-beta avec Webpack de sorte que vous aurez besoin d'installer jquery et popper.js il ne sera pas installé par bootstrap comme des dépendances de plus. Il ne fonctionnera pas sans jquery et les listes déroulantes/popups ne fonctionnera pas sans popper.js donc:

npm install bootstrap@4.0.0-beta -D
npm install jquery -D
npm install popper.js -D

J'ai éditer le post, car il a été souligné que popper et popper.js 2 les différentes bibliothèques(dont je ne savait pas) j'ai tenté de l'installer popper.js avec npm install popper et donc j'ai eu le problème... donc de l'installer avec npm install popper.js va installer la dernière version de celui-ci (et le droit de la bibliothèque). Ensuite, vous avez à changer dans les webpack.config.js comme mentionné dans https://getbootstrap.com/docs/4.0/getting-started/webpack/

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

Puis le reste de la config devrait être la même que celle qui était v4 alpha. En tout cas c'est ce que j'ai découvert après avoir lutté avec pendant un certain temps. J'espère que ça aidera quelqu'un.

Answer 2

J'ai eu cette erreur lors de la mise à niveau vers bootstarp dernière version 4.0.0 .

 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
 

Je viens d'ajouter la dépendance popper.js et cela a résolu le problème. ( jquery a déjà été ajouté dans mes dépendances)

 npm install popper.js --save
 

Answer 3

J'ai trouvé la même erreur et après une recherche, trouvez une solution de conception:

Tout d'abord, vous devez installer:

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

Et les installent:

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

J'ai également attaché à l'image avant et après. L'espoir, c'est l'aide.

Answer 4

installez le bootstrap sans le signal: ^ (npm install bootstrap@^4.0.0-alpha.6)

comme ceci: npm install bootstrap@4.0.0-alpha.6

Answer 5

C'est à cause du popper, je pense? Popper v1.10 n'est pas disponible sur npm, vous avez donc probablement installé Popper v1.0.0 à la place.