Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

next build fails with webpack error #25276

Closed
dhay opened this issue May 19, 2021 · 25 comments · Fixed by #25340
Closed

next build fails with webpack error #25276

dhay opened this issue May 19, 2021 · 25 comments · Fixed by #25340
Milestone

Comments

@dhay
Copy link

dhay commented May 19, 2021

What version of Next.js are you using?

10.2.1

What version of Node.js are you using?

14.16.0

What browser are you using?

n/a

What operating system are you using?

MacOS, Linux

How are you deploying your application?

AWS

Describe the Bug

When attempting to do a build with next build I get the following error. With next 10.2.0, the error does not appear.

info  - Checking validity of types  
info  - Using external babel configuration from /var/www/sites/customer-ui/.babelrc.js
info  - Creating an optimized production build  
Failed to compile.

chunk webpack [entry]
Cannot read property 'asString' of undefined


> Build error occurred
Error: > Build failed because of webpack errors
    at /var/www/sites/customer-ui/node_modules/next/dist/build/index.js:17:924
    at async Span.traceAsyncFn (/var/www/sites/customer-ui/node_modules/next/dist/telemetry/trace/trace.js:6:584)

Oddly enough, this doesn't happen when running the build on MacOS...it only occurs when running in our node:14.15.0-alpine docker container.

Expected Behavior

A clean build.

To Reproduce

next build

I'm unsure what to provide to reproduce the error. The message doesn't give a good indication of where the problem exists or what I might do to provide a minimal project that exercises the issue.

@dhay dhay added the bug Issue was opened via the bug report template. label May 19, 2021
@mauriciocarnieletto
Copy link

mauriciocarnieletto commented May 19, 2021

This is happen to me as well

What version of Next.js are you using?
^10.0.2 (10.2.1)

What version of Node.js are you using?
14.16.0 as whell

What browser are you using?
n/a

What operating system are you using?
MacOS, Linux

How are you deploying your application?
Azure

Describe the Bug

warn - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11. Read more: https://nextjs.org/docs/messages/react-version
info - Loaded env from/next/next-me-v2/.env.production
info - Loaded env from/www/next/next-me-v2/.env
info - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
info - Using external babel configuration from /home/mauricio/www/next/next-me-v2/.babelrc.js
info - Creating an optimized production build
Failed to compile.

chunk webpack [entry]
Cannot read property 'asString' of undefined

Build error occurred
Error: > Build failed because of webpack errors
at nextBuildSpan.traceAsyncFn /www/next/next-me-v2/node_modules/next/dist/build/index.js:17:924)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I've downgraded my next version to 10.2.0 and it seems to be working.

@DTrafford
Copy link

Also experiencing this. Any ideas as too what is going on? Or how to resolve

@ykzts
Copy link
Contributor

ykzts commented May 20, 2021

This problem can be solved by adding future: { webpack5: true } to next.config.js and enabling webpack5. Probably a compatibility issue between webpack4 and webpack5.

@meandillar
Copy link

I'm using webpack 4 and started receiving this error today in my monorepo after updating next.

Fixed it for now by using "next": "10.2.0" instead of "next": "^10.2.0" (notice the absence of ^) in my dependencies and peerDependencies where appropriate.

@gu-stav
Copy link

gu-stav commented May 20, 2021

Upgrading to webpack@5 helps too in my case. However, if you are using preact, you are going to run into another new problem afterwards: preactjs/next-plugin-preact#22 (comment)

@paescuj
Copy link

paescuj commented May 20, 2021

Similar error happens to me as well. But I'm using Webpack v5 and in my case the error appears only in dev mode (npm run dev):

What version of Next.js are you using?

10.2.2

What version of Node.js are you using?

16.1.0

What browser are you using?

Firefox

What operating system are you using?

macOS Big Sur 11.3.1

How are you deploying your application?

Locally

Describe the Bug

Getting the following error when running npm run dev:

error - webpack/runtime/compat
The "path" argument must be of type string. Received undefined

The corresponding page is using path.join but I'm not sure if this is related.

No issue with Next.js 10.2.0

@timneutkens
Copy link
Member

Please provide a reproduction so that we can investigate this.

@SinimaWath
Copy link
Contributor

SinimaWath commented May 20, 2021

@timneutkens Hi check this repo https://github.com/SinimaWath/next-dynamic-css

That bug appears only with dynamic Components in project.

Edit: And it seems because of this PR https://github.com/vercel/next.js/pull/24573/files @sokra.

Without CSS in dynamic chunks, build works fine

@kaioduarte
Copy link

I have this error when building with webpack 4

chunk webpack [entry]
Cannot read property 'asString' of undefined

With webpack 5 it works correctly in dev and it builds, but some pages don't load with the built version. On Next.js 10.2.0 it's fine both with webpack 4 and 5.

@SinimaWath
Copy link
Contributor

I have tried to fix that bug in mini-css-extract-plugin webpack-contrib/mini-css-extract-plugin#759

As i understand - the main problem is webpack4 has different interface than webpack 5

@sokra @timneutkens @ijjk

@luknl
Copy link

luknl commented May 21, 2021

Migrating to webpack 5 worked for me too, as explained here.
Also, if you have a custom webpack config on your next.config.js, you'll have to upgrade it like this 👍

@paescuj
Copy link

paescuj commented May 21, 2021

@timneutkens

In my case I'm using a web worker, similar to the with-web-worker example. The web worker file (worker/search.js) imports functions from another local file like this:

import { getIndexRange, getTextItemWithNeighbors } from '../lib/search';

Which then results in the mentioned error with Next.js >=10.2.1:

error - webpack/runtime/compat
The "path" argument must be of type string. Received undefined

I'm able to (temporarily) resolve this error by in-lining the functions directly in the web worker file (worker/search.js).

It was working with Next.js 10.2.0.
Should I open up a separate issue for this?
Thanks!

@Socratesdhiren
Copy link

Actually, I got the same issue when the version on Next is 10.1.3 and downgrade the version to 10.0.2. And then it works fine for me. Previously I am not able to build even on my local and same for deploy on server.

@timneutkens timneutkens added kind: bug and removed bug Issue was opened via the bug report template. labels May 22, 2021
@nemanja-tosic
Copy link

I still got the issue on v10.2.3:

info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
info  - Skipping validation of types  
info  - Creating an optimized production build  
Failed to compile.

webpack/runtime/compat
The "path" argument must be of type string. Received undefined


> Build error occurred
Error: > Build failed because of webpack errors

The error goes away after i comment out some imports from a worker. That being said, the with-web-worker example works with an import from the worker, so it's something to do with the imported files in our project. Everything is working on 10.1.3 though.

@timneutkens
Copy link
Member

Please try next@canary

@paescuj
Copy link

paescuj commented May 25, 2021

@timneutkens Hmm, @nemanja-tosic is already on v10.2.3 and there are no (related) changes in canary. Btw. I have the same issue - see #25276 (comment).

@timneutkens
Copy link
Member

Can you open a new issue for that case, as it's different than the one fixed here 👍

@paescuj
Copy link

paescuj commented May 26, 2021

@timneutkens Thanks, will do in a few minutes! 👍

@paescuj
Copy link

paescuj commented May 26, 2021

See #25484 for next dev issue with web worker imports

@artkabis
Copy link

artkabis commented Aug 27, 2021

future: { webpack5: true }

future.webpack5 has been moved to webpack5

// next.config.js
module.exports = {
future: {
webpack5: false,
},
}

To :
// next.config.js
module.exports = {
webpack5: false,
}

@barhouum7
Copy link

barhouum7 commented Sep 5, 2021

I have the same issue, anyone was able to fix it?
When running this command npm run build --debug, I get this error below

> [email protected] build
> next build

info  - Using webpack 4. Reason: webpack5 flag is set to false in next.config.js https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  

warn - Tailwind is not purging unused styles because no template paths have been provided.
warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.
warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
info  - Creating an optimized production build  
Failed to compile.

Error: Expected an opening square bracket.


> Build error occurred
Error: > Build failed because of webpack errors
    at E:\2021-AllBackUps\2021-DesktopBackUp\My-GitHub-Repos\MyPurebredRepos\jamstack-authn-todo-app\node_modules\next\dist\build\index.js:397:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Span.traceAsyncFn (E:\2021-AllBackUps\2021-DesktopBackUp\My-GitHub-Repos\MyPurebredRepos\jamstack-authn-todo-app\node_modules\next\dist\telemetry\trace\trace.js:60:20)
    at async Object.build [as default] (E:\2021-AllBackUps\2021-DesktopBackUp\My-GitHub-Repos\MyPurebredRepos\jamstack-authn-todo-app\node_modules\next\dist\build\index.js:77:25)

I'm stuck with this error -> Error: Expected an opening square bracket.

HookWebpackError: Expected an opening square bracket., when using Webpack 5

@barhouum7
Copy link

I have the same issue, anyone was able to fix it?
When running this command npm run build --debug, I get this error below

> [email protected] build
> next build

info  - Using webpack 4. Reason: webpack5 flag is set to false in next.config.js https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  

warn - Tailwind is not purging unused styles because no template paths have been provided.
warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.
warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
info  - Creating an optimized production build  
Failed to compile.

Error: Expected an opening square bracket.


> Build error occurred
Error: > Build failed because of webpack errors
    at E:\2021-AllBackUps\2021-DesktopBackUp\My-GitHub-Repos\MyPurebredRepos\jamstack-authn-todo-app\node_modules\next\dist\build\index.js:397:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Span.traceAsyncFn (E:\2021-AllBackUps\2021-DesktopBackUp\My-GitHub-Repos\MyPurebredRepos\jamstack-authn-todo-app\node_modules\next\dist\telemetry\trace\trace.js:60:20)
    at async Object.build [as default] (E:\2021-AllBackUps\2021-DesktopBackUp\My-GitHub-Repos\MyPurebredRepos\jamstack-authn-todo-app\node_modules\next\dist\build\index.js:77:25)

I'm stuck with this error -> Error: Expected an opening square bracket.

HookWebpackError: Expected an opening square bracket., when using Webpack 5

Heyy guys, never mind, I was able to solve this error by adding purge: ['./components//*.{js,ts,jsx,tsx}', './pages//*.{js,ts,jsx,tsx}'], to my tailwind.config.js, just after this, build successful and compiled successfully

@suprim12
Copy link

suprim12 commented Oct 30, 2021

for me it was f*** node version, was using latest 17.0.1 fixed with nvm to downgrade node to 16.13.0(lts)

@BigSully
Copy link

BigSully commented Dec 31, 2021

Issue disappeared after upgrading next.js to 11.1.3 from 9.5.3

@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.