Webpack ne peut pas charger mon module npm - node.js, npm, webpack, commonjs, react-bootstrap

J’ai un problème, je viens de désinstaller npm react-bootstrap, puis installer npm react-bootstrap et Webpack ne peuvent plus charger ce module.

Je lance webpack comme ceci:

/var/www/cloud/node_modules/.bin/webpack --config webpack.config.js --watch --display-error-details

Et voici l’erreur, il ne trouve tout simplement pas le package.json à l’intérieur de react-bootstrap:

ERROR in ./core/static/core/js/modules/dashboard/admin/Customer.js
Module not found: Error: Cannot resolve module "react-bootstrap" in /var/www/cloud/core/static/core/js/modules/dashboard/admin
resolve module react-bootstrap in /var/www/cloud/core/static/core/js/modules/dashboard/admin
looking for modules in /var/www/cloud/node_modules
resolve "file" react-bootstrap in /var/www/cloud/node_modules
resolve file
/var/www/cloud/node_modules/react-bootstrap is not a file
/var/www/cloud/node_modules/react-bootstrap.js doesn"t exist
/var/www/cloud/node_modules/react-bootstrap.jsx doesn"t exist
resolve "file" or "directory" /var/www/cloud/node_modules/react-bootstrap
resolve file
/var/www/cloud/node_modules/react-bootstrap is not a file
/var/www/cloud/node_modules/react-bootstrap.js doesn"t exist
/var/www/cloud/node_modules/react-bootstrap.jsx doesn"t exist
resolve directory
use lib/index.js from package.json
resolve "file" or "directory" lib/index.js in /var/www/cloud/node_modules/react-bootstrap
resolve file
/var/www/cloud/node_modules/react-bootstrap/lib/index.js doesn"t exist
/var/www/cloud/node_modules/react-bootstrap/lib/index.js.js doesn"t exist
/var/www/cloud/node_modules/react-bootstrap/lib/index.js.jsx doesn"t exist
resolve directory
/var/www/cloud/node_modules/react-bootstrap/lib/index.js/package.json doesn"t exist (directory description file)
/var/www/cloud/node_modules/react-bootstrap/lib/index.js doesn"t exist (directory default file)
directory default file index
resolve file index in /var/www/cloud/node_modules/react-bootstrap
/var/www/cloud/node_modules/react-bootstrap/index doesn"t exist
/var/www/cloud/node_modules/react-bootstrap/index.js doesn"t exist
/var/www/cloud/node_modules/react-bootstrap/index.jsx doesn"t exist

C’est vraiment étrange, mon package.json ressemble à:

{
"name": "cloud",
"version": "1.0.0",
"description": "hehe",
"main": "gulp.js",
"scripts": {
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "",
"dependencies": {
"anima": "^0.4.0",
"immutable": "^3.7.4",
"imports-loader": "^0.6.4",
"moment": "^2.10.3",
"react-bootstrap": "^0.23.7",
"react-google-recaptcha": "^0.3.2",
"react-paginate": "^0.1.31",
"script-loader": "^0.6.1",
"underscore": "^1.8.3"
},
"devDependencies": {
"babel": "^5.5.6",
"babel-core": "^5.5.6",
"babel-loader": "^5.1.4",
"css-loader": "^0.15.1",
"node-libs-browser": "^0.5.2",
"react-hot-loader": "^1.2.7",
"style-loader": "^0.12.3",
"webpack": "^1.9.10",
"webpack-bundle-tracker": "0.0.51"
}
}

Et ma config de webpack:

var path = require("path");
var webpack = require("webpack");
var BundleTracker = require("webpack-bundle-tracker");
var bower_dir = __dirname + "/components/bower_components/";
var node_modules_dir = path.resolve(__dirname, "node_modules");

module.exports = {
context: __dirname,
entry: {
app: [ "./core/static/core/js/main.js", ],
vendor: ["react", "react-router", "react-bootstrap", "react-google-recaptcha", "react-spinkit"],
},
output: {
path: path.resolve("./static/bundles/"),
filename: "bundle.js",
publicPath:""
},
externals: {
// require("jquery") is external and available
//  on the global var jQuery
"jquery": "jQuery",
"utils": "utils"
},
plugins: [new BundleTracker({filename: "./webpack-stats.json"}),
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"),
/*new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})*/],
module: {
loaders: [{ test: /.jsx?$/, exclude: node_modules_dir, loaders: ["babel"]}, // to transform JSX into JS
{ test: require.resolve("jquery"), loader: "imports?jQuery=jquery" },
{ test: /.json$/, loader: "json" },
{ test: /.css$/, loader: "style-loader!css-loader?root=." }],
},
resolve: {
modulesDirectories: ["node_modules", "bower_components"],
extensions: ["", ".js", ".jsx"]
},
};

De plus, le dossier react-bootstrap existe dans mes node_modules.

Mon arbre est comme ça:

webpack.config.js

node_modules

package.json

Je suis totalement perdu ...

Réponses:

-1 pour la réponse № 1

supprimez le dossier node_modules de votre lecteur et supprimez package.json refaites un npm i, espérez qu’il commencera à fonctionner. Sur vous, index.html, essayez de charger le fichier react-bootstrap.js sous

<script src="./node_modules/react-bootstrap.js"></script>

---