@babel/helper-module-imports is not listed in dependencies, fails to run with pnpm

[IlyaSemenov]

@babel/helper-module-imports is directly used: https://github.com/vuejs/babel-plugin-transform-vue-jsx/blob/3c6dcca1c879d7882449a44fef2536fd787c7ce9/index.js#L4 but it's not listed in package dependencies. Because of that, the package fails to run in pnpm managed environment.

@babel/helper-module-imports must be moved from devDependencies to dependencies.

[IlyaSemenov]

Same goes for @babel/plugin-syntax-jsx.

[LinusBorg]

Does pnpm ignore devDependencies? Becuase they are listed there.

[IlyaSemenov]

Of course it does, same as npm and yarn. devDependencies are only installed when you are developing the package (i.e. checkout it individually and run npm install in the library directory). If a package is listed as a dependency of some other package, its devDependencies are ignored.

With npm and yarn 'flattening' node_modules, the two unlisted packages are there by coincidence (pulled by some other related project module), so the mistake is not apparent. With npmp there is no flattening and the mistake becomes apparent.

[LinusBorg]

If a package is listed as a dependency of some other package, its devDependencies are ignored.

That's not correct. These deps will only be ignored when you run npm --production.

See: https://docs.npmjs.com/cli/install

By default, npm install will install all modules listed as dependencies in package.json.

With the --production flag (or when the NODE_ENV environment variable is set to production), npm will not install modules listed in devDependencies.

• NOTE: The --production flag has no particular meaning when adding a dependency to a project.

Edit: However, I agree that it might still be better to list it under dependencies as in the context of this plugin, "using it in production" means "using it in a babel compile process".

But OTOH I feel like the dependencies/devDependencies difference is murky on th frontend. It makes much more sense for backend apps that generally don't have a build process involved, which kind of sits in between development and production, depending on how you look at it.

[IlyaSemenov]

By default, npm install will install all modules listed as dependencies in package.json.

Correct. But this is not recursive.

So if a user checks out babel-plugin-transform-vue-jsx repository and runs npm install, @babel/helper-module-imports will be pulled. But if a user uses babel-plugin-transform-vue-jsx in his project (that is, lists babel-plugin-transform-vue-jsx in his own package.json), then npm install will not pull recursive (deep) devDependencies.

It's not specific to pnpm. After all, you can test that with plain npm. In an empty directory, run:

npm i babel-plugin-transform-vue-jsx
ls -l node_modules

you will see:

❯ ls -l node_modules
total 0
drwxr-xr-x  7 semenov  staff  224 Oct  4 21:38 babel-plugin-transform-vue-jsx
drwxr-xr-x  6 semenov  staff  192 Oct  4 21:38 esutils

The difference between dependencies/devDependencies is only murky in the final project. The distinction is however very clear in reusable libraries. dependencies are what is needed to use a library, and devDependencies are what is needed to build, test and publish it.

[decademoon]

I have the same issue with Yarn 2 PnP. I resolved it by adding to .yarnrc.yml the following and then running yarn install:

packageExtensions:
  babel-plugin-transform-vue-jsx@*:
    dependencies:
      "@babel/helper-module-imports": "*"

But this is really just a band-aid.