Is It Possible To Use Both "require" And "import" Together With Webpack?

We had to update some dependencies to switch to Webpack 4 and are getting a warning in webpack and an error in the browser when trying to mix import and require within the same pro

Solution 1:

Technically webpack will bundle (but emit a warning like you see there). However, we at the webpack team suggests that you limit the amount of CommonJS syntax used in your codebase to as small as possible.

Why? Because CommonJS isn't statically analyzable in many edge cases, and therefore "bails out" of optimizations like tree-shaking, and scope-hoisting. This mean's your JavaScript (the most expensive resource on your website to load), will have all sorts of dead/unused code in it.

In our webpack documentation you can observe the listed optimization bailouts and you will notice that one of them is "using CommonJS" or "module" symbols in your code.

Long term this will have significant negative web performance impacts on your application!

If it really is painful to migrate, then I would look into a codemod that will run across your code and transform requires (where possible) to imports!