Next.js: Bug Compiling webpackbar

Created on 10 Nov 2018 · 15Comments · Source: vercel/next.js

Bug report

Describe the bug

When i try to compile on Ubuntu 16.04 i got this:

````
Compiling

● client

● server █████████████████████████ compiling (0%)

/home/ubuntu/website/node_modules/next/node_modules/webpackbar/node_modules/webpack/lib/ProgressPlugin.js:205
compilation.hooks.addEntry.tap("ProgressPlugin", entryAdd);
^

TypeError: Cannot read property 'tap' of undefined
at compiler.hooks.compilation.tap.compilation (/home/ubuntu/website/node_modules/next/node_modules/webpackbar/node_modules/webpack/lib/ProgressPlugin.js:205:32)
at SyncHook.eval [as call] (eval at create (/home/ubuntu/website/node_modules/tapable/lib/HookCodeFactory.js:19:10), :9:1)
at SyncHook.lazyCompileHook (/home/ubuntu/website/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.newCompilation (/home/ubuntu/website/node_modules/next/node_modules/webpack/lib/Compiler.js:498:26)
at hooks.beforeCompile.callAsync.err (/home/ubuntu/website/node_modules/next/node_modules/webpack/lib/Compiler.js:534:29)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ubuntu/website/node_modules/tapable/lib/HookCodeFactory.js:32:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (/home/ubuntu/website/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.compile (/home/ubuntu/website/node_modules/next/node_modules/webpack/lib/Compiler.js:529:28)
at compiler.hooks.watchRun.callAsync.err (/home/ubuntu/website/node_modules/next/node_modules/webpack/lib/Watching.js:77:18)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ubuntu/website/node_modules/tapable/lib/HookCodeFactory.js:32:10), :24:1)
at AsyncSeriesHook.lazyCompileHook (/home/ubuntu/website/node_modules/tapable/lib/Hook.js:154:20)
at Watching._go (/home/ubuntu/website/node_modules/next/node_modules/webpack/lib/Watching.js:40:32)
at Watching.compiler.readRecords.err (/home/ubuntu/website/node_modules/next/node_modules/webpack/lib/Watching.js:32:9)
at Array.inputFileSystem.stat.err (/home/ubuntu/website/node_modules/next/node_modules/webpack/lib/Compiler.js:401:20)
at Storage.finished (/home/ubuntu/website/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
at provider (/home/ubuntu/website/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
error Command failed with exit code 1.
````

To Reproduce

put "webpack": "^4.25.1" in your package.json at dependencies
next build

Expected behavior

Compiling...

System information

OS: Ubuntu 16.04
Version of Next.js: 7.0.2

Source

djodjo02130

👍1

Most helpful comment

For my temporary solution (at least until zeit fix it)
in my package.json file I remove "^" character for webpack module.
ex:
"webpack": "^4.23.1"
become
"webpack": "4.23.1"

Note:
make sure you also not use webpack 4.25.1, (use lower version instead)

yunardopatra on 15 Nov 2018

👍5 🎉1

All 15 comments

You shouldn't install "webpack" yourself, it's a dependency on Next.js. I'm beginning to think we might have to soft/hard fail when users do this, it makes no sense to add it and can only cause issues.

timneutkens on 10 Nov 2018

👍3 👎2 😕1

@timneutkens what if we migrating existing project from static to SSR with NextJS and we still need webpack separately to build most of the pages and serve them just as static without executing on server?

egemon on 12 Nov 2018

In that case I'd create a subdirectory with a separate package.json, so that deps are guaranteed not to conflict.

timneutkens on 12 Nov 2018

I'm going to close this issue as there is no reproduction provided.

timneutkens on 12 Nov 2018

Bug report

Describe the bug

When i try to compile on Ubuntu 16.04 i got this:

● client

● server █████████████████████████ compiling (0%)


/home/ubuntu/website/node_modules/next/node_modules/webpackbar/node_modules/webpack/lib/ProgressPlugin.js:205
                                compilation.hooks.addEntry.tap("ProgressPlugin", entryAdd);
                                                           ^

TypeError: Cannot read property 'tap' of undefined
    at compiler.hooks.compilation.tap.compilation (/home/ubuntu/website/node_modules/next/node_modules/webpackbar/node_modules/webpack/lib/ProgressPlugin.js:205:32)
    at SyncHook.eval [as call] (eval at create (/home/ubuntu/website/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:9:1)
    at SyncHook.lazyCompileHook (/home/ubuntu/website/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/home/ubuntu/website/node_modules/next/node_modules/webpack/lib/Compiler.js:498:26)
    at hooks.beforeCompile.callAsync.err (/home/ubuntu/website/node_modules/next/node_modules/webpack/lib/Compiler.js:534:29)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ubuntu/website/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/ubuntu/website/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/home/ubuntu/website/node_modules/next/node_modules/webpack/lib/Compiler.js:529:28)
    at compiler.hooks.watchRun.callAsync.err (/home/ubuntu/website/node_modules/next/node_modules/webpack/lib/Watching.js:77:18)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ubuntu/website/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (/home/ubuntu/website/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._go (/home/ubuntu/website/node_modules/next/node_modules/webpack/lib/Watching.js:40:32)
    at Watching.compiler.readRecords.err (/home/ubuntu/website/node_modules/next/node_modules/webpack/lib/Watching.js:32:9)
    at Array.inputFileSystem.stat.err (/home/ubuntu/website/node_modules/next/node_modules/webpack/lib/Compiler.js:401:20)
    at Storage.finished (/home/ubuntu/website/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
    at provider (/home/ubuntu/website/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
error Command failed with exit code 1.

To Reproduce

put "webpack": "^4.25.1" in your package.json at dependencies
next build

Expected behavior

Compiling...

System information

OS: Ubuntu 16.04
Version of Next.js: 7.0.2

hi,
this issue was fixed?
how can resolve ?
thx

pengshaosu on 13 Nov 2018

I use the word reproduction way too much 😅

I'm going to close this issue as there is no reproduction provided.

timneutkens on 13 Nov 2018

I use the word reproduction way too much

I'm going to close this issue as there is no reproduction provided.

"reproduction", i get it.
i have fixed my issue, reason of low node.js version.

pengshaosu on 14 Nov 2018

For my temporary solution (at least until zeit fix it)
in my package.json file I remove "^" character for webpack module.
ex:
"webpack": "^4.23.1"
become
"webpack": "4.23.1"

Note:
make sure you also not use webpack 4.25.1, (use lower version instead)

yunardopatra on 15 Nov 2018

👍5 🎉1

I also facing the same issue when upgraded the webpack to 4.25.x, shall this issue be fixed on next release?

baoduy on 17 Nov 2018

I also facing the same issue when upgraded the webpack to 4.26.x

YufJi on 21 Nov 2018

I also facing the same issue when upgraded the webpack to 4.26.x

Do not install webpack yourself it's a dependency of Next.js and there is no reason you'd have to manually install it.

Every time someone posts "but I installed webpack and it broke" we get closer to the point where I'm thinking Next.js will have to bail out when detecting webpack in package.json.

timneutkens on 21 Nov 2018

What if you need to add a webpack builtin plugin to next.config.js?

There are many reasons someone might want webpack in their codebase when
using next.js.

On Wed 21. Nov 2018 at 09:30, Tim Neutkens notifications@github.com wrote:

I also facing the same issue when upgraded the webpack to 4.26.x

Do not install webpack yourself it's a dependency of Next.js and there
is no reason you'd have to manually install it.

Every time someone posts "but I installed webpack and it broke" we get
closer to the point where I'm thinking Next.js will have to bail out when
detecting webpack in package.json.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/zeit/next.js/issues/5650#issuecomment-440578443, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AARLRc-A8zJN9pjsAkdqH8J2kxBPS76Rks5uxQ8MgaJpZM4YXx4H
.

vjpr on 21 Nov 2018

👍3

@vjpr I guess we could pass in the webpack module from Next.js into webpack()

Installing webpack yourself is kind of a guarantee for things to break, as there might be multiple versions of plugins etc be executed. Not to mention installing webpack 2 times causes the install time / size of your project to be ~18MB larger.

timneutkens on 21 Nov 2018

I've just stumbled across this issue after installing Docz into a next project to handle my component documentation 😢

I haven't manually installed webpack, but this is still an issue if you depend on another framework that has its own webpack tooling. It would be nice if Docz and Next played nice together.

KingScooty on 22 Nov 2018

👍1

I've just stumbled across this issue after installing Docz into a next project to handle my component documentation 😢

I haven't manually installed webpack, but this is still an issue if you depend on another framework that has its own webpack tooling. It would be nice if Docz and Next played nice together.

I had the same problem. Upgrading to next@canary works for me.