Warning when using with webpack

[fantapop]

I'm importing https://github.com/sindresorhus/got/ into my project and using webpack to build. Webpack doesn't like requiring of expressions:

WARNING in ./node_modules/keyv/src/index.js
18:14-40 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/keyv/src/index.js
 @ ./node_modules/cacheable-request/src/index.js
 @ ./node_modules/got/index.js
 @ ./lib/util.js
 @ ./functions/live-stream.js

I'm not sure what the best way to fix this up with would be

[lukechilds]

Does it work?

[fantapop]

It still seems to work. I haven't verified the code path it takes. I can look into that. It makes the warning during build. It looked like the pluggable back end may have been opt in so I was assuming there was a default.

…

On Thu, Jan 25, 2018 at 3:31 AM Luke Childs ***@***.***> wrote: Does it work? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#45 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGWbqPo2-fScIvtSdvElZxnsD7crqk4_ks5tOGX_gaJpZM4RsfYu> .

[lukechilds]

It should work absolutely fine as long as you're not including native Node.js storage adapters.

The Webpack warning is exactly that a warning, it's letting you know that one of your dependencies is requiring a dependency via an expression.

This is generally bad practice and will probably break static analysis but it's the only way to transparently require storage adapters.

It should be totally safe to ignore for now.

[roblav96]

@fantapop @lukechilds What's the recommended quick fix to remove the warnings from my console? I run a tight ship 📦:P

[lukechilds]

Close your eyes while the warning's on the screen.

[sindresorhus]

This has just another bad Webpack UX. I would recommend complaining on their issue tracker: webpack/webpack#196

[fantapop]

I've been using the close my eyes method...

…

On Tue, Mar 6, 2018 at 9:06 PM, Sindre Sorhus ***@***.***> wrote: This has just another bad Webpack UX. I would recommend complaining on their issue tracker: webpack/webpack#196 <webpack/webpack#196> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#45 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGWbqNEyi_Coy3ZrA8A0D1l17w2Kx80Kks5tb2rQgaJpZM4RsfYu> .

[Tobbe]

Don't know if this is good or bad, but I added this to my webpack config to get rid of the warning

plugins: [
  new webpack.ContextReplacementPlugin(/keyv/),
],

[transitive-bullshit]

It turns out this isn't a wholly innocuous warning.

If you're using Next.js on Vercel, as part of their build optimizations for serverless functions (like dynamic page rendering), they trace module imports to remove as much unused code as possible.

It took me awhile to realize that while I'm using keyv with next.js v12 (and webpack v5) locally, everything would build and work fine, but when deployed to Vercel, any page renders or api calls would throw errors because next.js failed to find the expression-based @keyv/redis import.

If anyone else ends up here tracking this issue down, here was my fix: transitive-bullshit/nextjs-notion-starter-kit@2226296

While I can understand keyv's design choice to have a simpler, implicit API, and while you could certainly argue that Next.js's behavior is aggressive, it's honestly a pretty common use case these days — and one that I think will only become more common in the future.

[transitive-bullshit]

https://github.com/microlinkhq/keyv by @Kikobeats appears to fix this issue, but upstream dependents like https://github.com/lukechilds/cacheable-request (which is used by got) would need to change. Or this package would need to update its API in the same way that @keyvhq/core has.

Either way, I think this is worth fixing as it is definitely affecting anyone using got with Next.js.

[Kikobeats]

@transitive-bullshit

Although @keyvhq/core fix the thing, there are still place where the dependency will be not used (like cacheable-request sub-dependencies tree).

For these situations, you can declare a NPM override at your package.json 🙂

"overrides": {
    "cacheable-request": {
      "keyv": "npm:@keyvhq/core@~1.6.6"
    }
  }

[nickluger]

I use this package transitively via got and see this issue only, since got upgraded indirectly to 4.5.0 of keyv. 🤷‍♂️

[AuthorOfTheSurf]

In my case I needed to update my badly-outdated @auth0/nextjs-auth0 dependency to the latest version. Some of my imports changed to look like @auth0/nextjs-auth0/client since they are client-side

My old auth0 dep was relying on cacheable-request and therefore keyv which I hadn't heard of till today. All of this can be seen in the error stack depending on your case

I encountered this bug when porting a NextJS 12 app to NextJS 13, so I suspect others may find their way here. In my case the error had a natural solution, and I was able to update an important security dependency

[Azleal]

the warning is still there, any solutions?

[ESlinhT]

it's glitchy when I try it. It's only fixed on Staging, but not prod

[CodyAdam]

With the introduction of Turbopack (tested on Next.js 15), I'm encountering an error that blocks everything, unlike a warning.

Issues I Encountered

1. Module Not Found Error

   • I ran into a "Module not found" error in the keyv package. It was complaining about a missing adapter module in the file keyv/src/index.js.

2. Keyv Package Can't Be External

   • The console also warned me that the keyv package couldn't be external. It suggested that I should install it directly in my project directory. The message was pretty clear: "Try to install it into the project directory by running npm install keyv from the project directory."

     https://nextjs.org/docs/messages/module-not-found
     
     ⚠ ./node_modules/.pnpm/[email protected]/node_modules/cacheable-request/dist
     Package keyv can't be external
     The request keyv matches serverExternalPackages (or the default list).
     The request could not be resolved by Node.js from the project directory.
     Packages that should be external need to be installed in the project directory, so they can be resolved from the output files.
     Try to install it into the project directory by running npm install keyv from the project directory.
     

How I Fixed It

1. First Attempt: Installing Keyv

   • I initially tried to fix the issue by running:

     pnpm add keyv

   • This installed the latest version of keyv (5.2.1), but it didn't solve the problem because of a version mismatch.

     https://nextjs.org/docs/messages/module-not-found
     
     ⚠ ./node_modules/.pnpm/[email protected]/node_modules/cacheable-request/dist
     Package keyv can't be external
     The request keyv matches serverExternalPackages (or the default list).
     The package resolves to a different version when requested from the project directory (5.2.1) compared to the package requested from the importing module (4.5.4).
     Make sure to install the same version of the package in both locations.
     

2. Second Attempt: Downgrading Keyv

   • Realizing the version mismatch, I decided to downgrade keyv to the version that was actually needed:

     pnpm add [email protected]

   • This did the trick! The error was resolved once I matched the required version.

3. Restarting the Development Server

   • Finally, I restarted the development server to make sure everything was working smoothly:

     pnpm dev

   • After these steps, everything was back on track.