Unable to upgrade webpack and make it work with ESM

I figured it out.

Mainly my main problem was that the webpack that I was using before upgrading used imports without mentioning the .js at the end, I still do not know how.

But that threw me off, once I upgraded, added "type": "modules" to the package.json and added the .js to each import it started to work.

It was a matter of chasing the errors as there were things like import { merge } from 'webpack-merge' instead of import merge from 'webpack-merge' a few packages that also needed update suchs as "@pmmmwh/react-refresh-webpack-plugin" and other bit and pieces. But it all works now

Would be good, if you could specify the old and the new versions of Webpack you're using.

From what I see in your story, the old Webpack used other strategy for module resolution. I recommend to read this page from Webpack docs on how it resolves modules. There are two config fields that might be interesting to you: resolve.enforceExtension (link) and resolve.extensions (link).

resolve.enforceExtension forces you to always specify file extensions. For example:

// resolve.enforceExtension = true
// ===============================================

// Invalid:
import one from "./one";
// Valid:
import two from "./two.js";

// resolve.enforceExtension = false
// ===============================================

// Both variants are valid:
import one from "./one";
import two from "./two.js";

resolve.extensions specifies what extensions can be omitted in the code and Webpack will try to resolve the file automatically. For example:

// resolve.extensions = [".js", ".json"]
// ===============================================

// "*.js" and "*.json" modules can be imported without extension.
//
// Both variants are valid:
import one from "./one";
import one from "./one.js";

// But "*.ts" modules have to be imported with extension specification.
//
// Invalid:
import one from "./one";
// Valid:
import one from "./one.ts";