`.lessrc` not used within node_modules

[gradddev]

🐛 bug report

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

package.json:

{
  "name": "parcel2-lessrc-bug",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "parcel build src/index.tsx"
  },
  "devDependencies": {
    "@parcel/transformer-less": "2.0.0-beta.3.1",
    "parcel": "^2.0.0-beta.3.1"
  },
  "dependencies": {
    "antd": "^4.16.8"
  }
}

.lessrc:

{
  "inlineJavaScript": true
}

index.ts:

import "antd/lib/style/color/bezierEasing.less";

🤔 Expected Behavior

The parcel should use the .lessrc config.

😯 Current Behavior

I tried to enable inline javascript using .lessrc config:

{
  "inlineJavaScript": true
}

But got error:

$ yarn build
yarn run v1.22.10
$ parcel build src/index.tsx
🚨 Build failed.
@parcel/transformer-less: Inline JavaScript is not enabled. Is it set in your options?
/parcel2-lessrc-bug/node_modules/antd/lib/style/color/bezierEasing.less
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

So I checked a code of @parcel/transformer-less and found that configFile variable is null on this line: https://github.com/parcel-bundler/parcel/blob/v2/packages/transformers/less/src/loadConfig.js#L15

💻 Code Sample

I created a repo to reproduce the error: https://github.com/AlexeySemigradsky/parcel2-lessrc-bug

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-beta.3.1
Node	14.17.0
npm/Yarn	1.22.10
Operating System	macOS 11.4

[gradddev]

This issue can also be related to these issues:

• https://github.com/parcel-bundler/parcel/issues/6618
• https://github.com/parcel-bundler/parcel/issues/6619

[devongovett]

Configs within your project don't affect files in node_modules. Shouldn't files in node_modules be pre-compiled to CSS before they are published? Otherwise every consumer of the module has to re-create the build configuration somehow.

[gradddev]

Shouldn't files in node_modules be pre-compiled to CSS before they are published?

This is not my package, but I use it in one of the projects and it does not work with the Parcel. You don't need to import the less file directly. It is enough to import some component from antd to get an error.

Configs within your project don't affect files in node_modules. Otherwise every consumer of the module has to re-create the build configuration somehow.

I can't say it is good or bad, but what should users do with such an error?

[opatut]

Shouldn't files in node_modules be pre-compiled to CSS before they are published? Otherwise every consumer of the module has to re-create the build configuration somehow.

No, some packages are intentionally uncompiled to allow for customization, e.g. theming. Ant Design is an example for that (see above), as is semantic-ui-less.

Please, can we get this to work?

[leaumar]

I ran into this issue when resorting to what I hoped would be a workaround (the umpteenth already while trying for months to get a project onto yarn+pnp without breaking jest, babel, eslint, ts, and parcel[1|2]). This error about .less files happens when I set babel-plugin-import for antd (without which we get an interactable page but without any css) with style: true. If I set it to style: "css", parcel2's build succeeds again, but the page throws a console error that some antd components like Empty are "not defined" (despite the fact that they're even right there in the js bundle where they should be). Is that anything you guys have had while trying to get around this? It's a chonky work project so I can't provide a repro right off the bat, sorry, but I figured I'd expand on the antd angle here to grasp at straws of solutions.

[Justinidlerz]

I'm facing the same problem I tried to modify the javascriptEnabled option as true in the node_modules/less/lib/less/default-options.js Then it works. But it's a very hard code.

Looking forward to a good solution

[Anthony-Champagne-Wiztivi]

I've come across the same problem. For my case (Antd + less imports + .lessrc or less in manifest + Yarn Berry without PnP), it uses native findAncestry function implementation.

Wouldn't be enough to remove the node_modules test blocks defined in both the native and the JS versions?

I might miss something but I don't understand why it exists in the first place... lessrc with Ant.design is an example, but I guess it will be the same issue if I import a .ts from a node package that doesn't have a .tsconfig? I mean, project configurations should apply to all the files I import, no matter where they are in the subtree ? BTW, what about when the imported file is outside the project directory? My guess would be that it stops searching for the configuration at the first package.json it finds, right?

[bitwhys]

I ran into this problem using antd and the "@parcel/config-webextension". Long story short you need to import antd/dist/antd.less in a less file and import that into your project. Parcel will pick up the options in your .lessrc file and all will be good.

[EDIT]: What does seem to be an issue with this solution is that the modifyVars key is not being applied.