Webpack找不到实际存在的模块。

24

我需要帮助,我刚刚执行了 npm uninstall react-bootstrap 然后又执行了 npm install react-bootstrap,但现在webpack无法再加载这个模块了。

我是这样启动webpack的:

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

以下是错误信息,它找不到 react-bootstrap 内的 package.json 文件:

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

这真的很奇怪,我的package.json看起来像:

{
  "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"
  }
}

我的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']
              },
};

此外,文件夹react-bootstrap确实存在于我的node_modules中。
我的目录结构如下:
webpack.config.js
node_modules
package.json

我完全迷失了......



FYI,我已经在boilerplate中安装了react-bootstrap并在demo/index.js中执行了var bs = require('react-bootstrap');。对我来说很有效。 - Juho Vepsäläinen
15
毫无疑问,但是一定要使用 rm -r node_modules 命令删除旧的包文件夹,然后再运行 npm install 命令,看是否仍会出现相同的问题。 - Austin Pray
2
如果删除 node_modules 文件夹无效,请确保您也删除了 package-lock.json 文件,然后再尝试运行 npm i。这对我来说解决了问题。 - Dominik
1
你真的想要将所有这些东西全局安装吗?vendor: ['react', 'react-router', 'react-bootstrap', 'react-google-recaptcha', 'react-spinkit'], - thomasmeadows
3个回答

1
值得注意的是,webpack 在 node_modules/.cache/terser-webpack-plugin 存储缓存。我建议尝试删除该文件夹并重新运行 webpack。这通常可以解决捆绑问题,对此我已将其包含在“清理”脚本中,可以通过 npm run clean 运行。

0
尝试编辑 package.json 并将 "react-bootstrap": "^0.23.7" 添加到 devDependencies 中,就像下面所做的那样。
"devDependencies": {
"react-bootstrap": "^0.23.7",
    "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"
  }

-1

我很困惑你的链接如何提供任何解决方案的指导。 - ambe5960

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接