CODEWITHSUNDEEP
javascriptnode.jswebpackbabeljs
doughsay
doughsay

Reputation: 316

When importing certain dependencies using webpack, I get 'Error: Cannot find module "."'

Using a minimal babel+webpack setup and including just one external dependency (ansi_up).

When compiling, I get a warning:

$ webpack
Hash: f9bff237cfd206599eed
Version: webpack 3.0.0
Time: 119ms
    Asset     Size  Chunks             Chunk Names
bundle.js  17.6 kB       0  [emitted]  main
   [0] ./main.js 80 bytes {0} [built]
   [2] ./node_modules/ansi_up 160 bytes {0} [built]
    + 1 hidden module

WARNING in ./node_modules/ansi_up/ansi_up.js
9:20-27 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

And then when running I get this error:

$ node bundle.js
/Users/chris/src/webpack-ansi-up/bundle.js:93
        v = factory(!(function webpackMissingModule() { var e = new Error("Cannot find module \".\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()), exports);
                                                                                                                                    ^

Error: Cannot find module "."
    at webpackMissingModule (/Users/chris/src/webpack-ansi-up/bundle.js:93:65)
    at subst (/Users/chris/src/webpack-ansi-up/bundle.js:93:143)
    at Object.webpackEmptyContext.keys (/Users/chris/src/webpack-ansi-up/bundle.js:107:3)
    at __webpack_require__ (/Users/chris/src/webpack-ansi-up/bundle.js:20:30)
    at Object.<anonymous> (/Users/chris/src/webpack-ansi-up/bundle.js:72:66)
    at __webpack_require__ (/Users/chris/src/webpack-ansi-up/bundle.js:20:30)
    at Object.defineProperty.value (/Users/chris/src/webpack-ansi-up/bundle.js:63:18)
    at Object.<anonymous> (/Users/chris/src/webpack-ansi-up/bundle.js:66:10)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)

Example repo is here: https://github.com/doughsay/webpack-question

What's wrong with this dependency that causes it to misbehave like this? And is there anything I can do as the importer to fix this, or does it have to be fixed on the dependency's end?

EDIT: to clarify, I'm just using node here to clearly show the error; I'm actually planning on using the bundle in a browser. The same issue shown here happens in the browser as well.

Upvotes: 0

Views: 1373

Answers (1)

loganfsmyth
loganfsmyth

Reputation: 161457

The error is happening because Webpack can't figure out what to do with this library. This fix would be to ask the library author to follow the common UMD pattern. Current ansi_up is close but not quite right.

https://github.com/drudru/ansi_up/blob/29ce78cf55cc87e8f221fc0f28150fa293a9c3e3/ansi_up.js#L20

should not be passing in the require function like that. By passing it in, Webpack becomes unable to reason about what dependencies the module uses. Since Webpack can't figure it out, it injects code to trigger an error instead.

An example of a bettern UMD pattern can be found in https://github.com/umdjs/umd/blob/master/templates/commonjsStrict.js

Note that require is called, but the function itself is never passed as an argument anywhere.

Upvotes: 1

Related Questions