Next.js deploy fails on webpack build

Support
, ,
1

I need advice to debug deploy Netlify App

Repo: feat/add poshmark by nrodriguez · Pull Request #16 · nrodriguez/looter-io · GitHub

2

To be clear locally yarn build works fine

Here is the updated debug deploy: Netlify App

The part that stands out to me is:

11:45:38 PM: 
11:45:38 PM: ./node_modules/clone-deep/utils.js
11:45:38 PM: Cannot statically analyse 'require(…, …)' in line 11
11:45:38 PM: > Build error occurred
11:45:38 PM: Error: > Build failed because of webpack errors
11:45:38 PM:     at /opt/build/repo/node_modules/next/dist/build/index.js:397:19
11:45:38 PM:     at async Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/telemetry/trace/trace.js:60:20)
11:45:38 PM:     at async Object.build [as default] (/opt/build/repo/node_modules/next/dist/build/index.js:77:25)

But I can’t seem to trace any errors to it

3

Hey there, @JustNeph :wave:

Thanks so much for reaching out, and welcome to the Netlify Forums.

I am wondering if you have seen this Support Guide on case sensitivity that we have? Case sensitivity has been the cause of Next.js and webpack failures previously (see here for a related thread!)

If that doesn’t do the trick, I suggest looking into the thread below:

Hopefully these get you on the right track. Let us know!

4

Hi, thanks for the response!

I’ve checked against the two resources you’ve linked but my issue doesn’t seem to be related to either. I might be missing something perhaps? I’ve linked my code in my repo above so I’m open to seeing if there are any glaring issues with netlify and my code I’m not aware of

6

Hey there, @JustNeph :wave:

I’ve taken this case to some of our Nextjs folks, and the next step here that would be the most beneficial would be filing an issue on our repo: GitHub - netlify/next-runtime: The Next.js Runtime allows Next.js to run on Netlify with zero configuration . This will get your issue directly in front of the team that will be working on this, as it is now a bit beyond my area of expertise.

Once you open that issue, I ask that you share it here on this thread so that any future Forums members who encounter something similar can learn from this as well!

Thanks so much :netlisparkles:

7

I’ve opened an issue here: Netlify Deploy fails on next build due to a webpack error · Issue #656 · netlify/next-runtime · GitHub

1 Like
8

Hi @JustNeph

After a little digging around I found this documentation on Layer0, and this post on Stack Overflow. I cloned your git repository and by using an answer from the latter I added

module.exports = {
  // Note: no `future` key here
  webpack5: false,
}

to the next.config.js (forcing use of webpack 4) then deployed again. I got passed the previous DEP_WEBPACK_SINGLE_ENTRY_PLUGIN error, however the build stopped on

./public/logo.png
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

This error also occurs when building locally, so is not a Netlify issue. Here is a (now closed) issue on the subject of imports Can’t import static files like images #1935 which I believe implies using modifying the babelrc for this.

Bear in mind you have the Next.js version in your package.json set to latest and there is a warning

Using Next.js 11.1.2
Warning: support for Next.js >=11.1.0 is experimental
9

Hm, I’m a bit confused because locally running yarn build works fine as does running the application using yarn dev.

I also have that same image on my main branch which has been successfully deployed.

I guess I’m not sure I understand the correlation of why webpack5 is an issue now and wasn’t before?

For reference here is a successful recent build using the latest Next.js version and webpack5: Netlify App

10

I don’t have a definitive answer (not deeply familiar with webpack or Next.js) if I compare the successful and unsuccessful logs you posted I see

Successful:

warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
at Function.getChunkGraphForChunk (/opt/build/repo/node_modules/next/dist/compiled/webpack/bundle5.js:41129:10)
at Chunk.hasEntryModule (/opt/build/repo/node_modules/next/dist/compiled/webpack/bundle5.js:38801:15)

Unsuccessful:

warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
(node:1381) [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use new ChunkGraph API

This suggests to me that while the version number hasn’t changed, something in the code has. It also appears some dependencies in your package.json have changed from main to branch, which may also have an impact.

11

So some updates.

The initial issues of this post were resolved using a different deploy target (Netlify Deploy fails on next build due to a webpack error · Issue #656 · netlify/next-runtime · GitHub)

module.exports = {
  generateBuildId: () => 'build',
  target: 'experimental-serverless-trace'
}

I also had to update my netlify.toml to use esbuild

This then brought the issue of chromium in puppeteer being too large for netlify to build. This was resolved with the netlify plugin netlify-plugin-chromium

netlify.toml

[functions]
  # Specifies `esbuild` for functions bundling
  node_bundler = "esbuild"
  external_node_modules = [
    "puppeteer-extra", 
    "next", 
    "sharp", 
    "@ampproject/toolbox-optimizer",
  ]
[[plugins]]
  package= "netlify-plugin-chromium"
    [plugins.inputs]
      packageManager = "yarn"
      setChromePathInEnv = "true"
      failBuildOnError = "true"

My builds are now successful, however, I keep getting an error that only surfaces on netlify and not when I run locally. To be clear if I run netlify dev locally I also see the issue but if I run yarn dev I do not

{
  "errorType": "Runtime.UnhandledPromiseRejection",
  "errorMessage": "Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.",
  "trace": [
    "Runtime.UnhandledPromiseRejection: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:",
    "1. You might have mismatching versions of React and the renderer (such as React DOM)",
    "2. You might be breaking the Rules of Hooks",
    "3. You might have more than one copy of React in the same app",
    "See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.",
    "    at process.<anonymous> (/var/runtime/index.js:35:15)",
    "    at process.emit (events.js:314:20)",
    "    at processPromiseRejections (internal/process/promises.js:209:33)",
    "    at processTicksAndRejections (internal/process/task_queues.js:98:32)"
  ]
}

Any ideas?

12

To me, the error message looks like a React error and would seem like a problem with the code. Have you tried the link the error suggests:

See Rules of Hooks – React

13

I have and I’ve even installed the suggested linting plugin. To be clear this issue does not occur locally. This issue only occurs on Netlify.

1 Like
15

Hey there, @JustNeph :wave:

Thanks for following up! As this issue involves our team that specializes in Next.JS, we will continue supporting you on the open issue you linked above. Thanks so much :slight_smile: