Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack build issues with 1.4.1 #933

Closed
mlucool opened this issue Jan 7, 2016 · 57 comments
Closed

Webpack build issues with 1.4.1 #933

mlucool opened this issue Jan 7, 2016 · 57 comments

Comments

@mlucool
Copy link

mlucool commented Jan 7, 2016

With 1.4.1 I am seeing the following issue from Webpack. My code has no issues with 1.4.0

WARNING in ./~/mySubApp/~/socket.io-client/~/engine.io-client/~/ws/lib/BufferUtil.js
Module not found: Error: Cannot resolve module 'bufferutil' in /u//WebStormProjects/myProject/node_modules/mySubApp/node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws/lib
 @ ./~/mySubApp/~/socket.io-client/~/engine.io-client/~/ws/lib/BufferUtil.js 10:19-40

WARNING in ./~/mySubApp/~/socket.io-client/~/engine.io-client/~/ws/lib/Validation.js
Module not found: Error: Cannot resolve module 'utf-8-validate' in /u//WebStormProjects/myProject/node_modules/mySubApp/node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws/lib
 @ ./~/mySubApp/~/socket.io-client/~/engine.io-client/~/ws/lib/Validation.js 10:19-44

ERROR in ./~/mySubApp/~/socket.io-client/~/engine.io-client/~/ws/lib/WebSocketServer.js
Module not found: Error: Cannot resolve module 'tls' in /u//WebStormProjects/myProject/node_modules/mySubApp/node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws/lib
 @ ./~/mySubApp/~/socket.io-client/~/engine.io-client/~/ws/lib/WebSocketServer.js 15:10-24

ERROR in ./~/mySubApp/~/socket.io-client/~/engine.io-client/~/ws/~/options/lib/options.js
Module not found: Error: Cannot resolve module 'fs' in /u//WebStormProjects/myProject/node_modules/mySubApp/node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws/node_modules/options/lib
 @ ./~/mySubApp/~/socket.io-client/~/engine.io-client/~/ws/~/options/lib/options.js 6:9-22
@EvHaus
Copy link

EvHaus commented Jan 7, 2016

+1

@rauchg
Copy link
Contributor

rauchg commented Jan 8, 2016

I recommend for now:

  module: {
    noParse: ['ws']
  },
  externals: ['ws']

until we figure out a better fix

@bobak
Copy link

bobak commented Jan 8, 2016

Reason is probably that the published package on npm contains a webpack.config.js file which it didn't with <=1.4.0. Where is that coming from anyway? I can't see it in the repo.

@levino
Copy link

levino commented Jan 8, 2016

Browserify build fails too. Forcing usage of 1.4.0 fixes the issue.

@rauchg
Copy link
Contributor

rauchg commented Jan 8, 2016

I accidentally published that file. I was experimenting with moving away from browserify.

@rauchg
Copy link
Contributor

rauchg commented Jan 8, 2016

1.4.3 out.

@rauchg rauchg closed this as completed Jan 8, 2016
@rauchg
Copy link
Contributor

rauchg commented Jan 8, 2016

Note to self: should explicitly set files in package.json

@EvHaus
Copy link

EvHaus commented Jan 8, 2016

Still having the same issues with 1.4.3. Adding:

 module: {
    noParse: ['ws']
  },
  externals: ['ws']

Helps though.

@levino
Copy link

levino commented Jan 8, 2016

Still broken.

@rauchg rauchg reopened this Jan 8, 2016
@darrachequesne
Copy link
Member

@levino I think you'll have to make browserify ignore/exclude ws, like there

But any solution better than this workaround will be warmly welcomed.

@levino
Copy link

levino commented Jan 8, 2016

I just use version "~1.3.7" instead of "^1.3.7" in my packages for now.

@ADumaine
Copy link

ADumaine commented Jan 8, 2016

Moved this from server to this socket.io-client thread.


Was running 1.3.7 and used npm to update socket.io-client to 1.4.3.

The app uses just the socket.io-client to connect to a game server(also updated to socket.io 1.4.3). Developing on windows 7.

Tried uninstalling via npm and reinstalling. Did not expect to see warnings and errors from socket.io-client and engine.io-client when starting the app.

Shouldn't the missing modules be part of the npm package?

Warnings:

WARNING in ./~/socket.io-client/~/engine.io-client/~/ws/lib/BufferUtil.js
Module not found: Error: Cannot resolve module 'bufferutil' in C:\Data\captchatheprize.com\dev\gamewww\node_modules\socket.io-client\node_modules\engine.io-clie
nt\node_modules\ws\lib
@ ./~/socket.io-client/~/engine.io-client/~/ws/lib/BufferUtil.js 10:19-40

WARNING in ./~/socket.io-client/~/engine.io-client/~/ws/lib/Validation.js
Module not found: Error: Cannot resolve module 'utf-8-validate' in C:\Data\captchatheprize.com\dev\gamewww\node_modules\socket.io-client\node_modules\engine.io-
client\node_modules\ws\lib
@ ./~/socket.io-client/~/engine.io-client/~/ws/lib/Validation.js 10:19-44

Errors:

ERROR in ./~/socket.io-client/~/engine.io-client/~/ws/lib/WebSocketServer.js
Module not found: Error: Cannot resolve module 'tls' in C:\Data\captchatheprize.com\dev\gamewww\node_modules\socket.io-client\node_modules\engine.io-client\node
_modules\ws\lib
@ ./~/socket.io-client/~/engine.io-client/~/ws/lib/WebSocketServer.js 15:10-24

ERROR in ./~/socket.io-client/~/engine.io-client/~/ws/~/options/lib/options.js
Module not found: Error: Cannot resolve module 'fs' in C:\Data\captchatheprize.com\dev\gamewww\node_modules\socket.io-client\node_modules\engine.io-client\node_
modules\ws\node_modules\options\lib
@ ./~/socket.io-client/~/engine.io-client/~/ws/~/options/lib/options.js 6:9-22

@levino
Copy link

levino commented Jan 8, 2016

@ADumaine Did you have any issues with 1.3.7? If not just keep using it until this here is solved.

@ADumaine
Copy link

ADumaine commented Jan 8, 2016

@levino No 1.3.7 was not having any issues. 1.4.3 actually works. It connects to the server and passes data, but I am still developing locally and not using things like tls. I'll leave it at 1.4.3 for now and test any updates or revert if there are none and we are ready to stage.

@rauchg
Copy link
Contributor

rauchg commented Jan 9, 2016

We're publishing a more permanent fix today!

@archr
Copy link

archr commented Jan 10, 2016

Great.

py-in-the-sky added a commit to py-in-the-sky/gae-flask-redux-react-starter-kit that referenced this issue Jan 11, 2016
@EvHaus
Copy link

EvHaus commented Jan 11, 2016

1.4.4 Fixes this for me. Thanks!

@ADumaine
Copy link

1.4.4 fixed it for me too!. Used npm with @latest. Restarted server and there were no warnings or errors.
Thanks!

@mrvini
Copy link

mrvini commented Jan 11, 2016

still an issue for me, i've updated to a latest socket.io-client, ws and webpack, and get the following

WARNING in ./~/ws/lib/BufferUtil.js
Module not found: Error: Cannot resolve module 'bufferutil' in /home/test/Projects/B_Components/node_modules/ws/lib
 @ ./~/ws/lib/BufferUtil.js 10:19-40

WARNING in ./~/ws/lib/Validation.js
Module not found: Error: Cannot resolve module 'utf-8-validate' in /home/test/Projects/B_Components/node_modules/ws/lib
 @ ./~/ws/lib/Validation.js 10:19-44

WARNING in ./~/mymodule-services/~/sails.io.js/~/request/lib/optional.js
Critical dependencies:
3:11-26 the request of a dependency is an expression
 @ ./~/mymodule-services/~/sails.io.js/~/request/lib/optional.js 3:11-26
webpack: bundle is now VALID.

@darrachequesne
Copy link
Member

@mrvini what are the steps to reproduce please? I have the following with socket.io-client@1.4.4:

damien@home:~/git/socket.io-client$ webpack . bundle.js
Hash: 321bb2158ab30d957364
Version: webpack 1.12.11
Time: 685ms
    Asset    Size  Chunks             Chunk Names
bundle.js  195 kB       0  [emitted]  main
   [0] ./lib/index.js 1.66 kB {0} [built]
   [1] ./lib/url.js 1.61 kB {0} [built]
  [14] ./lib/manager.js 12 kB {0} [built]
  [43] ./lib/socket.js 7.54 kB {0} [built]
  [46] ./lib/on.js 370 bytes {0} [built]
    + 46 hidden modules

@globexdesigns @ADumaine ❤️

@mrvini
Copy link

mrvini commented Jan 11, 2016

@darrachequesne, I have the following setup
node: v4.2.3

I have my local module that using sails.io.js and socket.io-client libraries
sails.io.js: 0.12.2
socket.io-client: 1.4.4
I am including this module into the application and running webpack server
webpack: 1.12.11
webpack-dev-server: 1.14.1

when I run webpack .bundle.js, everything looks good, however when I try run it as webpack dev server, it throws the error I mentioned above

@darrachequesne
Copy link
Member

@mrvini I'm sorry, it seems I am unable to reproduce:

damien@home:~/test$ npm install socket.io-client@1.4.4
socket.io-client@1.4.4 node_modules/socket.io-client
├── component-emitter@1.2.0
├── to-array@0.1.3
├── indexof@0.0.1
├── component-bind@1.0.0
├── object-component@0.0.3
├── backo2@1.0.2
├── has-binary@0.1.7 (isarray@0.0.1)
├── debug@2.2.0 (ms@0.7.1)
├── socket.io-parser@2.2.5 (isarray@0.0.1, json3@3.3.2, component-emitter@1.1.2, benchmark@1.0.0)
├── parseuri@0.0.4 (better-assert@1.0.2)
└── engine.io-client@1.6.7 (yeast@0.1.2, component-inherit@0.0.3, has-cors@1.1.0, component-emitter@1.1.2, xmlhttprequest-ssl@1.5.1, parsejson@0.0.1, parseqs@0.0.2, ws@1.0.1, engine.io-parser@1.2.4)
damien@home:~/test$ webpack-dev-server --port 9000
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.12.11
Time: 19ms
webpack: bundle is now VALID.
http://localhost:9000/webpack-dev-server/
webpack result is served from /
content is served from /home/damien/test

image

Am I missing something here?

@darrachequesne
Copy link
Member

Oh! It seems sails.io.js@0.12.2 depends on socket.io-client@1.4.3 😀 : https://github.com/balderdashy/sails.io.js/blob/master/dependencies/socket.io.min.js#L1

Hence the issue.

cl1ck pushed a commit to cl1ck/webpack-hot-socket-server that referenced this issue Oct 27, 2016
@warent
Copy link

warent commented Oct 27, 2016

This seems vaguely related to request/request/issues/1529

@lingz
Copy link

lingz commented Feb 9, 2017

Also getting this with both the websocket and ws packages.

@realfresh
Copy link

Same, getting this error using ws

@zweifisch
Copy link

Socket.IO: 1.7.3
Webpack: 2.2.1
Module not found: Error: Can't resolve 'socket.io-client/package'

@dmytro-y-dev
Copy link

dmytro-y-dev commented Mar 7, 2017

@zweifisch, include json loader in your config to solve your problem.

Still I have "WARNING in ./~/engine.io/lib/server.js Critical dependency: the request of a dependency is an expression" and other similar to ones from people above.

I use Angular2. Maybe config will help:

const path = require('path');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const postcssUrl = require('postcss-url');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const { NoEmitOnErrorsPlugin, LoaderOptionsPlugin, WatchIgnorePlugin } = require('webpack');
const { BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack');
const { CommonsChunkPlugin } = require('webpack').optimize;
const { AotPlugin } = require('@ngtools/webpack');

const nodeModules = path.join(process.cwd(), 'node_modules');
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
const baseHref = undefined;
const deployUrl = undefined;

module.exports = {
  "devtool": "source-map",
  "resolve": {
    "extensions": [
      ".ts",
      ".js",
      ".json"
    ],
    "modules": [
      "./node_modules"
    ],
    "alias": {
      "config": "config/config.dev.js"
    }
  },
  "resolveLoader": {
    "modules": [
      "./node_modules"
    ]
  },
  "entry": {
    "main": [
      "./app/main.ts"
    ],
    "polyfills": [
      "./app/polyfills.ts"
    ],
    "styles": [
      "./dist/style.dev.css"
    ]
  },
  "output": {
    "path": path.join(process.cwd(), "dist/dev"),
    "filename": "[name].bundle.js",
    "sourceMapFilename": "[name].bundle.js.map",
    "chunkFilename": "[id].chunk.js"
  },
  "module": {
    "rules": [
      {
        "enforce": "pre",
        "test": /\.js$/,
        "loader": "source-map-loader",
        "exclude": [
          /\/node_modules\//
        ]
      },
      {
        "test": /\.json$/,
        "loader": "json-loader"
      },
      {
        "test": /\.html$/,
        "loader": "raw-loader"
      },
      {
        "test": /\.(eot|svg)$/,
        "loader": "file-loader?name=[name].[hash:20].[ext]"
      },
      {
        "test": /\.(jpg|png|gif|otf|ttf|woff|woff2|cur|ani)$/,
        "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
      },
      {
        "exclude": [
          path.join(process.cwd(), "dist/style.dev.css")
        ],
        "test": /\.css$/,
        "loaders": [
          "exports-loader?module.exports.toString()",
          "css-loader?{\"sourceMap\":true,\"importLoaders\":1}",
          "postcss-loader"
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "dist/style.dev.css")
        ],
        "test": /\.less$/,
        "loaders": [
          "exports-loader?module.exports.toString()",
          "css-loader?{\"sourceMap\":true,\"importLoaders\":1}",
          "postcss-loader",
          "less-loader"
        ]
      },
      {
        "include": [
          path.join(process.cwd(), "dist/style.dev.css")
        ],
        "test": /\.css$/,
        "loaders": ExtractTextPlugin.extract({
          "use": [
            "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", // Don't make sourceMap true, because it will break fonts loading
            "postcss-loader"
          ],
          "fallback": "style-loader",
          "publicPath": ""
        })
      },
      {
        "include": [
          path.join(process.cwd(), "dist/style.dev.css")
        ],
        "test": /\.less$/,
        "loaders": ExtractTextPlugin.extract({
          "use": [
            "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", // Don't make sourceMap true, because it will break fonts loading
            "postcss-loader",
            "less-loader"
          ],
          "fallback": "style-loader",
          "publicPath": ""
        })
      },
      {
        "test": /\.ts$/,
        "loader": "@ngtools/webpack"
      }
    ],
    /*noParse: [
        /\/ws\//,
        /socket\.io\/lib\/index\.js/
    ]*/
  },
  "plugins": [
    new NoEmitOnErrorsPlugin(),
    new ProgressPlugin(),
    new ProvidePlugin({
        $:"jquery",
        jQuery:"jquery"
    }),
    new HtmlWebpackPlugin({
      "template": "./index.html",
      "filename": "./index.html",
      "hash": false,
      "inject": true,
      "compile": true,
      "favicon": false,
      "minify": false,
      "cache": true,
      "showErrors": true,
      "chunks": "all",
      "excludeChunks": [],
      "title": "Webpack App",
      "xhtml": true,
      "chunksSortMode": function sort(left, right) {
        let leftIndex = entryPoints.indexOf(left.names[0]);
        let rightindex = entryPoints.indexOf(right.names[0]);
        if (leftIndex > rightindex) {
            return 1;
        }
        else if (leftIndex < rightindex) {
            return -1;
        }
        else {
            return 0;
        }
    }
    }),
    new BaseHrefWebpackPlugin({}),
    new CommonsChunkPlugin({
      "name": "inline",
      "minChunks": null
    }),
    new CommonsChunkPlugin({
      "name": "vendor",
      "minChunks": (module) => module.resource && module.resource.startsWith(nodeModules),
      "chunks": [
        "main"
      ]
    }),
    new ExtractTextPlugin({
      "filename": "[name].bundle.css",
      "disable": true
    }),
    new LoaderOptionsPlugin({
      "sourceMap": true,
      "options": {
        "postcss": [
          autoprefixer(),
          postcssUrl({"url": (URL) => {
            // Only convert absolute URLs, which CSS-Loader won't process into require().
            if (!URL.startsWith('/')) {
                return URL;
            }
            // Join together base-href, deploy-url and the original URL.
            // Also dedupe multiple slashes into single ones.
            return `/${baseHref || ''}/${deployUrl || ''}/${URL}`.replace(/\/\/+/g, '/');
        }})
        ],
        "lessLoader": {
          "sourceMap": true
        },
        "context": ""
      }
    }),
    new AotPlugin({
      "mainPath": "app/main.ts",
      "hostReplacementPaths": {},
      "exclude": [],
      "tsConfigPath": "tsconfig.json",
      "skipCodeGeneration": true
    }),
    new BundleAnalyzerPlugin({
      analyzerMode: "static",
      openAnalyzer: false,
      reportFilename: 'analyzer/report.html',
    }),
    new WatchIgnorePlugin([
      path.resolve(__dirname, './dist/dev/analyzer'),
      path.resolve(__dirname, './node_modules'),
    ])
  ],
  "node": {
    "fs": "empty",
    "global": true,
    "crypto": "empty",
    "tls": "empty",
    "net": "empty",
    "process": true,
    "module": false,
    "clearImmediate": false,
    "setImmediate": false
  }
};

@dmytro-y-dev
Copy link

dmytro-y-dev commented Mar 14, 2017

Warnings disappeared when I included

import * as io from "socket.io-client";

instead of

import * as io from "socket.io";

Still, I have behavior as in #1088. Minimal app with bug is in that issue thread.

Edit: Solved my issue. It wasn't because of socket.io.

@guirip
Copy link

guirip commented Mar 20, 2017

@metamaker Thanks so much 👍

@xmlking
Copy link

xmlking commented May 8, 2017

I am getting following error with later socket.io and webpack 2

Module not found: Error: Can't resolve 'socket.io-client/package' in 'xxx/server2/node_modules/socket.io/lib'
I have to change package --> package.json in socket.io lib/index.js source file to fix it.

var clientVersion = require('socket.io-client/package.json').version;

webpack.config.js

let path = require('path');
const { GlobCopyWebpackPlugin } = require('@angular/cli/plugins/webpack');

module.exports = {
  devtool: false,

  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, 'src')
    ],
    extensions: ['.ts', '.js'],
    alias: {
      // FIXME: Module not found: Error: Can't resolve 'socket.io-client/package' in '/Developer/Work/iot/hub/server2/node_modules/socket.io/lib'
      // "socket.io-client/package": "empty-module",
      "hiredis": "empty-module",
    }
  },

  target: 'node',

  resolveLoader: {
    modules: [
      'node_modules'
    ]
  },

  entry: {
    main: './src/index',
    vendor: [
      'nest.js',
      'rxjs'
    ]
  },

  output: {
    path: path.resolve(__dirname, './dist/build'),
    filename: '[name].server.bundle.js',
    chunkFilename: "[id].server.chunk.js"
  },

  module: {
    rules: [
      { test: /\.ts$/, use: 'ts-loader' },
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.html$/, loader: 'raw-loader' },
      { test: /\.(eot|svg)$/, loader: 'file-loader?name=[name].[hash:20].[ext]' },
      { test: /\.js.map/, loader: 'raw-loader' },
    ]
  },

  "plugins": [
    new GlobCopyWebpackPlugin({
      "patterns": [
        "config",
        "data"
      ],
      "globOptions": {
        "cwd": "./",
        "dot": true,
        "ignore": "**/.gitkeep"
      }
    }),
  ]
};

@darrachequesne
Copy link
Member

Please see the example here: https://github.com/socketio/socket.io/tree/master/examples/webpack-build

The right syntax should be import io from 'socket.io-client';

Also, the Can't resolve 'socket.io-client/package' error should be fixed by socketio/socket.io#2960.

Hope that helps! If not, please reopen an issue with an example reproducing the problem, thanks!

@crebuh
Copy link

crebuh commented Jul 24, 2017

@darrachequesne

when I'm trying to import with

import io from 'socket.io-client'

TS is telling me that the module has no default export

@kdw3lch
Copy link

kdw3lch commented Jul 27, 2017

@crebuh
Add types for typescript.
npm i @types/socket.io-client

@crebuh
Copy link

crebuh commented Jul 28, 2017

@kdw3lch

nope it is not working I already had types in version 1.4.29 and upgraded the socket.io-client from 1.7.3 to 2.0.3, still the same problem.

maybe my tsconfig.json is wrong, any ideas?

@kdw3lch
Copy link

kdw3lch commented Jul 28, 2017

@crebuh I should have read more carefully!
import * as io from 'socket.io-client'

@dewwwald
Copy link

dewwwald commented Aug 18, 2017

I am seeing this issue with webpack ^2.0.0 and no socket.io in package. When I run karma I am getting this.

Not sure where to go from here ITO debugging.

@rookiebulls
Copy link

adding socket.io-client to dependencies in my package.json fixed the problem for me

@pdarii
Copy link

pdarii commented Oct 27, 2017

I had the similar, issue when i made checkout of existing project.
I run npm -i, all dependency's were installed, but this error appears:

" Can't resolve 'engine.io-client' "

Was fixed by installing socket.io-client.

npm i socket.io-client

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests