"WebGL unsupported in this browser" when using webpack

[winterNebs]

Hi, so before I had an app that was working with browserify. After switching to webpack instead I got the error "Uncaught Error: WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support."

My project is running: Typescript 3.4.5, Pixi.js 5.0.2, Webpack 4.31.0

Here's a snippet of my Webpack.config.js, the Client section is the part of the code that uses pixi.js

/// <binding BeforeBuild='Run - Development' />
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
var pixiModule = path.join(__dirname, '/node_modules/pixi.js/')
const CleanWebpackPlugin = require('clean-webpack-plugin');


module.exports = [
    // Server
    {
        mode: "development",
        devtool: "inline-source-map",
        entry: "./app.ts",
        output: {
            filename: "./app.js"
        },
        target: 'node',
        node: {
            __dirname: false,
            __filename: false,
        },
        resolve: {
            // Add `.ts` and `.tsx` as a resolvable extension.
            extensions: [".ts", ".tsx", ".js"]
        },
        module: {
            rules: [
                // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
                { test: /\.tsx?$/, loader: "ts-loader" }
            ]
        },
        plugins: [
            new CleanWebpackPlugin()
        ]
    },

    // Client
    {
        mode: "development",
        devtool: "inline-source-map",
        entry: "./public/typescripts/entry.ts",
        output: {
            library: "ASC",
            filename: "public/client.js"
        },
        target: 'web',
        resolve: {
            // Add `.ts` and `.tsx` as a resolvable extension.
            alias: {
                'PIXI': pixiModule,
            },
            extensions: [".ts", ".tsx", ".js"]
        },
        module: {
            rules: [
                // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
                { test: /\.tsx?$/, loader: "ts-loader" },
                { test: /\.json$/, include: path.join(__dirname, 'node_modules', 'pixi.js'), loader: 'json-loader' },
                //We expose the non minified pixi file as a global. The minified one was not working with our solution
                { test: pixiModule, loader: 'expose-loader?pixi' }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                filename: 'public/index.html',
                template: 'public/index.html',
                inject: false
            }),
            new HtmlWebpackPlugin({
                filename: 'public/game.html',
                template: 'public/game.html',
                inject: false
            })
        ]
    }
];

 

 

If anyone could point me in the right direction it would be much appreciated! I'm pretty new to the javascript ecosystem so I'm not really sure if this is a pixi.js issue or a webpack issue.

 

Thanks!

[themoonrat]

This has nothing to do with the way you are bundling your code... it's just that your device, for whatever reason, does not support WebGL.

v4 has a 'Canvas' renderer as a fallback option built in by default, but the default v5 package does not have this; you need to use the 'legacy' package instead.

[winterNebs]

Just now, themoonrat said:

This has nothing to do with the way you are bundling your code... it's just that your device, for whatever reason, does not support WebGL.

v4 has a 'Canvas' renderer as a fallback option built in by default, but the default v5 package does not have this; you need to use the 'legacy' package instead.

Thanks for the reply, but I don't think that's the case.

 

The device I'm running it on is Chrome 74 on a windows 10 desktop. It works perfectly fine when I used browserify, but not when I webpack it. 

[spacerex]

I have a feeling that WebGL is not enabled and browserify falls back to using pixi v4. But Pixi v5 does not support browsers without WebGL, and you have to use legacy package.

When using browserify, you type PIXI.VERSION in that chrome console to check the PIXI version. 

Here is some info on how to enable WebGL: https://superuser.com/questions/836832/how-can-i-enable-webgl-in-my-browser

[iamsam]

I'm having a similar issue. Edge is saying it doesn't support WebGL. Using THREE.js in the same project with no errors and WebGL test page works fine. None of the PIXI demos work.

Also using Webpack.

[ivan.popelyshev]

@iamsam We discussed it here: https://github.com/pixijs/pixi.js/issues/5694 . PixiJS team is not sure whether to add extra package to support stuff webgl without stencil, because there can be something else wrong on that kind of drivers. Graphics masks wont work without stencil, we have to add code that swaps them to alpha sprite masks.

I think we can actually do that , but only after we solve some of other issues, I'm getting dogpiled by them.

[botmaster]

I use webpack differently, I pack all dependencies (including pixi) separately from the main app, my page is then loading dependencies first then the app. This works very nicely. I did run into all kind of problem trying to pack everything into one file.

[8Observer8]

On 5/20/2019 at 3:06 AM, winterNebs said:

before I had an app that was working with browserify.

I want to use Browserify with Pixi.js v5, because I want to create a lot of examples for learning and I do not want to use Webpack (Gulp, Grant and so on) because they require a lot of disk space on my laptop. I use TypeScript too. Could you give me a simple project in the archive with a few TypeScript files that allows me to create a bundle for Browser? Please, answer in my theme: 

 

[botmaster]

None of those require a lot of disc space especially compared to Browserify, where did you get that false information?

[ivan.popelyshev]

@botmaster its being discussed in another thread.