Getting "Cannot Find Module" Error Using new Webpack PostProcessor

[jljorgenson18]

Issue description or question

I am attempting to use the new Wallaby postprocessor and I'm running into a problem. I'm getting the following error when trying start wallaby.

[Error] Runtime error: Uncaught Error: Cannot find module 49. 
[Error] at http://localhost:53472/____wallaby-webpack.js?1566525199723:24 
[Error] Runtime error: Uncaught Error: Cannot find module 49. 
[Error] at http://localhost:53472/____wallaby-webpack.js?1566525199723:24 
[Error] Runtime error: Uncaught Error: Cannot find module 49. 
[Error] at http://localhost:53472/____wallaby-webpack.js?1566525199723:24 
[Error] Runtime error: Uncaught Error: Cannot find module 49. 
[Error] at http://localhost:53472/____wallaby-webpack.js?1566525199723:24 
[Error] Runtime error: Uncaught Error: Cannot find module 49. 
[Error] at http://localhost:53472/____wallaby-webpack.js?1566525199723:24 

I can see that React starts executing from the script tag but it never starts executing the main bundle. I ended up logging window.__moduleBundler.modules in the setup file and I could see all of the indices but 49 was just missing entirely.

Wallaby.js configuration file

const path = require('path');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');

const getWallabyWebpackConfig = () => {
    const wallabyWebpackConfig = {
        ...webpackConfig,
        devtool: undefined,
        // This helps speed up the build so we don't add these files to the bundle each time
        externals: {
            // Use external version of React and ReactDOM
            react: 'React',
            'react-dom': 'ReactDOM',
            yjs: 'Y',
            'en-y-websockets-client': 'yWebsocketsClient',
            chai: 'chai',
            sinon: 'sinon'
        }
    };
    delete wallabyWebpackConfig.entry;
    delete wallabyWebpackConfig.watchOptions;
    delete wallabyWebpackConfig.output;
    delete wallabyWebpackConfig.optimization;
    const allowedPlugins = {
        ProvidePlugin: true,
        DefinePlugin: true,
        IgnorePlugin: true
    };
    wallabyWebpackConfig.plugins = wallabyWebpackConfig.plugins.filter(
        plugin => allowedPlugins[plugin.constructor.name]
    );
    wallabyWebpackConfig.plugins.push(new webpack.NormalModuleReplacementPlugin(/\.svg$/, 'node-noop'));
    wallabyWebpackConfig.resolve.alias.tests = path.join(__dirname, 'tests');
    return wallabyWebpackConfig;
};

module.exports = wallaby => {
    return {
        files: [
            // Files we want loaded via script tag for performance reasons
            { pattern: 'node_modules/react/umd/react.development.js', instrument: false },
            { pattern: 'node_modules/react-dom/umd/react-dom.development.js', instrument: false },
            { pattern: 'node_modules/yjs/y.js', instrument: false },
            { pattern: 'node_modules/en-y-websockets-client/y-websockets-client.js', instrument: false },
            { pattern: 'node_modules/chai/chai.js', instrument: false },
            { pattern: 'node_modules/sinon/pkg/sinon-no-sourcemaps.js', instrument: false },
            // Files we don't want to instrument because of parsing issues
            { pattern: 'src/apps/uno/realtime/realtime.js', instrument: false, load: false },
            { pattern: 'src/apps/uno/realtime/hooks/magicdrawinghook.js', instrument: false, load: false },
            // Extra stuff
            { pattern: 'images/**/*', instrument: false, load: false, binary: true },
            { pattern: '*.config.js', instrument: false, load: false },
            { pattern: '.browserslistrc', instrument: false, load: false },
            // Test Files
            { pattern: 'tests/auxiliary/**/*', instrument: true, load: false },
            { pattern: 'tests/resources/**/*', instrument: true, load: false },
            { pattern: 'tests/qa/resources/**/*', instrument: false, load: false, binary: true },
            { pattern: 'tests/images/**/*', instrument: true, load: false, binary: true },
            { pattern: 'tests/setup.ts', instrument: true, load: false },
            { pattern: 'tests/wallabySetup.js', instrument: true, load: false },
            // Primary Code
            { pattern: 'src/**/*', instrument: true, load: false }
        ],

        tests: [
            { pattern: 'tests/unit/**/*', load: false },
            { pattern: 'tests/sys/peso/**/*', load: false },
            { pattern: 'tests/sys/uno/plaintext.spec.js', load: false },
            { pattern: 'tests/qa/peso/**/*', load: false }
        ],
        testFramework: 'mocha',

        env: { kind: 'chrome' },

        postprocessor: wallaby.postprocessors.webpack(getWallabyWebpackConfig(), {
            setupFiles: ['tests/wallabySetup.js']
        }),

        debug: false,

        setup() {
            mocha.setup({ timeout: 20000 });
            EN.listenTo('ready', () => window.__moduleBundler.loadTests());
        }
    };
};

And the Webpack module rules (skipping the rest of the config since there is a lot of fluff that doesn't run during the tests)

   module: {
        rules: [
            {
                test: /\.worker\.js$/,
                use: {
                    loader: 'worker-loader',
                    options: { inline: true, fallback: false }
                }
            },
            {
                test: /\.(j|t)sx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    cacheDirectory: true
                }
            },
            {
                test: path.resolve(__dirname, './lib/closure/goog/base.js'),
                loaders: [
                    'imports-loader?this=>window&googOverwrite=../../../src/apps/uno/googOverwrite&goog=>this.goog',
                    'exports-loader?goog'
                ]
            },
            {
                test: /\.js$/,
                loader: 'closure-loader',
                include: [path.join(__dirname, './src/apps/uno'), path.join(__dirname, './lib/closure/')],
                exclude: [
                    // We use joins here so we can add the trailing slashes
                    path.join(__dirname, './src/apps/uno/components/'),
                    path.join(__dirname, './src/apps/uno/index.js'),
                    path.join(__dirname, './lib/closure/goog/base.js')
                ],
                options: {
                    paths: [path.join(__dirname, './src'), path.join(__dirname, './lib/closure/')],
                    es6mode: true,
                    watch: isDev,
                    fileExt: '.js'
                }
            },
            {
                test: /.less$/,
                oneOf: [
                    {
                        resourceQuery: /module/,
                        use: moduleLessLoaders
                    },
                    {
                        use: globalLessLoaders
                    }
                ]
            },
            {
                test: /.s?css$/,
                oneOf: [
                    {
                        resourceQuery: /module/,
                        use: moduleSassLoaders
                    },
                    {
                        use: globalSassLoaders
                    }
                ]
            },
            {
                test: /\.svg$/,
                oneOf: [
                    {
                        resourceQuery: /url/,
                        use: urlLoaderCfg
                    },
                    {
                        // Let's not use svg sprite loader if we are requesting it from a style file
                        // because it is janky and does awkward extraction
                        issuer: {
                            not: [/.s?css$/, /.less$/]
                        },
                        use: {
                            loader: 'svg-sprite-loader',
                            options: {
                                symbolId: `${isDev ? '[name]_' : ''}[hash:base64:5]`
                            }
                        }
                    },
                    {
                        use: urlLoaderCfg
                    }
                ]
            },
            {
                test: /\.(jpe?g|png|gif|pdf|enex)$/,
                use: urlLoaderCfg
            }
        ]
    }

We also have these plugins running during tests

        new webpack.ProvidePlugin({
            goog: path.resolve(__dirname, './lib/closure/goog/base.js')
        }),
        new webpack.IgnorePlugin({
            resourceRegExp: /crypto$/,
            contextRegExp: /crypt\/lib$/
        }),

Please let me know if I can provide any further information. I skipped a few of the style loaders since they are defined at the top of the Webpack file but I can share those configs if you need it.

Code editor or IDE name and version

Visual Studio Code v1.37.1

OS name and version

OSX

[NikGovorov]

Hi @jljorgenson18,

Could you please force the latest Wallaby core update and check if it's the issue still exists? If it does, please change debug setting to true in wallaby.js file and paste the output of Wallaby,js Console pane here.

[jljorgenson18]

Just upgraded to v1.0.725 and it's the same error. The debug logs are gigantic and they show a little too much information, but all of the logs basically boil down to these snippets for each file

[Info]  2019-08-23T03:58:13.382Z wallaby:fs File added: src/apps/peso/components/preview/ic-prev.svg

[Info]  2019-08-23T03:59:17.292Z wallaby:postprocessor Processing /Users/jessejorgenson/projects/uno/node_modules/react-json-tree/lib/JSONArrow.js (module id 2660).
[Info]  2019-08-23T03:59:17.292Z wallaby:postprocessor Processing /Users/jessejorgenson/projects/uno/node_modules/babel-runtime/node_modules/core-js/library/modules/_object-create.js (module id 2597).

And

[Info]  2019-08-23T03:59:21.320Z wallaby:middleware Preparing to serve /tests/unit/apps/peso/utils/string.js.wbp.js
[Info]  2019-08-23T03:59:21.320Z wallaby:middleware Serving /tests/unit/apps/peso/utils/string.js.wbp.js from cache

And then this error pops up

[Info]  2019-08-23T03:59:21.372Z wallaby:middleware Serving /node_modules/chai/chai.js from disk (alt. location)
[Info]  2019-08-23T03:59:21.372Z wallaby:middleware Serving /node_modules/yjs/y.js from disk (alt. location)
[Info]  2019-08-23T03:59:21.381Z wallaby:middleware Preparing to serve /node_modules/chai/chai.js
[Info]  2019-08-23T03:59:21.381Z wallaby:middleware Serving /node_modules/chai/chai.js from disk
[Info]  2019-08-23T03:59:21.382Z wallaby:middleware Serving /node_modules/chai/chai.js from disk (alt. location)
[Info]  console.info: '%cDownload the React DevTools for a better development experience: https://fb.me/react-devtools'
[Info]  console.info: '%cDownload the React DevTools for a better development experience: https://fb.me/react-devtools'
[Info]  console.info: '%cDownload the React DevTools for a better development experience: https://fb.me/react-devtools'
[Info]  console.info: '%cDownload the React DevTools for a better development experience: https://fb.me/react-devtools'
[Info]  console.info: '%cDownload the React DevTools for a better development experience: https://fb.me/react-devtools'
[Info]  console.info: '%cDownload the React DevTools for a better development experience: https://fb.me/react-devtools'
[Info]  console.info: '%cDownload the React DevTools for a better development experience: https://fb.me/react-devtools'
[Info]  console.info: '%cDownload the React DevTools for a better development experience: https://fb.me/react-devtools'
[Info]  console.info: '%cDownload the React DevTools for a better development experience: https://fb.me/react-devtools'
[Info]  console.info: '%cDownload the React DevTools for a better development experience: https://fb.me/react-devtools'
[Info]  2019-08-23T03:59:24.337Z wallaby:workers Sandbox (active) [23d4a] error: Uncaught Error: Cannot find module 49.
[Error] Runtime error: Uncaught Error: Cannot find module 49. 
[Error] at http://localhost:54337/____wallaby-webpack.js?1566532759099:24 
[Info]  2019-08-23T03:59:24.341Z wallaby:workers Failed to map the stack to user code, entry message: Uncaught Error: Cannot find module 49., stack: Uncaught Error: Cannot find module 49.
[Info]  at http://localhost:54337/____wallaby-webpack.js?1566532759099:24
[Info]  2019-08-23T03:59:24.341Z wallaby:workers Sandbox (active) [ua9we] error: Uncaught Error: Cannot find module 49.
[Error] Runtime error: Uncaught Error: Cannot find module 49. 
[Error] at http://localhost:54337/____wallaby-webpack.js?1566532759099:24 
[Info]  2019-08-23T03:59:24.341Z wallaby:workers Failed to map the stack to user code, entry message: Uncaught Error: Cannot find module 49., stack: Uncaught Error: Cannot find module 49.
[Info]  at http://localhost:54337/____wallaby-webpack.js?1566532759099:24
[Info]  2019-08-23T03:59:24.342Z wallaby:workers Sandbox (active) [eeshn] error: Uncaught Error: Cannot find module 49.
[Error] Runtime error: Uncaught Error: Cannot find module 49. 
[Error] at http://localhost:54337/____wallaby-webpack.js?1566532759099:24 
[Info]  2019-08-23T03:59:24.342Z wallaby:workers Failed to map the stack to user code, entry message: Uncaught Error: Cannot find module 49., stack: Uncaught Error: Cannot find module 49.
[Info]  at http://localhost:54337/____wallaby-webpack.js?1566532759099:24
[Info]  2019-08-23T03:59:24.342Z wallaby:workers Sandbox (active) [p2p6x] error: Uncaught Error: Cannot find module 49.
[Info]  2019-08-23T03:59:24.342Z wallaby:workers Failed to map the stack to user code, entry message: Uncaught Error: Cannot find module 49., stack: Uncaught Error: Cannot find module 49.
[Info]  at http://localhost:54337/____wallaby-webpack.js?1566532759099:24
[Info]  2019-08-23T03:59:24.342Z wallaby:workers Sandbox (active) [eajn9] error: Uncaught Error: Cannot find module 49.
[Info]  2019-08-23T03:59:24.342Z wallaby:workers Failed to map the stack to user code, entry message: Uncaught Error: Cannot find module 49., stack: Uncaught Error: Cannot find module 49.
[Info]  at http://localhost:54337/____wallaby-webpack.js?1566532759099:24

I'm not sure if you just added the module logging but I could not find module 49 in the list of "processing" statements.

[jljorgenson18]

Not sure if it is related, but I'm also seeing a few "Compiled undefined messages"

[Info]  2019-08-23T05:56:26.941Z wallaby:postprocessor Instrumented tests/unit/components/popovermenus/PopoverMenu.js.
[Info]  2019-08-23T05:56:26.949Z wallaby:postprocessor Compiled undefined.
[Info]  2019-08-23T05:56:26.949Z wallaby:postprocessor Compiled undefined.
[Info]  2019-08-23T05:56:26.949Z wallaby:postprocessor Compiled undefined.
[Info]  2019-08-23T05:56:26.950Z wallaby:postprocessor Instrumenting tests/unit/components/Preview.js [content true, source-map true].
[Info]  2019-08-23T05:56:26.957Z wallaby:postprocessor Instrumented tests/unit/components/Preview.js.

[NikGovorov]

Thanks! I think I've fixed the issue. Could you please force the latest Wallaby core update?

[jljorgenson18]

Just tried it out. We have a different error this time but in the same spot

'0' of undefined, stack: Uncaught TypeError: Cannot set property '0' of undefined
[Info]  at http://localhost:50516/__wallaby__/tracer.js:14
[Error] Runtime error: Uncaught TypeError: Cannot set property '0' of undefined 
[Error] at http://localhost:50516/__wallaby__/tracer.js:14 
[Info]  2019-08-23T06:13:35.640Z wallaby:workers Sandbox (active) [kiw7f] error: Uncaught TypeError: Cannot set property '0' of undefined
[Info]  2019-08-23T06:13:35.640Z wallaby:workers Failed to map the stack to user code, entry message: Uncaught TypeError: Cannot set property '0' of undefined, stack: Uncaught TypeError: Cannot set property '0' of undefined
[Info]  at http://localhost:50516/__wallaby__/tracer.js:14
[Error] Runtime error: Uncaught TypeError: Cannot set property '0' of undefined 
[Error] at http://localhost:50516/__wallaby__/tracer.js:14 
[Info]  2019-08-23T06:13:35.641Z wallaby:workers Sandbox (active) [gpuny] error: Uncaught TypeError: Cannot set property '0' of undefined
[Error] Runtime error: Uncaught TypeError: Cannot set property '0' of undefined 
[Error] at http://localhost:50516/__wallaby__/tracer.js:14 
[Info]  2019-08-23T06:13:35.641Z wallaby:workers Failed to map the stack to user code, entry message: Uncaught TypeError: Cannot set property '0' of undefined, stack: Uncaught TypeError: Cannot set property '0' of undefined
[Info]  at http://localhost:50516/__wallaby__/tracer.js:14
[Info]  2019-08-23T06:13:35.643Z wallaby:workers Sandbox (active) [3c0dk] error: Uncaught TypeError: Cannot set property '0' of undefined
[Info]  2019-08-23T06:13:35.643Z wallaby:workers Failed to map the stack to user code, entry message: Uncaught TypeError: Cannot set property '0' of undefined, stack: Uncaught TypeError: Cannot set property '0' of undefined
[Info]  at http://localhost:50516/__wallaby__/tracer.js:14
[Error] Runtime error: Uncaught TypeError: Cannot set property '0' of undefined 
[Error] at http://localhost:50516/__wallaby__/tracer.js:14 

[NikGovorov]

To diagnose the issue, please follow the the steps below:

• Add the following section to your wallaby.js config

env: {
      kind: 'chrome',
      params: {
        runner: '--disable-gpu'
      },
      keepTabsOpened: true
    }

• Restart Wallaby.js
• Open Developer Tools (F12) in Chrome in the last opened tab;
• In Chrome's console you will be able to see the full stack trace for the error, we would like to know from which file tracer.js is called from. It also would be useful if you could provide us with generated html.

[jljorgenson18]

This is what I am seeing

Uncaught TypeError: Cannot set property '0' of undefined
    at o.statement (tracer.js:14)
    at e.$_$w (tracer.js:15)
    at Object.window.__moduleBundler.modules.<computed> (____wallaby-bundle.js?1566542232612&wallabyFileId=bundle:233858)
    at window.__moduleBundler.require (____wallaby-webpack.js?1566542232408:28)
    at Module.<anonymous> (____wallaby-bundle.js?1566542232612&wallabyFileId=bundle:210214)
    at Module.window.__moduleBundler.modules.<computed> (____wallaby-bundle.js?1566542232612&wallabyFileId=bundle:210421)
    at window.__moduleBundler.require (____wallaby-webpack.js?1566542232408:28)
    at Module.window.__moduleBundler.modules.<computed> (____wallaby-bundle.js?1566542232612&wallabyFileId=bundle:20)
    at window.__moduleBundler.require (____wallaby-webpack.js?1566542232408:28)
    at Module.window.__moduleBundler.modules.<computed> (____wallaby-bundle.js?1566542232612&wallabyFileId=bundle:2)

[NikGovorov]

Could you please click on Object.window.__moduleBundler.modules.<computed> (____wallaby-bundle.js?1566542232612&wallabyFileId=bundle:233858) and check what file the module represents?

[NikGovorov]

Please also check if you have any messages in Wallaby.js Console starting with Failed to map ranges for when debug: true.

[jljorgenson18]

Welp, it looks like it was loading the Webpack config itself! This rule

{ pattern: '*.config.js', instrument: false, load: false },

Included the Webpack.config and that was somehow getting loaded. I'm going to dig into it a bit more and get more information. Should I need any of the configs (Webpack, babel, tsconfig) listed in the files array?

[NikGovorov]

No, you shouldn't.

[jljorgenson18]

Sorry for any confusion, but it doesn't look like it was the Webpack config on my end. It looks like it was something derived from the Webpack module rules. This is the transpiled snippet that is calling tracer

var transform = transform || $_$w(153, 3);
var insertInto = insertInto || $_$w(153, 4);
var options = ($_$w(153, 5), {
    'singleton': true,
    'convertToAbsoluteUrls': true,
    'hmr': false
});

Which was somehow derived from the top of our Webpack config

let styleLoader;
if (isDev || analysisMode) {
    styleLoader = {
        loader: 'style-loader',
        options: {
            singleton: true,
            convertToAbsoluteUrls: true,
            hmr: false
        }
    };
} else {
    styleLoader = {
        loader: MiniCssExtractPlugin.loader
    };
}

const moduleCSSLoader = {
    loader: 'css-loader',
    options: {
        modules: true,
        camelCase: true,
        sourceMap: isDev,
        localIdentName: `${isDev ? '[local]_' : ''}[hash:base64:5]`,
        importLoaders: 2
    }
};

const globalCSSLoader = {
    loader: 'css-loader',
    options: {
        modules: false,
        camelCase: true,
        sourceMap: isDev,
        localIdentName: `${isDev ? '[local]_' : ''}[hash:base64:5]`,
        importLoaders: 2
    }
};
const postCSSLoader = {
    loader: 'postcss-loader'
};
const lessLoader = {
    loader: 'less-loader',
    options: {
        strictMath: true,
        noIeCompat: true,
        sourceMap: isDev,
        relativeUrls: false
    }
};
const sassLoader = {
    loader: 'sass-loader',
    options: {
        sourceMap: isDev,
        includePaths: [path.join(__dirname, 'src'), path.join(__dirname, 'node_modules')]
    }
};

const moduleLessLoaders = [styleLoader, moduleCSSLoader, postCSSLoader, lessLoader];
const globalLessLoaders = [styleLoader, globalCSSLoader, postCSSLoader, lessLoader];
const moduleSassLoaders = [styleLoader, moduleCSSLoader, postCSSLoader, sassLoader];
const globalSassLoaders = [styleLoader, globalCSSLoader, postCSSLoader, sassLoader];

Also, this was an HTML sample of one of the sandbox tabs (with the coverage script closed for brevity)

[jljorgenson18]

I have to head to bed but I would be happy to keep looking at this tomorrow. If there is anything else I can do, please let me know.

[jljorgenson18]

Also, here is the current Wallaby config I am attempting to use (I had made a few tweaks to try to debug)

process.env.NODE_ENV = 'wallaby';
process.env.SKIP_SLOW_TESTS = true;
const path = require('path');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');

const getWallabyWebpackConfig = () => {
    const wallabyWebpackConfig = {
        ...webpackConfig,
        devtool: undefined,
        // This helps speed up the build so we don't add these files to the bundle each time
        externals: {
            // Use external version of React and ReactDOM
            react: 'React',
            'react-dom': 'ReactDOM',
            yjs: 'Y',
            chai: 'chai',
            sinon: 'sinon'
        }
    };
    delete wallabyWebpackConfig.entry;
    delete wallabyWebpackConfig.watchOptions;
    delete wallabyWebpackConfig.output;
    delete wallabyWebpackConfig.optimization;
    const allowedPlugins = {
        ProvidePlugin: true,
        DefinePlugin: true,
        IgnorePlugin: true
    };
    wallabyWebpackConfig.plugins = wallabyWebpackConfig.plugins.filter(
        plugin => allowedPlugins[plugin.constructor.name]
    );
    wallabyWebpackConfig.plugins.push(new webpack.NormalModuleReplacementPlugin(/\.svg$/, 'node-noop'));
    wallabyWebpackConfig.resolve.alias.tests = path.join(__dirname, 'tests');
    return wallabyWebpackConfig;
};

module.exports = wallaby => {
    return {
        files: [
            // Files we want loaded via script tag for performance reasons
            { pattern: 'node_modules/react/umd/react.development.js', instrument: false },
            { pattern: 'node_modules/react-dom/umd/react-dom.development.js', instrument: false },
            { pattern: 'node_modules/yjs/y.js', instrument: false },
            { pattern: 'node_modules/chai/chai.js', instrument: false },
            { pattern: 'node_modules/sinon/pkg/sinon-no-sourcemaps.js', instrument: false },
            // Extra stuff
            { pattern: 'images/**/*', instrument: false, load: false, binary: true },
            // Test Files
            { pattern: 'tests/auxiliary/**/*', instrument: true, load: false },
            { pattern: 'tests/resources/**/*', instrument: false, load: false },
            { pattern: 'tests/qa/resources/**/*', instrument: false, load: false, binary: true },
            { pattern: 'tests/images/**/*', instrument: false, load: false, binary: true },
            { pattern: 'tests/setup.ts', instrument: true, load: false },
            { pattern: 'tests/wallabySetup.js', instrument: true, load: false },
            // Primary Code
            { pattern: 'src/apps/uno/**/*', instrument: false, load: false }, // Speed up the build by not instrumenting uno code
            { pattern: 'src/**/*', instrument: true, load: false }
        ],

        tests: [
            { pattern: 'tests/unit/**/*', load: false },
            { pattern: 'tests/sys/peso/**/*', load: false },
            { pattern: 'tests/qa/peso/**/*', load: false }
        ],
        testFramework: 'mocha',

        env: {
            kind: 'chrome',
            params: {
                runner: '--disable-gpu'
            },
            keepTabsOpened: true
        },
        postprocessor: wallaby.postprocessors.webpack(getWallabyWebpackConfig(), {
            setupFiles: ['tests/wallabySetup.js']
        }),

        debug: true,

        setup() {
            mocha.setup({ timeout: 20000 });
            EN.listenTo('ready', () => window.__moduleBundler.loadTests());
        }
    };
};

[NikGovorov]

I believe I know where the problem is, set instrument to false for all your css files using ' style-loader ' for now as a workaround. If your tests don't test css then it's recommended to use null-loader for better performance.

process.env.NODE_ENV = 'wallaby';
process.env.SKIP_SLOW_TESTS = true;
const path = require('path');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');

const getWallabyWebpackConfig = () => {
    const wallabyWebpackConfig = {
        ...webpackConfig,
        devtool: undefined,
        // This helps speed up the build so we don't add these files to the bundle each time
        externals: {
            // Use external version of React and ReactDOM
            react: 'React',
            'react-dom': 'ReactDOM',
            yjs: 'Y',
            chai: 'chai',
            sinon: 'sinon'
        }
    };
    delete wallabyWebpackConfig.entry;
    delete wallabyWebpackConfig.watchOptions;
    delete wallabyWebpackConfig.output;
    delete wallabyWebpackConfig.optimization;
    const allowedPlugins = {
        ProvidePlugin: true,
        DefinePlugin: true,
        IgnorePlugin: true
    };
    wallabyWebpackConfig.plugins = wallabyWebpackConfig.plugins.filter(
        plugin => allowedPlugins[plugin.constructor.name]
    );
    wallabyWebpackConfig.plugins.push(new webpack.NormalModuleReplacementPlugin(/\.svg$/, 'node-noop'));
    wallabyWebpackConfig.resolve.alias.tests = path.join(__dirname, 'tests');
    return wallabyWebpackConfig;
};

module.exports = wallaby => {
    return {
        files: [
            // Files we want loaded via script tag for performance reasons
            { pattern: 'node_modules/react/umd/react.development.js', instrument: false },
            { pattern: 'node_modules/react-dom/umd/react-dom.development.js', instrument: false },
            { pattern: 'node_modules/yjs/y.js', instrument: false },
            { pattern: 'node_modules/chai/chai.js', instrument: false },
            { pattern: 'node_modules/sinon/pkg/sinon-no-sourcemaps.js', instrument: false },
            // Extra stuff
            { pattern: 'images/**/*', instrument: false, load: false, binary: true },
            // Test Files
++          { pattern: 'tests/**/*.+(css|less|scss)', instrument: false, load: false},
            { pattern: 'tests/auxiliary/**/*', instrument: true, load: false },
            { pattern: 'tests/resources/**/*', instrument: false, load: false },
            { pattern: 'tests/qa/resources/**/*', instrument: false, load: false, binary: true },
            { pattern: 'tests/images/**/*', instrument: false, load: false, binary: true },
            { pattern: 'tests/setup.ts', instrument: true, load: false },
            { pattern: 'tests/wallabySetup.js', instrument: true, load: false },
            // Primary Code
++          { pattern: 'src/**/*.+(css|less|scss)', instrument: false, load: false},
            { pattern: 'src/apps/uno/**/*', instrument: false, load: false }, // Speed up the build by not instrumenting uno code
            { pattern: 'src/**/*', instrument: true, load: false }
        ],

        tests: [
            { pattern: 'tests/unit/**/*', load: false },
            { pattern: 'tests/sys/peso/**/*', load: false },
            { pattern: 'tests/qa/peso/**/*', load: false }
        ],
        testFramework: 'mocha',

        env: {
            kind: 'chrome',
            params: {
                runner: '--disable-gpu'
            },
            keepTabsOpened: true
        },
        postprocessor: wallaby.postprocessors.webpack(getWallabyWebpackConfig(), {
            setupFiles: ['tests/wallabySetup.js']
        }),

        debug: true,

        setup() {
            mocha.setup({ timeout: 20000 });
            EN.listenTo('ready', () => window.__moduleBundler.loadTests());
        }
    };
};

[jljorgenson18]

Looks like that worked! Unfortunately we do need to load the style files since we need them for css modules. But, this should definitely suffice for now. Thank you so much!