Import issue after upgrading to version 0.6.0

[ehsanpo]

Getting some import error for package that dont exist.

webpack built 469f07c50dfac887091c in 48607ms

ERROR in ../node_modules/@pmmmwh/react-refresh-webpack-plugin/sockets/WDSSocket.js 7:36-93
Module not found: Error: Can't resolve 'webpack-dev-server/client/clients/SockJSClient' in '/Users/USER/dev/web3/node_modules/@pmmmwh/react-refresh-webpack-plugin/sockets'
@ ../node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js 79:4-28 85:8-32

ERROR in ../node_modules/@pmmmwh/react-refresh-webpack-plugin/sockets/WDSSocket.js 8:39-99
Module not found: Error: Can't resolve 'webpack-dev-server/client/clients/WebSocketClient' in '/Users/USER/dev/web3/node_modules/@pmmmwh/react-refresh-webpack-plugin/sockets'
@ ../node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js 79:4-28 85:8-32

ERROR in ../node_modules/@pmmmwh/react-refresh-webpack-plugin/sockets/WDSSocket.js 9:21-64
Module not found: Error: Can't resolve 'webpack-dev-server/client/socket' in '/Users/USER/dev/web3/node_modules/@pmmmwh/react-refresh-webpack-plugin/sockets'
@ ../node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js 79:4-28 85:8-32

[SslTomH]

Seeing exactly the same issue here too.
Is webpack-dev-server a required peer dependency?

[pmmmwh]

Hi, can you give more information about what dependencies you have installed, and what HMR integration you are running with?

[ehsanpo]

my webpack config.

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const ReactRefreshTypeScript = require('react-refresh-typescript').default;
const Dotenv = require('dotenv-webpack');
const { merge } = require('webpack-merge');
const webpackCommonConfig = require('./webpack.config.common.js');

const majorMinorPatchVersion = require('./package.json').version;

const separator =
    process.env.JOB_NAME && process.env.JOB_NAME.indexOf('beta') >= 0
        ? '-beta-'
        : '-';
const build =
    process.env.BUILD_NUMBER === undefined
        ? 'SNAPSHOT'
        : process.env.BUILD_NUMBER;
const version = majorMinorPatchVersion + separator + build;
const topEnabled = process.env.TOP_ENABLED || false;
const reduxLoggerEnabled = process.env.REDUX_LOGGER_ENABLED || false;
const noUpdate = process.env.NO_UPDATE || false;
const localVideoSignaling = process.env.LOCAL_VIDEO_SIGNALING;

module.exports = merge(webpackCommonConfig, {
    mode: 'development',
    devtool: 'inline-source-map',

    entry: [
        '@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js',
        'core-js/stable',
        'regenerator-runtime/runtime',
        'eventsource-polyfill',
        'webpack-hot-middleware/client',
        path.resolve(__dirname, 'src', 'app', 'entry.js'),
    ],

    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
    },

    module: {
        rules: [
            {
                test: /\.[jt]sx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: require.resolve('ts-loader'),
                        options: {
                            getCustomTransformers: () => ({
                                before: [ReactRefreshTypeScript()],
                            }),
                            transpileOnly: true,
                        },
                    },
                    { loader: 'babel-loader', options: { rootMode: 'upward' } },
                ],
            },
            {
                enforce: 'pre',
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'source-map-loader',
            },
        ],
    },

    cache: true,

    resolve: {
        alias: { process: 'process/browser' },
        fallback: {
            fs: false,
            path: false,
            assert: false,
            process: require.resolve('process/browser'),
        },
    },

    plugins: [
        new HtmlWebpackPlugin({ template: 'src/templates/index.html' }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.LoaderOptionsPlugin({ debug: true }),
        new Dotenv(),
        new ReactRefreshWebpackPlugin(),
      
    ],

    bail: false,
});

and my dependency are a lot:

 "dependencies": {
        "@airbrake/browser": "2.1.8",
        "@date-io/moment": "1.1.0",
        "@electron/remote": "2.1.2",
        "@emoji-mart/data": "^1.2.1",
        "@emoji-mart/react": "^1.1.1",
        "@headlessui/react": "^2.2.0",
        "@material-ui/core": "^4.12.4",
        "@material-ui/icons": "^4.11.3",
        "@material-ui/pickers": "^3.3.11",
        "@microsoft/teams-js": "^2.17.0",
        "@popperjs/core": "^2.11.8",
        "@segment/analytics-node": "^2.2.1",
        "@tailwindcss/container-queries": "^0.1.1",
        "@tanstack/react-query": "^5.67.3",
        "@types/lodash.throttle": "^4.1.9",
        "buffer": "^6.0.3",
        "calendar-link": "^2.8.0",
        "classnames": "2.5.1",
        "connected-react-router": "^6.9.3",
        "crypto-browserify": "^3.12.1",
        "crypto-js": "4.2.0",
        "dotenv": "^16.4.5",
        "downshift": "3.2.10",
        "emoji-categories": "0.1.0",
        "emoji-mart": "^5.6.0",
        "emoji-regex": "^10.3.0",
        "enum": "2.4.0",
        "events": "3.3.0",
        "eventsource-polyfill": "0.9.6",
        "fuse.js": "^6.6.2",
        "history": "4.7.2",
        "i18n-iso-countries": "7.11.2",
        "i18next": "23.11.5",
        "i18next-browser-languagedetector": "7.2.0",
        "i18next-http-backend": "2.5.2",
        "immutable": "3.8.2",
        "is-electron": "2.2.2",
        "js-md5": "0.8.3",
        "json-loader": "0.5.7",
        "jssip": "^3.10.1",
        "kurento-utils": "^6.18.0",
        "libphonenumber-js": "1.11.2",
        "lodash": "^4.17.21",
        "moment": "2.30.1",
        "nanoid": "^5.1.5",
        "node-emoji": "1.11.0",
        "node-polyfill-webpack-plugin": "^4.0.0",
        "os-browserify": "^0.3.0",
        "process": "^0.11.10",
        "prop-types": "15.8.1",
        "qrcode.react": "1.0.0",
        "query-string": "5.0.1",
        "raw-loader": "0.5.1",
        "rc-progress": "^2.6.1",
        "react": "^18.3.1",
        "react-autolink": "0.2.1",
        "react-big-calendar": "1.8.1",
        "react-dnd": "2.6.0",
        "react-dnd-html5-backend": "2.6.0",
        "react-dom": "^18.3.1",
        "react-i18next": "^14.1.2",
        "react-immutable-proptypes": "2.1.0",
        "react-infinite-scroll-component": "5.0.5",
        "react-intersection-observer": "^8.34.0",
        "react-linkify": "0.2.2",
        "react-phone-number-input": "3.1.31",
        "react-popper": "^2.3.0",
        "react-redux": "7.2.9",
        "react-router-dom": "5.3.4",
        "react-sortable-hoc": "1.9.1",
        "react-string-replace": "^0.4.4",
        "react-transition-group": "4.4.5",
        "react-virtualized-auto-sizer": "1.0.2",
        "react-virtuoso": "^4.12.7",
        "react-window": "1.8.10",
        "redux": "3.7.2",
        "redux-batched-subscribe": "^0.1.6",
        "redux-logger": "3.0.6",
        "redux-thunk": "2.2.0",
        "reselect": "3.0.1",
        "rimraf": "^6.0.1",
        "stream-browserify": "^3.0.0",
        "svg-loader": "0.0.2",
        "svg-react-loader": "0.4.6",
        "use-resize-observer": "7.0.0",
        "uuid": "^11.1.0",
        "webpack-cli": "^5.1.4"
    },
    "devDependencies": {
        "@brainly/onesky-utils": "^1.4.2",
        "@types/crypto-js": "^4.2.2",
        "@types/emoji-mart": "^3.0.14",
        "@types/jest": "^29.5.14",
        "@types/qrcode.react": "^1.0.5",
        "@types/rc-progress": "^2.4.3",
        "@types/react": "^18.0.0",
        "@types/react-dom": "^18.0.0",
        "@types/react-router-dom": "^5.3.3",
        "@types/react-virtualized-auto-sizer": "^1.0.4",
        "@types/react-window": "^1.8.8",
        "ajv": "^8.14.0",
        "babel-eslint": "^10.1.0",
        "babel-jest": "^29.7.0",
        "btoa": "^1.2.1",
        "clean-webpack-plugin": "^1.0.1",
        "compression-webpack-plugin": "11.1.0",
        "dotenv-webpack": "^8.1.0",
        "electron": "^28.3.3",
        "es-abstract": "^1.23.3",
        "expect": "^24.9.0",
        "happypack": "^5.0.1",
        "html-webpack-inline-chunk-plugin": "^1.1.1",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^29.7.0",
        "jest-environment-jsdom": "^29.7.0",
        "jest-environment-jsdom-global": "^4.0.0",
        "jest-localstorage-mock": "^2.4.26",
        "less": "^4.2.0",
        "postcss": "^8.4.38",
        "postcss-loader": "^8.1.1",
        "react-refresh": "^0.14.2",
        "react-refresh-typescript": "^2.0.10",
        "react-test-renderer": "^18.3.1",
        "redux-mock-store": "^1.5.4",
        "regenerator-runtime": "^0.13.11",
        "ts-jest": "^29.3.2",
        "type-fest": "^4.18.3",
        "unique-names-generator": "^4.7.1"
    }
}

[pmmmwh]

How are you running your dev server?

[blowery]

I'm seeing the same issue trying to move up. We only use the webpack-hot-middleware, we don't use the webpack-dev-server at all.

I think the issue is that webpack is trying to compile the code in sockets/* and eagerly resolving the stuff that depends on webpack-dev-server. Since we don't have it, webpack can't find it, and you get the error.

As a test, I added this to my webpack config:

new webpack.NormalModuleReplacementPlugin(
  /^webpack-dev-server\//,
  'utils/noop'
)

where utils/noop is just

export default function noop() {
  // No-op
}

The errors go away and everything seems to work fine.

AFAICT, there's no great way to catch an error from require.resolve at build time...

[pmmmwh]

Hmm, that seems wrong. How does your configuration look like for this plugin?

[blowery]

For ReactRefresh? We just new it up and add it to plugins for dev builds. No specific config.

[pmmmwh]

For ReactRefresh? We just new it up and add it to plugins for dev builds. No specific config.

I think that's the problem then - if you are using WHM, you should specify sockIntegration: 'whm' for the plugin's config.

[blowery]

@pmmmwh that worked! thanks!

[silkfire]

Perhaps the documentation can be clarified (by amplifying the wording) that this is not an optional setting anymore (unless running webpack-dev-server)?