web-dev-qa-db-fra.com

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

J'ai récemment fait une config avec webpack et bootstrap v4.0.0-alpha.6 qui fonctionnait bien jusqu'à ce jour où j'ai essayé de passer à la version bêta v4 et que je n'arrive pas à le faire. fonctionne 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 le require('bootstrap'); Maintenant, quand j'essaye 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 dans bootstrap/.babelrc

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

J'ai essayé d'aller dans le répertoire bootstrap et j'ai exécuté: npm install] (Je ne sais pas pourquoi je devrais le faire car j'ai déjà ma propre configuration pour bable/autoprefixer) ai installé babel-core, babel-loader, babel-preset-es2015 dans mon propre package.json. J'ai installé transform-es2015-modules-strip et ai exécuté à 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 dépendance de dev ... débarrassé de l'erreur jquery 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

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

Que dois-je faire pour que cela fonctionne à nouveau, j'apprécierais vraiment de l'aide. Je vous remercie

javascriptwebpackbootstrap-4
28
Alin Faur

Après plusieurs tests, voici ma conclusion pour utiliser bootstrap v4.0.0-beta avec Webpack, vous devrez donc installer manuellement jquery et popper.js. Il ne sera plus installé par bootstrap en tant que dépendances. Il ne fonctionnera pas sans jquery et le les menus déroulants/popups ne fonctionneront pas sans popper.js, ainsi:

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

J'ai fini par éditer l'article, car il a été souligné que popper et popper.js sont deux bibliothèques différentes (que je ne connaissais pas). J'essayais d'installer popper.js avec npm install popper et donc j’avais le problème ... donc l’installer avec npm install popper.js installera la dernière version (et la bonne bibliothèque). Ensuite, vous devez modifier le fichier webpack.config.js, comme indiqué dans le chapitre https://getbootstrap.com/docs/4.0/getting-started/webpack/

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

Ensuite, le reste de la configuration devrait être identique à celui de v4 alpha. Quoi qu'il en soit, c'est ce que j'ai découvert après avoir lutté pendant un certain temps avec cela. J'espère que ça va aider quelqu'un.

46
Alin Faur

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 popper.js dépendance et il a résolu le problème. (jquery a déjà été ajouté dans mes dépendances)

npm install popper.js --save
8
Sheikh Abdul Wahid

J'ai trouvé la même erreur et après quelques recherches, trouver une solution:

Tout d'abord, vous devez installer:

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

Et les installer:

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

Aussi, j'ai attaché à l'image avant et après. L'espoir est une aide.

0
Prestapro

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

comme ceci: npm install [email protected]

0
Gideao