我的React + Webpack + Rails + Bootstrap突然出错

时间:2016-01-28 19:17:27

标签: ruby-on-rails twitter-bootstrap reactjs webpack

大约一周前,我的应用程序正在部署到生产中,但现在我正在看

未捕获错误:找不到模块" ./ lib / bootstrap.loader!。/ no-op.js"



var path = require('path');
var webpack = require('webpack');

var config = module.exports = {

    entry: [
      'bootstrap-loader',
      './app/frontend/javascripts/main.js'
    ],
    stats: {
          // Configure the console output
          colors: true,
          modules: true,
          reasons: true
      },
    progress: true,
    keepalive: true,
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel-loader', // 'babel-loader' is also a legal name to reference
          query: {
            presets: ['es2015', 'react']
          }
        }, {
          test: /\.css$/,
          loader: 'style!css'
        },
        { test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' },
        { test: /\.png$/, loader: "url-loader?limit=100000" },
        { test: /\.jpg$/, loader: "file-loader" },
        { test: /\.woff$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
        { test: /\.(woff2?|svg)$/, loader: 'url?limit=10000' },
        { test: /\.(ttf|eot)$/, loader: 'file' }

      ]
    },
    output: {
      path: './app/assets/javascripts/',
      filename: 'bundle.js',
      publicPath: '/assets/',
      devtoolModuleFilenameTemplate: '[resourcePath]',
      devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]',
    },
    resolve: {
      extensions: ['', '.js', '.jsx'],
      modulesDirectories: [ 'node_modules', 'bower_components' ],
    },

    plugins: [
      new webpack.ResolverPlugin([
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('.bower.json', ['main'])
      ]),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
      }),
      //new webpack.optimize.CommonsChunkPlugin('common-bundle.js'),
      //new webpack.optimize.CommonsChunkPlugin('public-bundle.js')
    ]
};




我的package.json



  "devDependencies": {
    "babel-core": "~6.4.0",
    "babel-loader": "~6.2.1",
    "babel-preset-es2015": "~6.3.13",
    "babel-preset-react": "~6.3.13",
    "exports-loader": "~0.6.2",
    "expose-loader": "~0.6.0",
    "grunt": "~0.4.5",
    "grunt-babel": "~6.0.0",
    "grunt-cli": "~0.1.13",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-webpack": "~1.0.11",
    "history": "~1.17.0",
    "imports-loader": "~0.6.3",
    "jquery": "~2.1.4",
    "lodash": "~3.0.0",
    "react": "~0.14.6",
    "react-dom": "~0.14.6",
    "webpack": "~1.12.10",
    "webpack-dev-server": "~1.14.0"
  },
  "dependencies": {
    "autoresponsive-react": "^1.1.10",
    "bluebird": "~3.1.1",
    "bootstrap": "~3.3.6",
    "bootstrap-loader": "~1.0.3",
    "bootstrap-sass": "~3.3.6",
    "bootstrap-webpack": "0.0.5",
    "chunk-manifest-webpack-plugin": "0.0.1",
    "classnames": "^2.2.3",
    "css-loader": "~0.23.1",
    "extract-text-webpack-plugin": "~1.0.1",
    "file-loader": "~0.8.5",
    "grunt-react": "~0.12.3",
    "less": "~2.5.3",
    "less-loader": "~2.2.2",
    "node-sass": "~3.4.2",
    "react-bootstrap": "~0.28.1",
    "react-dropzone": "~3.3.2",
    "react-grid-layout": "^0.10.0-beta1",
    "react-image-component": "^1.0.0",
    "react-input-autosize": "^0.6.6",
    "react-modal-dialog": "^2.0.0",
    "react-responsive": "^1.1.0",
    "react-router": "~2.0.0-rc4",
    "react-router-component": "~0.29.0",
    "react-select": "^0.9.1",
    "react-spinjs": "^2.0.1",
    "react-swipe": "^3.0.0",
    "reflux": "~0.3.0",
    "reflux-core": "^0.3.0",
    "reflux-promise": "^1.0.2",
    "resolve-url-loader": "~1.4.3",
    "sass-loader": "~3.1.2",
    "style-loader": "~0.13.0",
    "superagent": "~1.6.1",
    "superagent-bluebird-promise": "~3.0.0",
    "url-loader": "~0.5.7"
  }
}




部署时,我收到此错误。当我看到bootstrap-loader时,我不知道发生了什么,如果有人知道这可以指出我正确的方向,我是最伟大的。

Error I am receiving now...

1 个答案:

答案 0 :(得分:0)

以下是类似的错误https://github.com/shakacode/bootstrap-loader/issues/4

他们通过确保安装了最新版本的bootstrap-loader解决了这个问题:

npm install --save bootstrap-loader@1.0.0-rc

npm install --save bootstrap-loader@latest