How to yarn/npm link pixi.js into a webpack

This is not a bug request as such but is for anyone else who ends up searching the issues for a solution to this.

When you yarn link or npm link pixi.js into a webpack built application you will likely come across the error:

Cannot read property ‘start’ of undefined

This is because of the way node_modules are handled in the monorepo. Where each package contains a node_modules folder which symlinks to the other packages in the monorepo it requires. Because each package ends up with its own symlink webpack loads each import for each module again (depending on your webpack symlink following rules).

The simplest solution I found to this is adding the following resolve.alias config to webpack:

{ '@pixi': 'pixi.js/node_modules/@pixi' }

This tells webpack to route any @pixi/* import to the node_modules in bundles/pixi.js which contains all the dependencies except @pixi/jsdoc-template so if you need that you will need to add another rule for that.

Note: This could be resolved in pixi.js by using yarn workspaces to manage the pixi.js monorepo which hoist monorepo imports to top level node_modules to prevent this.

[ShukantPal]

@bigtimebuddy I didn’t see this problem per say. My local template’s Webpack config is:

const HtmlWebPackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                    },
                ],
            },
            {
                test: /\.jpeg$/,
                use: {
                    loader: 'file-loader',
                },
            },
        ],
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html',
        }),
        new CopyWebpackPlugin([{
            from: './src/assets', to: './assets',
        }]),
    ],
    watchOptions: {
        aggregateTimeout: 300,
        ignored: ['/node_modules/(?!pixi.js)/'],
    },
};

I don’t see anything special here.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.