web-dev-qa-db-fra.com

Erreur: JavaScript de Bootstrap nécessite jQuery, à l'aide de Webpack

Je suis nouveau dans WebPack, mais j'ai commencé à l'utiliser dans l'un de mes projets pour en apprendre davantage à ce sujet.

J'aimerais utiliser jQuery avec Bootstrap. Cependant, lorsque je lance l'application, l'erreur suivante s'affiche:

bootstrap.min.js? 5802: 6Uncaught Erreur: JavaScript requis par Bootstrap nécessite jQuery

Dans ma configuration de pack Web, j'ai défini deux points d'entrée, un pour les bibliothèques du projet et un pour les externes, appelés fournisseurs, comme jQuery, Bootstrap, etc.

Chez les fournisseurs, j'ai défini la bibliothèque Bootstrap après la bibliothèque jQuery, mais je ne parviens pas à supprimer l'erreur. Des indices sur ce que je manque?

Ceci est ma configuration webapp:

import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
let node_dir = __dirname + '/node_modules';

export default {
  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      'jquery': node_dir + '/jquery/dist/jquery.js',
      'jquery-validation': node_dir + '/jquery-validation/dist/jquery.validate.js',
      'bootstrap': node_dir + '/bootstrap/dist/js/bootstrap.min.js'
    }
  },
  debug: true,
  devtool: 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
  noInfo: true, // set to false to see a list of every file being bundled.

  entry: {
    // must be first entry to properly set public path
    app: ['./src/webpack-public-path',
      'webpack-hot-middleware/client?reload=true',
      './src/index'],
    vendors: ['jquery','jquery-validation','bootstrap']
  },
  target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
  output: {
    path: `${__dirname}/src`, // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
      __DEV__: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({     // Create HTML file that includes references to bundled CSS and JS.
                                //template: 'src/index.ejs',
      template: 'src/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      inject: true
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jquery: "jquery",
      "windows.jQuery": "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
  ],
  module: {
    loaders: [
      {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel']},
      {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
      {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
      {test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'},
      {test: /\.ico$/, loader: 'file?name=[name].[ext]'},
      {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']}
    ]
  },
  postcss: ()=> [autoprefixer]
};

Et voici mon fichier package.json:

{
  "name": "dario-webapplication",
  "version": "1.0.0",
  "description": "Webapplication for Dario project",
  "engines": {
    "npm": ">=3"
  },
  "scripts": {
    "preinstall": "node tools/nodeVersionCheck.js",
    "setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
    "remove-demo": "babel-node tools/removeDemo.js",
    "start-message": "babel-node tools/startMessage.js",
    "prestart": "npm-run-all --parallel start-message remove-dist",
    "start": "npm-run-all --parallel open:src lint:watch",
    "open:src": "babel-node tools/srcServer.js",
    "open:dist": "babel-node tools/distServer.js",
    "lint": "esw webpack.config.* src tools --color",
    "lint:watch": "npm run lint -- --watch",
    "clean-dist": "npm run remove-dist && mkdir dist",
    "remove-dist": "rimraf ./dist",
    "prebuild": "npm run clean-dist && npm run lint && npm run test",
    "build": "babel-node tools/build.js && npm run open:dist",
    "test": "mocha tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
    "test:cover": "babel-node node_modules/isparta/bin/isparta cover --root src --report html node_modules/mocha/bin/_mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
    "test:cover:travis": "babel-node node_modules/isparta/bin/isparta cover --root src --report lcovonly _mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
    "test:watch": "npm run test -- --watch",
    "open:cover": "npm run test:cover && open coverage/index.html"
  },
  "author": "Francisco Jose Parra Gonzalez",
  "license": "MIT",
  "dependencies": {
    "bootstrap": "3.3.7",
    "jquery": "2.1.4",
    "jquery-validation": "1.15.1",
    "object-assign": "4.1.0",
    "react": "15.3.0",
    "react-bootstrap": "0.30.3",
    "react-dom": "15.3.0",
    "react-redux": "4.4.5",
    "react-router": "2.6.1",
    "react-router-redux": "4.0.5",
    "redux": "3.5.2",
    "redux-thunk": "2.1.0"
  },
  "devDependencies": {
    "autoprefixer": "6.4.0",
    "babel-cli": "6.11.4",
    "babel-core": "6.11.4",
    "babel-loader": "6.2.4",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-plugin-transform-react-remove-prop-types": "0.2.9",
    "babel-preset-es2015": "6.9.0",
    "babel-preset-react": "6.11.1",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-1": "6.5.0",
    "babel-register": "6.11.6",
    "browser-sync": "2.14.0",
    "chai": "3.5.0",
    "chalk": "1.1.3",
    "connect-history-api-fallback": "1.2.0",
    "coveralls": "2.11.12",
    "cross-env": "2.0.0",
    "css-loader": "0.23.1",
    "enzyme": "2.4.1",
    "eslint": "3.2.2",
    "eslint-plugin-import": "1.12.0",
    "eslint-plugin-jsx-a11y": "2.0.1",
    "eslint-plugin-react": "6.0.0",
    "eslint-watch": "2.1.14",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.9.0",
    "html-webpack-plugin": "2.22.0",
    "isparta": "4.0.0",
    "mocha": "3.0.1",
    "mockdate": "1.0.4",
    "node-sass": "3.8.0",
    "npm-run-all": "2.3.0",
    "open": "0.0.5",
    "postcss-loader": "0.9.1",
    "Prompt": "1.0.0",
    "react-addons-test-utils": "15.3.0",
    "redux-immutable-state-invariant": "1.2.3",
    "replace": "0.3.0",
    "rimraf": "2.5.4",
    "sass-loader": "4.0.0",
    "sinon": "1.17.5",
    "sinon-chai": "2.8.0",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "1.13.1",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.12.2",
    "webpack-md5-hash": "0.0.5"
  },
  "keywords": [],
  "repository": {
    "type": "git",
    "url": ""
  }
}
javascriptjquerytwitter-bootstrapwebpackisparta
8
fgonzalez

Je me suis finalement débarrassé de l'erreur en ajoutant simplement une nouvelle entrée dans le ProvidePlugin:

 jQuery:"jquery"

alors finalement le plugin ressemble à ceci:

 new webpack.ProvidePlugin({
  $: "jquery",
  jquery: "jquery",
  "window.jQuery": "jquery",
  jQuery:"jquery"
})

Je le laisse ici au cas où quelqu'un d'autre serait confronté au même problème.

18
fgonzalez

En utilisant Create React App vous pouvez importer comme ceci:

import 'jquery/src/jquery';
import '../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min';

note: Ceci est pour jQuery 3. *

8
Bitclaw

Vous pouvez également ajouter le package Expose Loader :

npm install expose-loader --save-dev

Et utilisez-le dans votre point d’entrée Webpack (c.-à-d. main.js) comme ceci:

import 'expose?$!expose?jQuery!jquery'

// ...
2
prograhammer