Parcel: Critical dependency: the request of a dependency is an expression

[mattrothenberg]

🐛 bug report

Howdy! I'm the author of vue-storybook, a library that allows Vue developers to add <story> blocks to their Vue single-file components and have them automatically translated into Storybook stories.

Parcel is my go-to bundler, though I'm experiencing some strange behavior when bundling/publishing my library code and subsequently using it in a freshly scaffolded Vue CLI project. Without fail, when running the Vue development server, I'm getting the following warning:

WARNING in ./node_modules/vue-storybook/dist/index.js 1:292-296
Critical dependency: the request of a dependency is an expression
 @ ./config/storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./config/storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

I'm confused, because I _don't_ see this message when I bundle my library code with Webpack or Rollup. I'm doubly confused because I'm not using any special configuration with Parcel, just a good ole' build command. It's just a warning, so I'm not _too_ concerned. But I've gotten user feedback that this is distracting. I'd like the warning to go away.

🎛 Configuration (.babelrc, package.json, cli command)

There's no Babel configuration for vue-storybook, though freshly scaffolded Vue CLI projects have the following babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ]
}

🤔 Expected Behavior

When using vue-storybook with a freshly scaffolded Vue CLI project, there should be no such warning about the request of a dependency is an expression

😯 Current Behavior

When using vue-storybook with a freshly scaffolded Vue CLI project, there is a warning about the request of a dependency is an expression

💁 Possible Solution

No ideas. I'm fairly certain this is user error somewhere on my part.

🔦 Context

I'm trying to publish a new version of my library (bundled with Parcel), and I'd like consumers _not_ to see this warning message when using it.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.12.3
| Node | 10.15.1
| npm/Yarn |1.13.0
| Operating System | OSX 10.14.3

[mischnic]

babel.config.js

First of all: Parcel doesn't support that file: https://github.com/parcel-bundler/parcel/issues/2110

Haven't looked further into your issue, could you please provide some code sample/repo/gist to speed this up?

[mattrothenberg]

Hi @mischnic, thanks for the prompt reply. To clarify, my _library_ doesn't have a babel.config.js – that file comes from a Vue CLI project where I'm trying to _use_ a library that's been bundled with parcel.

As mentioned, my repository is here: https://github.com/mattrothenberg/vue-storybook/tree/v2

The bundled files live in dist. Let me know if there are any other questions.

[dsadhanala]

I can confirm, I'm running into the same warning.

To provide context, I have a private npm module which uses parcel to bundle as ES5 compatible build artifacts. When I import this private module into a web app which uses webpack for code bundling, I see below warning during the builds.

WARNING in mymodule/dist/index.js 34:19-36
Critical dependency: the request of a dependency is an expression

Which is pointing to the source at below condition and nodeRequire(name) call.

// Try the node require function if it exists.
if (nodeRequire && typeof name === 'string') {
    return nodeRequire(name);
}

I'm not sure if this is due to the way parcel is bundling the code or some bad config for webpack is causing this warning.

[mischnic]

When I import this private module into a web app which uses webpack for code bundling, I see below warning during the builds.

Interesting, this happens because webpack provides it's own require:

var nodeRequire = typeof require === 'function' && require;
// ...

        // Try the node require function if it exists.
        if (nodeRequire && typeof name === 'string') {
          return nodeRequire(name);
        }

[mischnic]

But I've gotten user feedback that this is distracting. I'd like the warning to go away.

@mattrothenberg Do these warnings happen for you when your library is then consumed by Webpack?

This is a warning by Webpack (not Parcel). That error formatting seemed familiar...

[mattrothenberg]

@mischnic I'm not sure I understand your question.

If my library is bundled with Parcel, and consumed in a project that uses Webpack, I get the warning.
If my library is bundled with Webpack, and consumed in a project that uses Webpack, I do not get the warning.
If my library is bundled with Rollup, and consumed in a project that uses Webpack, I do not get the warning.

[mischnic]

I'm not sure I understand your question.

You did understand 😄 :

If my library is bundled with Parcel, and consumed in a project that uses Webpack, I get the warning.

[giannif]

I've had the same issue for a bit now, in my webpack project I'm doing this to hide the warning:

// @giphy/js-brand uses parcel-bundler which has require statements
new webpack.ContextReplacementPlugin(/\/@giphy\/js-brand\//, data => {
  delete data.dependencies[0].critical
  return data
}),

However, I'm the author of the dependency and I'd rather not have to have people do this in their webpack projects

[mischnic]

As already said in https://github.com/parcel-bundler/parcel/issues/2883#issuecomment-479638033,

this happens because the bundle emitted by Parcel falls back to a global require() function if the module can't be found otherwise (intended for Node).

@DeMoorJasper Is this part needed for target: browser (line 11, line 33-35) ?
https://github.com/parcel-bundler/parcel/blob/7ddb8387b4caff3491bd174dc55f6faacbf120d3/packages/core/parcel-bundler/src/builtins/prelude.js#L8-L35

Reproduction: https://github.com/jooohn/reproduce-contentful-ui-extensions-error

[DeMoorJasper]

@mischnic I don't think so.

As long as we don't overwrite the global require it should be fine.

[hughfenghen]

In my case, in addition to warning ‘Critical dependency’, it will also report ‘can’t find module "xxx"’.
This is detail error info:

vue-router.esm.js?8c4f:1907 Error: Cannot find module 'xlsx'
    at webpackEmptyContext (eval at ./node_modules/simple-xlsjs/dist sync recursive (add-match-task.c2731c8a9457ed35d133.js:157), <anonymous>:2:10)
    at newRequire (index.js?6209:34)
    at localRequire (index.js?6209:53)
    at Object.parcelRequire.7QCb (index.js?6209:131)
    at newRequire (index.js?6209:47)

In the code of the parcel output，replace require with rrr, error message disappears.

[rohan-deshpande]

Also seeing this for libs bundled with Parcel when used in a Wepback project. Kind of bad, would appreciate a fix.

[ostgals]

As already said in #2883 (comment),

this happens because the bundle emitted by Parcel falls back to a global require() function if the module can't be found otherwise (intended for Node).

@DeMoorJasper Is this part needed for target: browser (line 11, line 33-35) ?
https://github.com/parcel-bundler/parcel/blob/7ddb8387b4caff3491bd174dc55f6faacbf120d3/packages/core/parcel-bundler/src/builtins/prelude.js#L8-L35

Reproduction: https://github.com/jooohn/reproduce-contentful-ui-extensions-error

It's a real issue in our project where global require() is overwritten by RequireJS. So nodeRequire fails loading modules with no exceptions thrown. We cannot remove RequireJS because it's the vital part of system architecture.

[AllanOricil]

Im facing the same problem. I bundled a lib with Parcel and Im importing it in Nuxt Js, which uses Webpack, and it shows this warning :/
Im thinking about switching to webpack and see what happens.

[abu3389]

So,What's the best resolution with this proplem ? I think I need help,I'm facing the same situation