1

I'm struggling with webpack setup for my ssr react server. I've read several posts here on stackoverflow, other articles and nothing works. Issue is connected with webpack-node-externals package. I've tried several configurations:

  • without nodeExternals: my app throws an error "process.hrtime" is not a function
  • with nodeExternals: my bundle is missing dependencies listed in mypackage.json (compression, etc.). This is because it leaves require('moduleName') everyywhere, obvious
  • with nodeExternals and with options.modulesFromFile argument set to

   modulesFromFile: {
       fileName: path.resolve(__dirname),
       includeInBundle: ['dependencies']
   }

I ended up here with error from user-agent module (not listed in my deps) "Cannot find module request". When I installed request manually, there where other errors I don't remember now.

Finally I don't know what I'm doing wrong. Here sample of my webpack config file:


    const path = require('path');
    
    const {
        CleanWebpackPlugin
    } = require('clean-webpack-plugin');
    const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
    const nodeExternals = require('webpack-node-externals');
    const {
        BundleAnalyzerPlugin
    } = require('webpack-bundle-analyzer');
    
    const IS_PRODUCTION = process.env.MODE === 'production';
    
    const config = {
        entry: path.resolve(__dirname, 'src/server/index.ts'),
        mode: IS_PRODUCTION ? 'production' : 'development',
        output: {
            path: path.resolve(__dirname, 'dist/server'),
            publicPath: IS_PRODUCTION ? 'dist/' : undefined,
            filename: 'index.js',
        },
        externals: [nodeExternals()],
        resolve: {
            extensions: ['.js', '.ts', '.tsx', '.json'],
            fallback: {
                fs: false,
                yamlparser: false,
                tls: false,
                net: false,
            },
        },
        target: 'node',
        module: {
            rules: [{
                    test: /\.((t|j)s(x?))$/u,
                    exclude: /node_modules/,
                    use: {
                        loader: 'swc-loader',
                    },
                },
                {
                    test: /\.(ts|tsx)$/u,
                    exclude: /node_modules/,
                    loader: 'ts-loader',
                    options: {
                        configFile: path.resolve(__dirname, 'tsconfig.webpack.json'),
                    },
                },
                {
                    test: /\.(png|jpg|jpeg|ico)$/u,
                    exclude: /node_modules/,
                    loader: 'file-loader',
                },
            ],
        },
        plugins: [new NodePolyfillPlugin(), new CleanWebpackPlugin()],
    };
    
    if (IS_PRODUCTION) {
        config.optimization = {
            minimize: true,
        };
    }
    
    if (process.env.BUNDLE_ANALYZER === 'true') {
        config.plugins.push(
            new BundleAnalyzerPlugin({
                analyzerMode: 'static',
                reportFilename: 'bundle-report-server.html',
            })
        );
    }
    
    module.exports = config;

1 Answer 1

1

I've already managed to fix it on myself.

The problem was in node polyfill plugin which was not necessary in my webpack config and it was causing errors like process.hrtime is not a function

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.