сервера DEV Webpack - ошибка Hot Замена модуля

Question

Я использую сервер Dev Webpack для развития и хотел бы использовать hot module replacement функции, но при запуске сервера Dev я получаю сообщение об ошибке:

ERROR in debug (bower component) 
Module not found: Error: Cannot resolve 'file' or 'directory' ./dist/debug.js in /Users/and/devel/WebstormProjects/Wonderland_front/node_modules/webpack-dev-server/node_modules/sockjs-client/node_modules/debug 
@ debug (bower component) 1:17-43 

package.json

{ 
    "name": "Wond", 
    "version": "0.0.1", 
    "description": "Internal evidence application", 
    "main": "index.jsx", 
    "scripts": { 
    "start": "npm run serve | npm run dev", 
    "serve": "./node_modules/.bin/http-server -p 8080", 
    "dev": "webpack-dev-server -d --hot --inline --progress --colors --port 8090" 
    }, 
    "author": "And", 
    "license": "ISC", 
    "devDependencies": { 
    "autoprefixer": "^6.2.2", 
    "babel-core": "^6.0.20", 
    "babel-loader": "^6.0.1", 
    "babel-preset-es2015": "^6.0.15", 
    "babel-preset-react": "^6.0.15", 
    "backbone": "^1.2.3", 
    "bootstrap": "^3.3.5", 
    "bootstrap-select": "^1.9.3", 
    "bower-webpack-plugin": "^0.1.9", 
    "cookies-js": "^1.2.2", 
    "css-loader": "^0.23.0", 
    "eonasdan-bootstrap-datetimepicker": "^4.15.35", 
    "events": "^1.1.0", 
    "extract-text-webpack-plugin": "^0.9.0", 
    "file-loader": "^0.8.5", 
    "flux": "^2.1.1", 
    "html-webpack-plugin": "^1.7.0", 
    "http-server": "^0.8.5", 
    "immutable": "^3.7.6", 
    "immutablediff": "0.4.2", 
    "jquery": "^2.1.4", 
    "jquery-resizable-columns": "^0.2.3", 
    "jquery-ui": "^1.10.5", 
    "json-markup": "^0.1.6", 
    "less": "^2.5.3", 
    "less-loader": "^2.2.2", 
    "lodash": "^3.10.1", 
    "moment": "^2.10.6", 
    "node-sass": "^3.4.1", 
    "object-assign": "^4.0.1", 
    "path": "^0.12.7", 
    "postcss": "^5.0.13", 
    "postcss-loader": "^0.8.0", 
    "react": "^0.14.3", 
    "react-dom": "^0.14.3", 
    "react-hot-loader": "^1.3.0", 
    "react-mixin": "^3.0.3", 
    "sass-loader": "^3.1.2", 
    "select2": "^4.0.0", 
    "select2-bootstrap-css": "^1.4.6", 
    "style-loader": "^0.13.0", 
    "svg-sprite-loader": "0.0.2", 
    "typeahead.js": "^0.11.1", 
    "url-loader": "^0.5.7", 
    "webpack": "^1.12.9", 
    "webpack-dev-server": "^1.14.0", 
    "webpack-merge": "^0.5.1" 
    } 
} 

webpack.config.js

var webpack = require('webpack'); 
var merge = require('webpack-merge'); 
var BowerWebpackPlugin = require("bower-webpack-plugin"); 
var autoprefixer = require('autoprefixer'); 

const TARGET = process.env.npm_lifecycle_event; 
console.log("target is event is " + TARGET); 

var common = { 
    cache: true, 
    debug: true, 
    entry: './src/script/index.jsx', 
    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 
    output: { 
     sourceMapFilename: '[file].map' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js[x]?$/, 
       loaders: ['react-hot', 'babel'], 
       exclude: /(node_modules|bower_components|other_modules)/ 
      }, 
      {test: /\.css$/, loaders: ['style', 'css']}, 
      {test: /\.scss$/, loaders: ['style', 'css', 'postcss', 'sass']}, 
      {test: /\.less$/, loaders: ['style', 'css', 'less']}, 
      { test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]" }, 
      { test: /\.woff2$/, loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]" }, 
      {test: /\.(eot|ttf|svg|gif|png)$/, loader: "file-loader"} 
     ] 
    }, 
    plugins: [ 
     new BowerWebpackPlugin() 
    ], 
    postcss: function() { 
     return [autoprefixer({browsers: ['last 3 versions']})]; 
    } 
}; 

if(TARGET === 'dev' || !TARGET) { 
    module.exports = merge(common,{ 
     devtool: 'eval-source-map', 
     devServer: { 
      historyApiFallback: true, 

      // display only errors to reduce the amount of output 
      stats: 'errors-only' 
     }, 
     output: { 
      filename: 'index.js', 
      publicPath: 'http://localhost:8090/assets' 
     } 
    }); 
} 

Если я удаляю --hot и --inline флаги, работает сервер dev (без функции замены горячего модуля).

Answer 1

+1 для этой проблемы. Я только начал получать эту ошибку, когда я добавил блок devServer в config с inline: true.

config.devServer = { 
    contentBase: config.output.path, // We want to re-use this path 
    noInfo: false, 
    debug: false, // Makes no difference 
    port: 5566, 
    https: true, 
    colors: true, 
    //hot: true, // Pass this from the command line as '--hot', which sets up the HotModuleReplacementPlugin automatically 
    inline: true // Setting this to false clears the error 
}; 

Установка inline: false удаляет консольную ошибку.

---- Редактировать ---- Я считаю, что эта проблема связана с https://github.com/socketio/socket.io/issues/2109. Socket-IO используется горячим перезагрузчиком, когда используется встроенная линия, поэтому проблема возникает только при использовании функции hot + inline.

В качестве обходного пути, я добавляю эти два сценария к моему package.json:

"scripts": { 
    "postinstall": "npm run fixDistDebugRef", 
    "fixDistDebugRef": "mkdir -p node_modules/debug/dist && cp node_modules/debug/debug.js node_modules/debug/dist/" 
} 

... который добавляет недостающий файл, ошибка относится, после npm install запускается.

Answer 2

Мне удалось исправить это, сбросив gower-webpack-плагин из моей конфигурации. Это было предложено одним из плакатов в потоке https://github.com/socketio/socket.io/issues/2109, на который ссылался @u_glow.

Без этого плагина Webpack не будет искать модули в папке bower_components, если вы специально не сообщите об этом. Я сделал это, добавив следующий мой webpack.config.js:

resolve: { 
    modulesDirectories: ['node_modules', 'bower_components'] 
}, 

(памятка для себя:. Не слепо устанавливать плагин, пока вы не будете абсолютно уверены, что вам нужно)