Webpack-dev-server: V2 Can't resolve 'fs' in webpack-dev-server/client

Created on 30 Dec 2016  Â·  7Comments  Â·  Source: webpack/webpack-dev-server

There is an error when I use webpack-dev-serverï¼›
webpack: 2.2.0-rc.1
webpack-dev-server: 2.2.0-rc.0
node: 6.6.0

ERROR in ./~/debug/src/node.js
Module not found: Error: Can't resolve 'net' in '/Users/gaopeng/work/ykpm/node_modules/debug/src'
 @ ./~/debug/src/node.js 186:16-30
 @ ./~/debug/src/index.js
 @ ./~/sockjs-client/lib/main.js
 @ ./~/sockjs-client/lib/entry.js
 @ (webpack)-dev-server/client/socket.js
 @ (webpack)-dev-server/client?http://local.youku.com:3333/
 @ multi js/lib

webpackConfig

{
  target: 'web',
  context: '/Users/gaopeng/work/ykpm',
  entry:  { 
     'js/play/live': [
         'webpack-dev-server/client?http://local.youku.com:3333/',
         'webpack/hot/dev-server',
         'js/play/live.js'
    ]
  },
  output: { 
     path: '/',
     publicPath: '/',
     filename: '[name].js',
     pathinfo: false,
     chunkFilename: '[name].js',
  },
  module: {                                             
      rules: [{
          test: /.js?$/,
     exclude: /node_modules/,
     use: [
         { loader: 'babel-loader' }
     ]
      }]                                    
  },
  resolve: { 
     modules: [ '/Users/gaopeng/work/ykpm/src', 'node_modules' ],
     extensions: [ '.js', '.json' ]
  },
  plugins:[new HotModuleReplacementPlugin()]
}

devServerConfig

{
 contentBase: './static/',
  https: false,
  host: 'local.yk.com',
  port: 3333,
  hot: true,
  inline: true,
  stats: { colors: true }
}

Most helpful comment

I could reproduce your issue. It's caused by using resolve.mainFields in your webpack config. If you remove that, it works. You can add custom fields to it, but be sure to add at least ["browser", "module", "main"].

All 7 comments

Are you running dev-server from CLI? If yes, make sure to remove webpack-dev-server/client from your entry object and add --publiclocal.youku.com:3333 instead.

Also, could you try to replace host: 'local.yk.com' with host: '0.0.0.0'?

I can't reproduce this error so I'm just guessing here...

I am running dev-server in node, remove webpack-dev-server/client, can running, but not hot update……

let compiler = webpack(webpackConfig(compilerOptions, root));
let server = new WebpackDevServer(compiler, devServerConfig);

Okay if you are running in Node then you shouldn't remove webpack-dev-server/client. Did you try the host thing as I mentioned above?

If that doesn't work, could you make sure to first update to the latest webpack RC and then make a repo that reproduces the error? Before doing that, I would recommend to try to strip your webpack config as much as possible, to see if something else is causing the error. A common cause is an invalid value in the resolve config.

I found somethings in the document after build. i have try host,but not it;

dev-server use node module sockjs-client,and sockjs-client use node moudle debug

webpack transform debug to browser js, throw error.

Can you check diff of your code output below :

/**
 * Copied from `node/src/node.js`.
 *
 * XXX: It's lame that node doesn't expose this API out-of-the-box. It also
 * relies on the undocumented `tty_wrap.guessHandleType()` which is also lame.
 */

function createWritableStdioStream (fd) {
  var stream;
  var tty_wrap = process.binding('tty_wrap');

  // Note stream._type is used for test-module-load-list.js

  switch (tty_wrap.guessHandleType(fd)) {
    case 'TTY':
      stream = new tty.WriteStream(fd);
      stream._type = 'tty';

      // Hack to have stream not keep the event loop alive.
      // See https://github.com/joyent/node/issues/1726
      if (stream._handle && stream._handle.unref) {
        stream._handle.unref();
      }
      break;

    case 'FILE':
      var fs = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"fs\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
      stream = new fs.SyncWriteStream(fd, { autoClose: false });
      stream._type = 'fs';
      break;

    case 'PIPE':
    case 'TCP':
      var net = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"net\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
      stream = new net.Socket({
        fd: fd,
        readable: false,
        writable: true
      });

      // FIXME Should probably have an option in net.Socket to create a
      // stream from an existing fd which is writable only. But for now
      // we'll just add this hack and set the `readable` member to false.
      // Test: ./node test/fixtures/echo.js < /etc/passwd
      stream.readable = false;
      stream.read = null;
      stream._type = 'pipe';

      // FIXME Hack to have stream not keep the event loop alive.
      // See https://github.com/joyent/node/issues/1726
      if (stream._handle && stream._handle.unref) {
        stream._handle.unref();
      }
      break;
    default:
      // Probably an error on in uv_guess_handle()
      throw new Error('Implement me. Unknown stream file type!');
  }
  // For supporting legacy API we put the FD here.
  stream.fd = fd;
  stream._isStdio = true;
  return stream;
}

I don't know what I can do with the code you posted above? Could you please make a repository that reproduces the problem you're having?

here is template
nodejs version v6.6.0
run npm run test
output error

ERROR in ./~/debug/src/node.js
Module not found: Error: Can't resolve 'fs' in '/Users/gaopeng/work/webpack-dev-ser-test/node_modules/debug/src'
 @ ./~/debug/src/node.js 174:15-28
 @ ./~/debug/src/index.js
 @ ./~/sockjs-client/lib/main.js
 @ ./~/sockjs-client/lib/entry.js
 @ (webpack)-dev-server/client/socket.js
 @ (webpack)-dev-server/client?http://localhost:8080
 @ multi js/play/live

ERROR in ./~/debug/src/node.js
Module not found: Error: Can't resolve 'net' in '/Users/gaopeng/work/webpack-dev-ser-test/node_modules/debug/src'
 @ ./~/debug/src/node.js 181:16-30
 @ ./~/debug/src/index.js
 @ ./~/sockjs-client/lib/main.js
 @ ./~/sockjs-client/lib/entry.js
 @ (webpack)-dev-server/client/socket.js
 @ (webpack)-dev-server/client?http://localhost:8080
 @ multi js/play/live

I could reproduce your issue. It's caused by using resolve.mainFields in your webpack config. If you remove that, it works. You can add custom fields to it, but be sure to add at least ["browser", "module", "main"].

Was this page helpful?
0 / 5 - 0 ratings