next build fails with webpack error

[dhay]

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.

[mauriciocarnieletto]

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]

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

[ykzts]

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]

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]

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]

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]

Please provide a reproduction so that we can investigate this.

[SinimaWath]

@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]

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]

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]

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]

@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]

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.

[nemanja-tosic]

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]

Please try next@canary

[paescuj]

@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]

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

[paescuj]

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

[paescuj]

See #25484 for next dev issue with web worker imports

[artkabis]

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]

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

> jamstack-authn-todo-app@0.1.0 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]

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

> jamstack-authn-todo-app@0.1.0 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]

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]

Issue disappeared after upgrading next.js to 11.1.3 from 9.5.3

[balazsorban44]

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.