support for webpack

[ericwooley]

I can't get this going for the life of me in webpack. It keeps trying to load in fs, and something called dgram. I had to resort to importing the prebuilt minified version, which is not ideal.

Here is my webpack config

var HtmlWebpackPlugin = require('html-webpack-plugin')
var autoprefixer      = require('autoprefixer-core');
var csswring          = require('csswring');
var webpack           = require('webpack');
var path              = require('path');
var fs                = require('fs');

var config = {
  target: 'web',
  entry: ['webpack/hot/dev-server', './src/scripts/app.js'],
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[hash].js',
    publicPath: '/'
  },
  eslint: {
    reporter: require("eslint-friendly-formatter"),
    // reporter: require("eslint/lib/formatters/stylish")
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel', 'eslint'],
      exclude: /node_modules/
    }, {
      test: /\.scss$/,
      loader: 'style!css!postcss!sass'
    }, {
      test: /\.woff$|\.ttf$|\.wav$|\.mp3$/,
      loader: 'file'
    }, {
      test: /\.jpe?g$|\.gif$|\.png$|\.svg$/,
      loaders: [
        'url?limit=8192&hash=sha512&digest=hex&name=[hash].[ext]',
        'image?bypassOnDebug&optimizationLevel=7&interlaced=false'
      ]
    }, {
      test: /\.json$/,
      loader: 'json'
    },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/template_index.html'
    })
  ],
  postcss: [autoprefixer, csswring],
  devtool: 'eval',
  devtool: 'sourcemap'
};

module.exports = config;

[feross]

I prefer browserify and don't have experience with webpack. That said, you should look into getting webpack to support the "browser" field in package.json. It's an ad-hoc standard.

WebTorrent uses this field to tell packaging tools to ignore or replace certain modules when packaging for the browser. Obviously fs, net (tcp) and dgram (udp) don't make sense in the browser. :)

Here's an issue discussing how to get webpack to behave correctly: webpack/webpack#151

[feross]

As far as I can tell, this issue can be resolved by following the instructions to enable the "browser" field in webpack that are described here: webpack/webpack#151 (comment) so I'm going to close this issue.

If this is not the case, feel free to open a new issue or comment here and I'll re-open this issue.

[yousefamar]

@ericwooley Did you manage to make it work with webpack in the end?

[ericwooley]

@Paraknight I ended up importing the prebuilt version, which webpack can do fine, but it spits out a warning at you. Something along the lines of:

import Webtorrent from 'webtorrent/webtorrent.min'

[chovy]

client is undefined when I do:

import WebTorrent from 'webtorrent/webtorrent.min`
const client = new WebTorrent()

[feross]

@chovy Can you see if window.WebTorrent is getting defined? Maybe when you import this way, the normal UMD code gets confused and thinks there's no module environment.

[mitra42]

Has anyone got this to work?
The webpack/webpack#151 (comment) points at https://webpack.js.org/configuration/resolve/#resolve-mainfields but this suggests how to specify your main file for a browser, BUT not how to use that to get webtorrent to not load fs.

For libsodium the fix was to add "browser": { "fs": false }, into package.json, but that doesnt work for webtorrent and the documentation linked to above is unclear to me whether there is a fix needed to webtorrent, or to the webpack config or somewhere else. and what that fix is.

[Chocobozzz]

@mitra42 Yes, WebTorrent works in our webpack setup. Check the configuration: https://github.com/Chocobozzz/PeerTube/blob/develop/client/webpack/webpack.video-embed.js

You need to set 'empty' to fs in the webpack config: https://github.com/Chocobozzz/PeerTube/blob/develop/client/webpack/webpack.video-embed.js#L141

[mitra42]

Thanks - looks like that did it, I was following some other docs which suggested you wanted.

browser: { "fs": false } 

in the module itself.

I was interpreting "node" to mean compile for node, not fake something to look like node :-)