Webpack build: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[dakur]

I'd say there must be something broken with the built file in dist/ folder in v2. With v1.3 it worked well.

I use ES modules everywhere and typescript (even though it failed in .js file as well).

Output from webpack build with --stats-error-details:

WARNING in ./node_modules/touchsweep/dist/touchsweep.js 3:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
    at CommonJsRequireContextDependency.getWarnings ([myproject]\node_modules\webpack\lib\dependencies\ContextDependency.js:102:18)
    at Compilation.reportDependencyErrorsAndWarnings ([myproject]\node_modules\webpack\lib\Compilation.js:3132:24)
    at [myproject]\node_modules\webpack\lib\Compilation.js:2729:28
    at eval (eval at create ([myproject]\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:29:1)
    at [myproject]\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:385:11
    at [myproject]\node_modules\neo-async\async.js:2830:7
    at Object.each ([myproject]\node_modules\neo-async\async.js:2850:39)
    at [myproject]\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:361:18
    at [myproject]\node_modules\neo-async\async.js:2830:7
    at Object.each ([myproject]\node_modules\neo-async\async.js:2850:39)
    at [myproject]\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:51:16
    at Hook.eval [as callAsync] (eval at create ([myproject]\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:25:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] ([myproject]\node_modules\tapable\lib\Hook.js:18:14)
    at Compilation.finish ([myproject]\node_modules\webpack\lib\Compilation.js:2714:28)
    at [myproject]\node_modules\webpack\lib\Compiler.js:1182:19
    at processTicksAndRejections (node:internal/process/task_queues:78:11)
 @ [somepath]/FlashMessage.ts 2:19-40
 @ [somepath]/index.js 8:0-67 53:2-14

[dakur]

On reddit, there is this error: https://www.reddit.com/r/typescript/comments/4q09uv/help_webpack_weirdness_require_function_is_used/

According to some comment there, the reason might be that there is module: "umd" is tsconfig.json instead of module: "commonjs". But I'm not quite familiar with js packages export settings, so I don't know what it actually does and what are the consequences. 🤷‍♂️

[scriptex]

Hi, @dakur, is it possible to paste your webpack config or at least provide a minimal reproducible example?

[dakur]

Hi @scriptex, thank you for your answer. I'm able to reproduce it with this minimal config:

module.exports = {
	entry: './index.js',
}

I've also removed .babelrc – even though there is no babel loader – to be sure that no other lib beside webpack is in effect with some magic. ✨

JS:

import TouchSweep from 'touchsweep';

new TouchSweep(document.getElementById('test'))

[scriptex]

🤔 I was able to reproduce this and to be honest, I am not sure why this happens.
It looks like Webpack doesn't like UMD produced by the TypeScript compiler...
Can you try adding the following to your Webpack config:

module: {
  unknownContextCritical: false,
},

Webpack's docs do not say much about this configuration setting, though.

[dakur]

Yes, unknownContextCritical: false does the job, but.. 🙂

The aforementioned reddit thread wasn't helpful? It seems to me that this could be the problem:

You need to tell Typescript to emit CommonJS, not UMD. UMD is doing funky stuff with the require function, passing it as an argument into factory. This means webpack can't look at all usages of the top-level require function and figure out exactly what modules you're loading.

It well corresponds to code in dist/ folder of touchsweep installed into my node_modules/ with v2:

[scriptex]

Okay, looks like I need to change the way the module is built. I guess I will try Vite or Rollup but I don’t have the time right now.
How critical is your situation? 😅

[dakur]

Not at all, I'll wait. Thank you very much!

[scriptex]

@dakur I've released a new version (2.0.1) on NPM and on Github.
The new release uses Rollup to build and (according to my tests) fixes the Webpack warning.
Please check and let me know 🙂
Thank you for your contribution!

[dakur]

Yes, that works very well now, thank you very much!