Webpack: "require function is used in a way in which dependencies cannot be statically extracted"

[Mikurox]

[X] Bug

CountUp.js version: v2.0.0

Description

• Building the application with webpack, I get the following warning in the output logs: WARNING in ./node_modules/countUp.js/dist/countUp.min.js 1:328-335 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[Mikurox]

I'm using CountUp by doing: import { CountUp } from 'countUp.js'; then later the new signature methods: this.countUp = new CountUp('gold-counter-id', goldCount); this.countUp.start(); ... this.countUp.update(newCount);

I just noticed the above warning which is never good to have but it works normally otherwise.

I'd like to say though that this library is awesome, thanks for everything, it's just so smooth, other libraries can't beat that ;-)

[inorganik]

Hmm. I found this: https://github.com/webpack/webpack/issues/2675

Can you explain more about your build setup? What version of webpack, ts vs js, things like that?

In demo.ts, (in same dir as countUp.ts) I am importing countUp and in the demo html I have a script tag for require and it's data-main attribute points to the transpiled demo.js. That's all I had to do and it works without errors.

It is a little different though now, because before 2.0, I used gulp-wrap-umd to wrap it in a UMD module and it exposed CountUp as a global. Now typescripts wraps it and it does it in such a way that CountUp is not exposed as a global.

Wonder if you could try something... in tsconfig.json, change the module to commonjs and then do npm run build, and try using the common js module wrapped file instead and see if that fixes it for you. Also check out that issue I linked from webpack and see if that helps.

Also thanks for the kind words :)

[hraboviyvadim]

@inorganik Hi! I've got the same problem: WARNING in ./node_modules/countUp.js/dist/countUp.min.js 1:328-335 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted I'm using latest Laravel Mix for assets compilation. Beside this, I have error in browser console when trying to import this module: Uncaught Error: Cannot find module "."

[hraboviyvadim]

update: I've tried to change umd to commonjs and it works.

[inorganik]

Ok. Sounds like I need to change module to commonjs.

[inorganik]

@hraboviyvadim could you please check if amd module wrapping works with webpack?

[hraboviyvadim]

@inorganik I took countUp.js from /dist and put it directly in my project and then imported it like this: import { CountUp } from "../vendors/countUp"; And it works without any errors/warnings in console.

[inorganik]

@hraboviyvadim thanks. was this with the module wrapping it has currently or another module wrapping?

[hraboviyvadim]

I'm not sure if I understand your question correctly, but I used countUp.js which I've got after changing "module": "umd" to "module": "commonjs" in tsconfig.json

[inorganik]

Gotcha. Could you please try this: in tsconfig.json change module to "amd", then run npm run build, and see if you are able to build your project?

On Tue, Feb 26, 2019 at 7:20 AM Vadym Grabovyi notifications@github.com wrote:

I'm not sure if I understand your question correctly, but I used countUp.js which I've got after changing "module": "umd" to "module": "commonjs" in tsconfig.json

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/inorganik/countUp.js/issues/210#issuecomment-467456055, or mute the thread https://github.com/notifications/unsubscribe-auth/AAGr8cSF9vIVt4swvsd6maPVb0NEppKIks5vRUK6gaJpZM4bJmbs .

[hraboviyvadim]

It still works with amd. The only one thing - I had to exclude countUp.js from ESLint, because it produces error: ../../countUp.js 12:1 error 'define' is not defined no-undef But it could be a problem from my side.

[inorganik]

In that case I would like to change the module wrapping to AMD and cut another release. Although we know commonjs works well with webpack, it's a node module wrapper and not optimized for browser usage... I was not able to use it in my demo with just requirejs. I'm sure if I googled and troubleshooted long enough I'd eventually figure out a way but it shouldn't be that hard for everyone else. AMD works well with just requirejs; in fact requirejs recommends AMD. So if it's compatible with webpack lets go with AMD. I'll close after I release with AMD.

[inorganik]

2.0.1 now wraps with AMD module.

[CPelletier]

Hi sorry, I still got an error when I build with webpack 4. I'm using 2.0.1.

I use import { CountUp } from 'countup.js' in my component, and it's working without any errors. But when I try to generate a build, I got this :

ERROR   /                                                                                                                                               17:28:33

ReferenceError: define is not defined
    at Object.<anonymous> (/node_modules/countup.js/dist/countUp.min.js:1:309)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at /node_modules/vue-server-renderer/build.prod.js:1:76965
    at Object.<anonymous> (webpack/bootstrap:2:0)
    at n (webpack/bootstrap:2:0)
    at Module.23 (pages/index.vue:1:0)
    at n (webpack/bootstrap:2:0)
    at <anonymous>

I'm using Nuxt 2.4.

[inorganik]

Does this help at all? It seems like @hraboviyvadim was able to get his webpack setup to successfully include an AMD module. Maybe he can shed some light.... PRs welcome for anyone who wants to add documentation for including CountUp with webpack.

https://webpack.js.org/api/module-methods/#amd

[CPelletier]

Sorry to bother you, I was just asking a question and let you know there is a problem with webpack when you generate a static website using Nuxt. Your library is great, I've used it in many projects, I was just disappointed it doesn't work in the project I'm working on. I keep on searching, I'll let you know if I found something.

[inorganik]

No worries I want it to be compatible for as many people as possible. For now you can simply pin the version at 1.9.3

[hraboviyvadim]

@CPelletier I got this error from ESLint and fixed it after adding ignore rule for whole file. But after install version 2.0.1 it just works good without any errors

[inorganik]

FYI all, I switched the module (again, sheesh) to commonjs in v2.0.2.