Webpack 5 webpackMissingModule error for node_modules package

Question

I've been working on upgrading a repository from Webpack version 4 to 5, and I've encountered a very strange problem where Webpack will throw an error at runtime telling me that a package in node_modules could not include a specific "module" (referring to a subdirectory of that package). The module in question is @hapi/joi, and the error I'm receiving is:

Error: Cannot find module './types/alternatives'

At one point it was telling me that the error related to that package, but now it just throws the error with no package context. I've dug into the @hapi/joi package, and I can see this set of imports in the index.js:

const internals = {
    alternatives: require('./types/alternatives'),
    array: require('./types/array'),
    boolean: require('./types/boolean'),
    binary: require('./types/binary'),
    date: require('./types/date'),
    func: require('./types/func'),
    number: require('./types/number'),
    object: require('./types/object'),
    string: require('./types/string'),
    symbol: require('./types/symbol')
};

I've verified that the ./types/alternatives directory exists and that it has an index.js of its own. This package also works fine on Webpack 4. I tried upgrading to the standalone joi package, and it threw the same error.

I'm pretty confused at to why this error is throw at runtime. I would think this would be a build error, though maybe it has something to do with building the target for node?

This is my Webpack config. It's mostly unmodified from v4:

{
    entry: {
        adviceServer: "./src/server/index.ts",
    },
    target: "node",
    bail: true,
    mode: env.NODE_ENV,
    output: {
        path: path.resolve(root, "dist", "js"),
        filename: `[name].${env.ASSET_HASH}.js`
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: "ts-loader",
                        options: {
                            context: path.resolve(root, "src"),
                            configFile: tsconfigPath,
                            transpileOnly: false
                        }
                    }
                ],
                exclude: [
                    "/node_modules",
                    "/**/*.test.ts/"
                ]
            },

            {
                test: /\.s?css$/,
                use: ["isomorphic-style-loader", "css-loader", "sass-loader"]
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js", ".jsx", "scss", ".json"],
        alias: {
            styles: path.resolve(root, "src", "scss"),
            canvas: path.resolve(root, "src", "etc", "fileMock"),
            ws: path.resolve(root, "src", "etc", "fileMock")
        },
        plugins: [
            new TsconfigPathsPlugin({
                configFile: tsconfigPath
            })
        ]
    },
    devtool: "eval-cheap-source-map",
    plugins: [
        new BundleTracker({ filename: "./webpack-stats.json" })
    ]
}

Answer 1

I had a similar issue upgrading from webpack 4 but with a different external library. In my case it was caused by two webpack@5 versions installed at the same time. Check your package-lock.json/yarn.lock and add overrides/resolutions to your package.json if there are several versions. If not — try removing your node_modules folder and installing packages again.