Socket.io: Fehler beim Erstellen für WebPack

Ich bin mir auch nicht sicher, wie ich die socket.io-Client-Bibliothek zu meiner clientseitigen App hinzufügen soll, um eine Verbindung zum Server herzustellen.

Ich versuche es so zu fordern:

var io = require("socket.io-client");

var socket = io("http://localhost:3000");
socket.on("data", function(data) {
    console.log("data event", data);
});

... und ich bekomme diesen Fehler: TypeError: undefined is not an object (evaluating 'global.WebSocket') für eine anonyme Funktion.

Ich bin hauptsächlich ein Back-End-Typ, daher ist clientseitiges Javascript nicht meine Stärke.

Update: require("socket.io-client/socket.io") scheint funktioniert zu haben, aber mit einer Warnung, die darauf hindeutet, was oben erwähnt wurde: This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.

@johnelliott : Führen Sie einfach require("socket.io-client") aus, Webpack findet die richtige Quelle über den Eintrag package.json. Die Warnung kommt, weil diese Datei gepackt ist, um über ein <script> -Tag geladen zu werden.

Nö.

Der Grund, warum es bei mir nicht funktionierte, war, dass ich ein Plugin zum Auflösen von Bower-Modulen verwendete, das bei verschachtelten require () nicht ganz gut funktionierte. Also habe ich diesen Faktor geändert.

Wenn Sie ein Plugin namens so etwas wie „bower-webpack-plugin“ oder ähnliches verwendet haben, entleeren Sie es. die eigentliche lösung ist folgende:

var bowerProvider = neues webpack.ResolverPlugin([
neues webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"]),
neues webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(.bower.json", ["main"])
], ["normal", "loader"]);

Es sieht total umständlich aus, stimmte zu. Aber wenn Sie es ein paar Mal lesen, werden Sie feststellen, dass es die Art und Weise ändert, wie Module aufgelöst werden und daher erforderlich sind.

Wenn das immer noch nicht funktioniert, könnten Sie einen Modul-Alias ​​verwenden.

Innerhalb des Clients wird die Debug-Bibliothek wie folgt geladen:

var debug = require(„debug“)(…); // entschuldigen Sie das Zitieren, mein E-Mail-Client ist scheiße.

Sie können also einen Modul-Alias ​​in Ihrer webpack.config.js hinzufügen:

// Fügen Sie den Alias-Abschnitt zum Auflösungsabschnitt der Konfiguration hinzu.
module.exports = {
beschließen: {
alias: {
// Kompatibilität zum ursprünglichen Bootstrap sicherstellen
"debug$": path.join("node_modules","debug","index.js")
}
}
};

Wenn das immer noch nicht funktioniert, lass es mich wissen. :)

Verwenden Sie babel ?

Ich war nicht. Ich bin zwischenzeitlich auf SocketCluster umgestiegen, da das funktioniert hat.

also ist die beste lösung?

import IO from 'socket.io-client'

sollte gut mit webpack + babel funktionieren

Als ich es benutzte, hatte ich, glaube ich, direkt nach der index.js-Datei gerufen. Aber es ist schon eine Weile her ... also kann ich mir nicht sicher sein.

Denke das könnte geschlossen werden.

Ich erhalte diesen Fehler immer noch, ich denke nicht, dass dies jetzt noch geschlossen werden sollte.

Ich habe dies behoben, indem ich socket.io-client von npm deinstalliert und über Bower installiert habe

Ich habe das gleiche Problem. Bower benutze ich nicht. Gibt es eine andere Art und Weise?

Sie können einen Alias ​​in Ihrer Webpack-Konfiguration verwenden.
Oder die SIO-Entwickler finden eine bessere Lösung.

Ich bin beim Update auf das gleiche Problem gestoßen
npm 3.3.9 webpack 1.12.13 socket.io-client 1.4.5

Lösen Sie dies durch Hinzufügen

    resolve: {
        alias: {
            'socket.io-client': path.join( nodeRoot, 'socket.io-client', 'socket.io.js' )
        }
    },
    module: {
        noParse: [ /socket.io-client/ ]
    }

Hat jemand eine bessere Lösung?

@faller was setzen wir für node root? wie im öffentlichen Verzeichnis oder ist das etwas aus einer HTML-Datei?
Meine schlechte Frage, wenn es eine schlechte Frage ist, habe noch nie etwas davon benutzt.

@kennetpostigo var nodeRoot = path.join( __dirname, 'node_modules' ),

Ich habe eine Menge Fehler bekommen, aber die Verwendung require('socket.io/lib/socket.js') hat es gelöst, aber jetzt bekomme ich einen neuen Fehler

der Anrufcode
var socket = require('socket.io/lib/socket.js')('http://appdev:3000');

Ich bekam auch den gleichen Fehler. Ich glaube, ich habe es geschafft zu erkennen, was passiert.
Webpack löst _nur_ require auf, nicht require.resolve. Ich denke, das Problem ist folgendes, da es in der Datei _lib/index.js_ wie folgt verwendet wird:

var clientSource = read(require.resolve('socket.io-client/socket.io.js'), 'utf-8');

Dies ist ein Problem für Webpack, da es mit dieser Direktive nicht arbeiten soll, wie hier zu sehen ist.
Als ich das verstanden hatte, sah ich, dass die oben erwähnte Codezeile nur für eine Funktion nützlich ist, die eine Anfrage verarbeitet, die /socket.io.js bedient.
Da diese Funktionalität für meine Anwendung völlig nutzlos war (ich verwende nur require('modulename') ), habe ich sowohl die obige Zeile als auch die gesamte Funktion serve in der Datei _lib/index.js_ kommentiert. Jetzt funktioniert es wie eine Charme.
Ich weiß nicht, ob dies als Fehler angesehen werden muss oder nicht, aber es hat einige Zeit gedauert, bis ich wirklich verstanden habe, was los war und wie es behoben werden konnte.

Ich bekomme auch eine Reihe von Socket.io-Webpack-Build-Problemen.

ERROR in ./~/socket.io/lib/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/mkozachek/development/webserver_development/node_modules/socket.io-client/socket.io.js in /Users/mkozachek/development/webserver_development/node_modules/socket.io/lib
 @ ./~/socket.io/lib/index.js 9:13-40


ERROR in ./~/socket.io/lib/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/mkozachek/development/webserver_development/node_modules/socket.io-client/socket.io.js/package in /Users/mkozachek/development/webserver_development/node_modules/socket.io/lib
 @ ./~/socket.io/lib/index.js 10:20-55

ERROR in ./~/socket.io/lib/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/mkozachek/development/webserver_development/node_modules/socket.io-client/socket.io.js/dist/socket.io.min.js in /Users/mkozachek/development/webserver_development/node_modules/socket.io/lib
 @ ./~/socket.io/lib/index.js 101:24-81

Ich habe meine Webpack-Konfiguration so geändert, dass sie enthalten ist
resolve: { alias: { 'socket.io-client': path.join( __dirname, 'node_modules', 'socket.io-client', 'socket.io.js' ) } }, , noparse auf dem Client und Ziel: 'node'.

Hier scheint es mehrere verschiedene Probleme zu geben. Es scheint, dass ich sowohl den Client als auch den Server hier bündeln konnte. Kann jemand dieses Beispiel bitte überprüfen?

Ich habe diesen Fehler mit Webpack 2.2 und socket.io-client 1.7.2 erhalten. Ich habe so ziemlich alles ausprobiert, was hier aufgeführt ist, und nichts hat funktioniert. Schließlich stoppte ich die Fehler, indem ich das Debug-Modul in node_modules, npm i debug -S , installierte und „debug“ als extern in meiner Webpack-Konfiguration auflistete, externals: ['debug'], .

Geschlossen von https://github.com/socketio/socket.io/pull/2828.

Hallo, ich möchte dieses Problem erneut öffnen, da es für den socket.io-Client wie ein Zauber funktioniert, aber nicht für den Server!

Daher kann ich meinen NodeJS-Server nicht mit socket.io mit Webpack bündeln! Ich muss socket.io zusammen mit den wenigen Bibliotheken, die nicht funktionieren (einschließlich Webpack selbst), in die "Externals" von Webpack einfügen.

Sehen Sie sich diese verwandten Probleme in Webpack und Yargs an:

https://github.com/webpack/webpack/issues/1434
https://github.com/yargs/yargs/issues/312

@rgranger Dies ist ein Beispiel für die Verwendung webpack und socket.io für den Server:

Paket.json

{
  "name": "whatever",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "John Doe",
  "license": "ISC",
  "dependencies": {
    "brfs": "^1.4.3",
    "bufferutil": "^3.0.0",
    "socket.io": "^1.7.3",
    "transform-loader": "^0.2.4",
    "utf-8-validate": "^3.0.1"
  },
  "devDependencies": {
    "json-loader": "^0.5.4",
    "null-loader": "^0.1.1",
    "webpack": "^2.4.1"
  }
}

webpack.config.js

const path    = require("path");

module.exports = {
  entry: './server.js',
  target: 'node',
  output: {
    path: __dirname,
    filename: 'bundle.server.js'
  },
  module: {
    loaders: [
      {
        test: /(\.md|\.map)$/,
        loader: 'null-loader'
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.js$/,
        exclude: '/node_modules/',
        loader: "transform-loader?brfs"
      }
    ]
  }
};

server.js

const server = require('http').createServer();
const io = require('socket.io')(server, {
  // serveClient: false // do not serve the client file, in that case the brfs loader is not needed
});
const port = process.env.PORT || 3000;

io.on('connect', onConnect);
server.listen(port, () => console.log('server listening on port ' + port));

function onConnect(socket){
  console.log('connect ' + socket.id);

  socket.on('disconnect', () => console.log('disconnect ' + socket.id));
}

Ein Beispiel-Webpack-Build für den Server: https://github.com/socketio/socket.io/tree/master/examples/webpack-build-server

Vielen Dank @Arbaoui-Mehdi, der Schlüssel, um dies zu beheben, besteht darin, die Bereitstellung des Clients socket.js zu deaktivieren.

@freemh du rettest mein Leben Bruder

Bei der Verwendung von Webpack v3 habe ich es gerade getan
npm install --save-dev uglifyjs-webpack-plugin@1
Verwenden Sie dann einfach UglifyJsPlugin(...) anstelle von webpack.optimize.UglifyJsPlugin({...})
Beachten Sie, dass sich die Optionen ändern. Sie müssen uglifyOptions innerhalb des Objekts hinzufügen.

Ref: https://github.com/webpack-contrib/uglifyjs-webpack-plugin