winterNebs

"WebGL unsupported in this browser" when using webpack

Recommended Posts

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."

57986343-b3d42b00-7a41-11e9-8031-06d8cedbaf08.png

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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: 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.