Webpack - Uncaught TypeError: fs.readFileSync is not a function

[supermrji]

Webpack.config.js

node: {
    fs: "empty"
},
module: {
    loaders: [{
        test: /\.json$/,
        include: path.join(__dirname, 'node_modules', 'pixi.js'),
        loader: 'json'
    }, {
        test: /\.js$/,
        exclude: path.join(__dirname, 'node_modules'),
        loader: 'babel'
    }, {
        test: /\.png$|\.jpe?g$|\.gif$|img\/.*\.svg$/,
        loader: 'file?name=' + opts.img
    }],
    noParse: /\.min\.js/
},

It's show Uncaught TypeError: fs.readFileSync is not a function

If I remove

node: {
    fs: "empty"
}

It goes Uncaught Error: Cannot find module "fs"

in my main script main.js

import PIXI from 'pixi.js'; // use ES6 width Babel   from npm  pixi.js

I found it when use new PIXI.filters.BlurFilter()

but if i use https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.min.js" cdn link
It's all ok .

Does any option for Wepack need to set ?

[englercj]

Duplicate of #1854?

[supermrji]

It's similar , but now the problem is why set
require('pixi.js')

node: {
    fs: "empty"
}

It all work fine , but don't like #1854 , it shows Uncaught TypeError: fs.readFileSync is not a function in some function like BlurFilter

In addition ,

loaders: [{
    test: /\.json$/,
    include: path.join(__dirname, 'node_modules', 'pixi.js'),
    loader: 'json'
}

If I remove include: path.join(__dirname, 'node_modules', 'pixi.js'),
pixi still work .

but same issue Uncaught TypeError: fs.readFileSync is not a function

[englercj]

I don't know anything about webpack. You need to have a transform that resolves the readFileSyncs into the actual strings of the file like the browserify transform does.

[ThomasDeutsch]

Here is my working webpack.config:

var webpack = require("webpack");

var path = require("path");

var config = {
    target: "web",
    debug: true,
    devtool: "source-map",
    entry: {
        main: "./source/scripts/main"
    },
    output: {
        path: "./build",
        filename: "[name].bundle.js",
        chunkFilename: "[id].bundle.js"
    },
    node: {  // this is for pixi.js 
        fs: "empty"
    },
    resolve: {
        modulesDirectories: ['web_modules', 'bower_components', 'node_modules']
    },
    module: {
        loaders: [
            { test: /\.css/, loader: "style-loader!css-loader" },
            { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
            { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel?optional[]=runtime&stage=0'},
            { test: /\.png/, loader: "url-loader?limit=100000&mimetype=image/png" },
            { test: /\.gif/, loader: "url-loader?limit=100000&mimetype=image/gif" },
            { test: /\.jpg/, loader: "file-loader" },
            { test: /\.json/, loader: "json-loader" },
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
        ]
    },
    plugins: [
        //new webpack.optimize.UglifyJsPlugin(),
        //new webpack.optimize.DedupePlugin(),
        new webpack.DefinePlugin({
            __DEV__: true
        })
    ]
};
module.exports = config;

[englercj]

CLosing as solved.

[davydka]

This is the most direct and simple example of configuring webpack with PIXI that I found.

https://gist.github.com/mjackson/ecd3914ebee934f4daf4

[jamesplease]

I recommend updating the main field of package.json to reference the built files in bin. This is a library that most folks are going to use on the client. It seems a little odd that it wouldn't interop with any and all popular build tools out of the box.

Many (most?) other popular client-side libs reference the built files in package.json to prevent problemos like this.

[englercj]

It works with browserify out of the box, as well as webpack with the proper config. Webpack themselves recommend that you do not point to the built file, but instead to the source and configure the proper transforms.

Likely in the future we will try to use more "webpack-friendly" transforms, or include the config necessary in our package json so you don't have to write it (like we do for browserify). But saying it doesn't work with popular builders out of the box is just not true at all, webpack is the only one you need a bit of config to get working.

[quinn]

@supermrji it doesn't work out of the box with webpack.

[aasten]

Cannot understand, how this issue was solved finally? Got same problem when trying to use soap from within react application.

[Crawler158]

@aasten I´ve the same problem with soap and VUE-CLI ... do you have solved it?

[aasten]

@Crawler158 no, sorry.

[alexisdiel]

nothing?

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.