ERROR in ./~/sockjs-client/~/faye-websocket/lib/faye/websocket/client.js calling webpack-dev-Server

Question

Ich erhalte die folgenden Fehler Aufruf webpack-dev-Server:

ERROR in ./~/sockjs-client/~/faye-websocket/lib/faye/websocket/client.js 
Module not found: Error: Can't resolve 'net' in '/Users/lololo/src/lalala/node_modules/sockjs-client/node_modules/faye-websocket/lib/faye/websocket' 
@ ./~/sockjs-client/~/faye-websocket/lib/faye/websocket/client.js 2:13-27 
@ ./~/sockjs-client/~/faye-websocket/lib/faye/websocket.js 
@ ./~/sockjs-client/lib/transport/driver/websocket.js 
@ ./~/sockjs-client/lib/transport/websocket.js 
@ ./~/sockjs-client/lib/transport-list.js 
@ ./~/sockjs-client/lib/entry.js 
@ (webpack)-dev-server/client/socket.js 
@ (webpack)-dev-server/client?http://localhost:8080 
@ multi main 

Mein package.json wie folgt aussieht:

{ "name": "editor", "version": "0.1.0", "dependencies": { "backbone": "^1.3.3", "bootstrap-sass": "^3.3.7", "highlight.js": "^9.6.0", "marked": "^0.3.6", "moment": "^2.14.1", "node-sass": "^3.8.0", "nuka-carousel": "^2.0.2", "react": "^15.2.0", "react-dom": "^15.2.0", "react-redux": "^4.4.5", "react-router": "^2.0.0", "react-tooltip": "^3.1.6", "redux": "^3.5.2", "store": "^1.3.20" }, "devDependencies": { "babel-cli": "^6.16.0", "babel-core": "^6.13.2", "babel-eslint": "^7.0.0", "babel-jest": "^15.0.0", "babel-loader": "^6.2.5", "babel-preset-es2015": "^6.16.0", "babel-preset-es2017": "^6.14.0", "babel-preset-react": "^6.0.14", "babel-preset-stage-0": "^6.5.0", "body-parser": "^1.15.0", "chalk": "^1.1.3", "css-loader": "^0.24.0", "enzyme": "^2.4.1", "eslint": "^3.7.1", "eslint-plugin-react": "^4.1.0", "extract-text-webpack-plugin": "^2.0.0-beta.4", "file-loader": "^0.9.0", "jest": "^15.1.1", "jest-cli": "^16.0.0", "json-loader": "^0.5.4", "lodash": "^4.15.0", "ncp": "^2.0.0", "node-sass": "^3.8.0", "react-addons-test-utils": "^15.3.2", "react-test-renderer": "^15.3.2", "sass-loader": "^4.0.0", "selenium-standalone": "^5.1.0", "sinon": "^1.17.6", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webdriverio": "^4.0.9", "webpack": "^2.1.0-beta.22", "webpack-dev-server": "^2.1.0-beta.9" }, "scripts": { "test": "jest --no-cache", "lint": "eslint app/es6", "clean-distx": "rimraf dist && mkdir dist", "wp": "webpack --env.dev -p", "build": "jest && npm run clean-dist && webpack --env.prod -p && npm run copy-files", "copy-files": "babel-node --presets es2017 tools/copy.js", "purgeDist": "rm dist/*.pem", "deploy": "npm run purgeDist && firebase deploy", "server": "webpack-dev-server --env.dev --content-base dist", "start": "npm run clean-dist && npm run copy-files && npm run server" }, "jest": { "automock": true, "unmockedModulePathPatterns": [ "react", "react-dom", "react-addons-test-utils", "fbjs", "enzyme", "cheerio", "htmlparser2", "underscore", "lodash", "domhandler", "object.assign", "define-properties", "function-bind", "object-keys", "moment", "store" ], "modulePathIgnorePatterns": [ "integrationTests" ], "moduleNameMapper": { "models/(.*)": "<rootDir>/app/es6/models/$1", "controllers/(.*)": "<rootDir>/app/es6/controllers/$1", "components/(.*)": "<rootDir>/app/es6/components/$1", "stores/(.*)": "<rootDir>/app/es6/stores/$1", "reducers/(.*)": "<rootDir>/app/es6/reducers/$1" } } }

und webpack config:

const path = require('path'); 
const webpack = require('webpack'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

const jsConfig = env => ({ 
    target: 'web', 
    context: __dirname + '/app', 
    entry: './es6/main.js', 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     publicPath: '/', 
     filename: 'bundle.js' 
    }, 
    // Important! Do not remove ''. If you do, imports without 
    // an extension won't work anymore! 
    resolve: { 
     modules: [path.resolve(__dirname, 'app'), 'node_modules'], 
     extensions: ['.js', '.jsx'], 
     aliasFields: ['components'], 
     alias: { 
      es6: 'es6', 
      components: 'es6/components', 
      controllers: 'es6/controllers', 
      models: 'es6/models', 
      stores: 'es6/stores', 
      reducers: 'es6/reducers' 
     }, 
    }, 
    devtool: env.prod ? false : 'eval', 
    // externals: [ 
    //  'sockjs' 
    // 
    // ], 
    module: { 
     loaders: [ 
      { test: /\.json$/, loader: 'json'}, 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel', // 'babel-loader' is also a legal name to reference 
       query: { 
        presets: [['es2015', {'modules': false}], 'react', 'stage-0'] 
       } 
      } 
     ] 
    }, 
    devServer: { 
     contentBase: './app', 
     inline: true, 
     hot: true 
    }, 
    plugins: [ 
     new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en)$/), 
     new webpack.optimize.UglifyJsPlugin(), 
     new webpack.ProvidePlugin({ 
      React: 'react', 
      ReactDOM: 'react-dom' 

     }) 
    ] 
}); 

const cssConfig = env => ({ 
    context: __dirname + '/app', 
    entry: './sass/main.scss', 
    output: { 
     filename: 'main.css', 
     path: path.resolve(__dirname, 'dist/styles') 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.s?css/, 
       loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css!sass' }) 
      }, 
      { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=public/fonts/[name].[ext]' }, 
      { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=public/fonts/[name].[ext]' }, 
      { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=public/fonts/[name].[ext]' }, 
      { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]' }, 
      { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/fonts/[name].[ext]' } 

     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('main.css') 
    ] 
}); 

module.exports = env => [jsConfig(env), cssConfig(env)]; 

I habe noch keine Referenzen online von jemandem gefunden, der genau das gleiche Problem hat.

Answer 1

fand ich meine 'alias' und 'aliasFields' auf webpack dieses Problem 2.

ich entfernt haben die vollständig und ersetzt 'alias' 'aliasFields' verursacht wurden mit den folgenden:

alias: { es6: path.resolve(__dirname, 'app/es6'), components: path.resolve(__dirname, 'app/es6/components'), controllers: path.resolve(__dirname, 'app/es6/controllers'), models: path.resolve(__dirname, 'app/es6/models'), stores: path.resolve(__dirname, 'app/es6/stores'), reducers: path.resolve(__dirname, 'app/es6/reducers') },

was scheint den Trick zu tun.

Ich bin mir jedoch immer noch nicht sicher, wo ich die komplette Dokumentation zu diesen Bereichen finden kann. Und ich weiß auch, dass ich weder den besten Ansatz zum Umgang mit diesen Ordnern noch die beste Ordnerstruktur für ein React-Redux-Projekt verwende.