Webpack无法加载我的npm模块

时间：2015-07-10 13:34:30

标签： node.js npm webpack commonjs react-bootstrap

我遇到了麻烦，我刚刚npm卸载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']
              },
};

另外，我的node_modules中存在文件夹react-bootstrap。

我的树是这样的：

webpack.config.js

node_modules

的package.json

我完全失去了......

4 个答案:

答案 0 :(得分：1)

值得注意的是，webpack在npm run clean处存储了一个缓存。我会尝试删除它并重新运行webpack。这通常可以为我解决捆绑软件问题，以至于我将其包含在通过 <div class="page-content-wrapper "> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <div class="page-title-box"> <!-- <div class="btn-group float-right"> <ol class="breadcrumb hide-phone p-0 m-0"> <li class="breadcrumb-item"><a href="#">Annex</a></li> <li class="breadcrumb-item"><a href="#">Tables</a></li> <li class="breadcrumb-item active">Datatable</li> </ol> </div> --> <h4 class="page-title">Redeems</h4> </div> </div> </div> <!-- end page title end breadcrumb --> <div class="row"> <div class="col-12"> <div class="card m-b-30"> <div class="card-body"> <!-- <h4 class="mt-0 header-title">Users</h4> --> <!-- <p class="text-muted m-b-30 font-14">DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code>. </p> --> <!-- <button class="btn btn-primary"> <a href="adduser.php" style="text-decoration:none; color:white">Add User</a> </button> --> <br /> <br /> <div class=" table-responsive"> <table id="datatable" class="table table-bordered"> <thead> <tr> <th>Name</th> <th>Dollar</th> <th>Category</th> <th>Coin</th> <th>Operation</th> <th>List Dollar</th> <th>List Coins</th> <!-- <th>Operation</th> --> </tr> </thead> <tbody> <?php include("includes/db.php"); $ref = "Redeem"; if(isset($_GET['del'])){ $database->getReference("Redeem/".$_GET['del'])->remove(); echo '<script>window.location="redeem.php"</script>'; } $data = $database->getReference($ref)->getValue(); $i = 0; foreach($data as $key => $data1){ $i++; ?> <tr> <td><?php echo $data1['name']; ?></td> <td><?php echo $data1['dollar']; ?></td> <td><?php echo $data1['category']; ?></td> <td><?php echo $data1['coins']; ?></td> <!-- <td class="text-center"> <a onclick="return confirm('Are you sure to Approve this Redeem!')" class="btn btn-primary" href="redeem.php?update=<?php echo $key; ?>"> Approve </a> </td> --> <td class="text-center"> <a href="updateredeem.php?update=<?php echo $key; ?>"> <i style="font-size:25px;color:blue;margin-right:8px" class="ion-edit"></i> </a> <a href="redeem.php?del=<?php echo $key; ?>" onclick="return confirm('Are you sure to delete!')"> <i style="font-size:25px;color:#e30513;" class="ion-close-circled"></i> </a> </td> <?php include("includes/db.php"); $ref = "Redeem"; // if(isset($_GET['del'])){ // $database->getReference("Redeem/".$_GET['del'])->remove(); // echo '<script>window.location="redeem.php"</script>'; // } $pushKey = $database->getReference("Redeem/".$key."/"."list/")->getKey(); $pushData = $database->getReference("Redeem/".$key."/"."list/")->getValue(); //$data = $database->getReference($ref).child("name/list")->getValue(); $i = 0; foreach($pushData as $key => $data1){ $i++; //echo $data1['coins']; ?> <td><?php echo $data1['dollar']; ?></td> <?php } ?> </tr> <?php } ?> </tbody> </table> </div> </div> </div> </div> <!-- end col --> </div> <!-- end row --> </div><!-- container --> </div> <!-- Page content Wrapper --> </div> <!-- content --> 调用的“干净”脚本中。

答案 1 :(得分：0)

从驱动器中删除node_modules文件夹并删除package.json 再次执行一次npm，希望它通常会开始工作。在index.html上，尝试在下加载react-bootstrap.js 

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

答案 2 :(得分：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"
  }

答案 3 :(得分：-1)

您也可以使用webpack-dev-server模块执行相同的操作。我认为这可行！ https://www.npmjs.com/package/webpack-dev-server

相关问题
最新问题