Can't find swc-loader bindings on Windows

[mattkuda]

Hi, we are trying to convert our project from using ts-loader to swc-loader.

After installing the node modules and setting up loader: 'swc-loader' in our webpack files, I'm seeing the below errors occurring.

Terminal error when running docker-compose up --build:

ERROR in ./src/client/pages/main/index.tsx
    Module build failed (from ./node_modules/swc-loader/src/index.js):
    Error: Bindings not found.
        at Compiler.<anonymous> (/opt/app/node_modules/@swc/core/index.js:224:19)
        at Generator.next (<anonymous>)
        at /opt/app/node_modules/@swc/core/index.js:34:71
        at new Promise (<anonymous>)
        at __awaiter (/opt/app/node_modules/@swc/core/index.js:30:12)
        at Compiler.transform (/opt/app/node_modules/@swc/core/index.js:201:16)
        at Object.transform (/opt/app/node_modules/@swc/core/index.js:343:21)
        at Object.<anonymous> (/opt/app/node_modules/swc-loader/src/index.js:86:21)

Terminal error when running npm run build:

ERROR in ./src/client/pages/main/index.tsx
Module build failed (from ./node_modules/swc-loader/src/index.js):
Error: unknown field `onlyCompileBundledFiles` at line 1 column 350

Added to package.json and installed:

"@swc/cli": "^0.1.57",
"@swc/core": "^1.2.218",
"[swc-loader](https://npmjs.com/package/swc-loader)": "[^0.2.3](https://npmjs.com/package/swc-loader)",

Example webpack config:

module.exports = {
    mode: constants.IS_DEVELOPMENT ? 'development' : 'production',
    devtool: constants.IS_DEVELOPMENT ? 'inline-source-map' : 'source-map',
    target: 'web',
    devServer: {
        client: {
            logging: 'verbose',
            overlay: false,
            webSocketURL: {
                hostname: '0.0.0.0',
                pathname: '/ws',
                port: constants.PUBLIC_PORT,
            },
        },
        compress: true,
        devMiddleware: {
            publicPath: constants.PUBLIC_PATH,
        },
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
        host: config.get('server.hostname'),
        hot: true,
        port: constants.PUBLIC_PORT,
        static: {
            directory: constants.STATIC_PATH,
            publicPath: constants.PUBLIC_PATH,
            watch: true,
        },
    },
    entry: {
        main: [
            './src/client/pages/main/index.tsx',
        ]       
    },
    externals: {
        newrelic: 'newrelic',
        config: '__MAIN_CONFIG__',
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: [/node_modules/, /__tests__/],
                use: [
                    {
                        loader: 'swc-loader',
                    },
                ],
            }, {
                test: /\.(c|le)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            sourceMap: true,
                            url: false,
                        },
                    },
                    'postcss-loader',
                    {
                        loader: 'less-loader',
                        options: {
                            lessOptions: {
                                paths: [path.resolve(__dirname, 'node_modules/@vp/visage/src/tokens/less')],
                                plugins: [
                                    new CleanCSSPlugin({ advanced: true }),
                                ],
                            },
                            sourceMap: true,
                        },
                    },
                ].filter(Boolean),
            },
        ],
    },
    optimization: {
        minimizer: [
            new TerserJSPlugin({
                parallel: 2,
            }),
            new CssMinimizerPlugin({
                parallel: true,
                minimizerOptions: {
                    preset: [
                        'default',
                        {
                            discardComments: { removeAll: true },
                        },
                    ],
                },
            }),
        ],
        runtimeChunk: 'single',
        sideEffects: true,
        splitChunks: {
            cacheGroups: {
               mainstyles: {
                    name: 'main-styles',
                    type: 'css/mini-extract',
                    chunks: (chunk) => chunk.name === 'main',
                    enforce: true,
                },           
                mainVendor: {
                    test: /node_modules/,
                    chunks: (chunk) => chunk.name === 'main',
                    name: 'main-vendor',
                    priority: 10,
                    enforce: true,
                }
            },
        },
    },
    output: {
        filename: constants.IS_DEVELOPMENT ? '[name].js' : '[name].[contenthash].js',
        path: constants.STATIC_PATH,
        publicPath: constants.PUBLIC_PATH,
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: path.resolve('assets/images'), to: path.resolve('dist/static/images') },
                { from: path.resolve('assets/i18n'), to: path.resolve('dist/static/i18n') },
                { from: path.resolve('assets/json'), to: path.resolve('dist/static/json') },
            ],
        }),
        new MiniCssExtractPlugin({
            filename: constants.IS_DEVELOPMENT ? '[name].css' : '[name].[contenthash].css',
            chunkFilename: constants.IS_DEVELOPMENT ? '[name]-[id].css' : '[name]-[id].[contenthash].css',
        }),
        new WebpackAssetsManifest({
            entrypoints: true,
            publicPath: constants.PUBLIC_PATH,
        }),
        new WebpackCleanPlugin(),
        new webpack.DefinePlugin({
            // TODO remove this
            'process.env.IS_CLIENT': JSON.stringify(true),
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
            PUBLIC_PATH: JSON.stringify(constants.PUBLIC_PATH),
        }),
        constants.IS_DEVELOPMENT ? new webpack.HotModuleReplacementPlugin() : null,
        constants.IS_DEVELOPMENT ? new ReactRefreshWebpackPlugin() : null,
        constants.IS_DEVELOPMENT ? new DashboardPlugin() : null,
        constants.IS_DEVELOPMENT ? new DuplicatesPlugin() : null,
        constants.IS_DEVELOPMENT ? null : new webpack.ids.HashedModuleIdsPlugin(),
    ].filter(Boolean),
    resolve: {
        alias: {
            static: constants.STATIC_PATH,
        },
        fallback: {
            crypto: false,
            http: false,
            https: false,
            util: false,
        },
        extensions: ['.tsx', '.ts', '.js'],
        plugins: [new TsconfigPathsPlugin()],
    },
};

.swrc file added

{
    "$schema": "https://json.schemastore.org/swcrc",
    "jsc": {
        "parser": {
            "syntax": "typescript",
            "tsx": true,
            "decorators": true,
            "dynamicImport": false
        },
        "transform": {
            "react": {
                "refresh": true
            }
        },
        "target": "es5",
        "loose": false,
        "externalHelpers": false
    },
    "minify": false
}

Other information:

• OS: Windows 10 64 bit
• "typescript": "^4.6.4",
• "react": "^17.0.2",

[kdy1]

You should install swc from the docker image, not host