ERROR ./node_modules/ts-invariant/process/index.js 24:33-40

Question

I am getting this error while creating a build.

BREAKING CHANGE:

The request 'process/browser' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. resolve 'process/browser' in 'Path'

Here is my webpack.config file

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { outputConfig, copyPluginPatterns, entryConfig, devServer } = require("./env.config");
const webpack = require('webpack');
require('dotenv').config({ path: './.env' }); 


module.exports = (env, options) => 

{
    return {
        mode: options.mode,
        entry: entryConfig,
        devServer,
target: "web",
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    use: "ts-loader",
                    exclude: /node_modules/,
                },
                
                {
                    test: /\.(graphql|gql)$/,
                    exclude: /node_modules/,
                    loader: 'graphql-tag/loader',
                  },
                {
                    test: /\.(css|scss)$/,
                    use: [
                        // We're in dev and want HMR, SCSS is handled in JS
                        // In production, we want our css as files
                        "style-loader",
                        "css-loader",
                        {
                            loader: "postcss-loader",
                            options: {
                                postcssOptions: {
                                    plugins: [
                                        ["postcss-preset-env"],
                                    ],
                                },
                            },
                        },
                        "sass-loader"
                    ],
                },
                {
                    test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i,
                    type: "javascript/auto",
                    loader: "file-loader",
                    options: {
                        publicPath: "../",
                        name: "[path][name].[ext]",
                        context: path.resolve(__dirname, "src/assets"),
                        emitFile: false,
                    },
                },
                {
                    test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
                    type: "javascript/auto",
                    exclude: /images/,
                    loader: "file-loader",
                    options: {
                        publicPath: "../",
                        context: path.resolve(__dirname, "src/assets"),
                        name: "[path][name].[ext]",
                        emitFile: false,
                    },
                },
            ],
        },
        resolve: { extensions: [".tsx", ".ts", ".js",".jsx",".json"],fallback: {
            path: false,
            buffer: false,
            crypto: false
        },alias: {
            process: "process/browser"
         } 
     },
        output: {
            filename: "js/[name].bundle.js",
            path: path.resolve(__dirname, outputConfig.destPath),
            publicPath: "",
            
        },
        
        plugins: [
            new HtmlWebpackPlugin({
                template: "./src/index.html",
                inject: true,
                minify: false
            }),
            new webpack.DefinePlugin({
                "process.env": JSON.stringify(process.env)
              }),
            new CopyPlugin(copyPluginPatterns),
            new webpack.ProvidePlugin({
                process: 'process/browser',
         })
        ]
    };
};`

Answer 1

I was able to solve the error by adding the .js suffix to the string.

---

Before:

new webpack.ProvidePlugin({
    process: 'process/browser',
});

After:

new webpack.ProvidePlugin({
    process: 'process/browser.js',
})