Next.js: Compiling with Warnings

Created on 21 Feb 2020  ยท  12Comments  ยท  Source: vercel/next.js

Bug report

Describe the bug

When building the project locally and on Now I'm getting these warnings:

Compiled with warnings.

./node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/require.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/require.js
Critical dependency: the request of a dependency is an expression

To Reproduce

1- Have a simple next.js app and try build

Expected behavior

No warnings

Screenshots

If applicable, add screenshots to help explain your problem.

System information

  • OS: macOS 10.14.6
  • Version of Next.js: Same issue on 9.2.1 and 9.2.3-canary.8
please add a complete reproduction

Most helpful comment

@timneutkens Not sure if this was addressed through some other issue, but if repro steps are needed to reopen this, I can repro this with nothing but the starter template (which pulls [email protected]).

Repro steps:

module.exports = {
  target: 'serverless',
}
  • npm run build

Result is:


Console output

Creating an optimized production build

Compiled with warnings.

./node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/require.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/require.js
Critical dependency: the request of a dependency is an expression

Automatically optimizing pages

Page                                                           Size     First Load JS
โ”Œ โ—‹ /                                                          6.95 kB          65 kB
โ”” โ—‹ /404                                                       3.15 kB        61.2 kB
+ First Load JS shared by all                                  58.1 kB
  โ”œ static/pages/_app.js                                       957 B
  โ”œ chunks/f55b18d155ba108da95e069adbd66fd30ee008df.82b733.js  10.5 kB
  โ”œ chunks/framework.0f140d.js                                 40 kB
  โ”œ runtime/main.235c69.js                                     5.95 kB
  โ”” runtime/webpack.b65cab.js                                  746 B

ฮป  (Lambda)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
โ—‹  (Static)  automatically rendered as static HTML (uses no initial props)
โ—  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

โœจ  Done in 7.42s.


Additional info:

I've been downgrading Next to see if I can see when this started happening, and I've observed that [email protected] seems to be the first version that is showing this issue ([email protected] logging no warnings).


Sounds expected, it means you're importing a library that uses expression requires. Warning can be ignored just fine. eg the dep will have something like this:

require(`./something/from/somewhere/${variable}`)

Unless this is expected from Next itself by default, it does not seem like a user added dependency is causing this, considering it can be reproed with the starter template?

Hopefully it's useful.

All 12 comments

So I noticed that this only happens with target: serverless.

Sounds expected, it means you're importing a library that uses expression requires. Warning can be ignored just fine. eg the dep will have something like this:

require(`./something/from/somewhere/${variable}`)

In the future please add a complete reproduction otherwise it's impossible for us to help you in a way that is productive.

@timneutkens Not sure if this was addressed through some other issue, but if repro steps are needed to reopen this, I can repro this with nothing but the starter template (which pulls [email protected]).

Repro steps:

module.exports = {
  target: 'serverless',
}
  • npm run build

Result is:


Console output

Creating an optimized production build

Compiled with warnings.

./node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/require.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/require.js
Critical dependency: the request of a dependency is an expression

Automatically optimizing pages

Page                                                           Size     First Load JS
โ”Œ โ—‹ /                                                          6.95 kB          65 kB
โ”” โ—‹ /404                                                       3.15 kB        61.2 kB
+ First Load JS shared by all                                  58.1 kB
  โ”œ static/pages/_app.js                                       957 B
  โ”œ chunks/f55b18d155ba108da95e069adbd66fd30ee008df.82b733.js  10.5 kB
  โ”œ chunks/framework.0f140d.js                                 40 kB
  โ”œ runtime/main.235c69.js                                     5.95 kB
  โ”” runtime/webpack.b65cab.js                                  746 B

ฮป  (Lambda)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
โ—‹  (Static)  automatically rendered as static HTML (uses no initial props)
โ—  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

โœจ  Done in 7.42s.


Additional info:

I've been downgrading Next to see if I can see when this started happening, and I've observed that [email protected] seems to be the first version that is showing this issue ([email protected] logging no warnings).


Sounds expected, it means you're importing a library that uses expression requires. Warning can be ignored just fine. eg the dep will have something like this:

require(`./something/from/somewhere/${variable}`)

Unless this is expected from Next itself by default, it does not seem like a user added dependency is causing this, considering it can be reproed with the starter template?

Hopefully it's useful.

Shouldn't this be reopened? I'm experiencing this issue as well.

My impression after reading the comments here is that building Next with target: serverless isn't considered as something most people would want to do. From the docs I gather this happens under the hood for deployments to Vercel and isn't otherwise recommended to do manually. So my guess is these warnings (or fixes for them) might not be high on the list of priorities right now? The actual fix would probably also depend heavily on the specific dependency throwing the warnings, so it wouldn't be a cure-all.

As someone who is looking into the possibility of deploying a Next app to AWS while still profiting from most of the benefits the framework offers, I am mainly interested in whether or not it is _safe_ to ignore these warnings or if something might actually break in certain situations.

We're definitely using Next.js with Serverless, via https://github.com/danielcondemarin/serverless-next.js

As said there is nothing to "fix" here, it's a warning that a certain file could not be bundled as per https://github.com/zeit/next.js/issues/10633#issuecomment-589937070. So it was treated as external by webpack.

@timneutkens Cheers for the reply.

With reference to that comment, I believe the wording of it is what caused the misunderstanding here.

I believe the reason we all continued to comment here is because that comment reads like: "You caused this, because you're doing this"

I understand what the warning is, however, with the above said I assumed you might not be expecting this to happen with a clean installation.

Hopefully we can agree that it's a bit unexpected for Next.js to present you with lengthy warnings you can't get rid of, by flipping the switch to serverless target on a minimal repro case.

Which is why I provided a clean repro and asked:

Unless this is expected from Next itself by default, it does not seem like a user added dependency is causing this, considering it can be reproed with the starter template?

Your reply now, while it doesn't explicitly address if this should be expected or not by default, the only thing I can do is assume in good faith that it is.

Hopefully that clarifies my intent a bit. Apologies for wasting your time.

@timneutkens If the end-user receives a warning, that implies the end-user should fix it. Similarly, if Next expects webpack to treat some files as externals, then Next shouldn't output the warnings. Because the convention is not to warn for expected behavior.

Imagine if npm install output Warning: Files and directories found! Wouldn't you find that concerning?

The serverless target as-is is not ideal in many cases, eg it bundles dependencies that are hard to bundle, hence why we started working on a new target called serverless-trace which does not bundle node_modules anymore and as such does not show this type of warning (as it literally does not bundle the deps that cause it).

Imagine if npm install output Warning: Files and directories found! Wouldn't you find that concerning?

npm is a bad example to make that point given that it shows a ton of non-actionable warnings and messages always.

In this case the warning (shown by webpack) is relaying that it's ignoring a certain file's dynamic require. It's more-so an information message but we currently just output webpack errors and warnings as-is.

I have tried this serverless_trace target and _still_ receive these warnings. Is it an error now?

https://github.com/vercel/next.js/pull/8246/files#diff-c1db2b4e0022a9cdf3a1c27b1af50c22R7

looks like the flag is experimental-serverless-trace actually, however i still received these warnings on next 9.5.1

Was this page helpful?
0 / 5 - 0 ratings

Related issues

timneutkens picture timneutkens  ยท  3Comments

YarivGilad picture YarivGilad  ยท  3Comments

knipferrc picture knipferrc  ยท  3Comments

havefive picture havefive  ยท  3Comments

renatorib picture renatorib  ยท  3Comments