ReferenceError: __name is not defined (LESS stylesheets)

[kaiyoma]

Bug description

I'm trying to migrate my webpack app from Babel to tsx and I'm running into a problem. The webpack build mostly completes, but then spits out hundreds of errors, one for every LESS stylesheet in the project. Each error looks like this:

ERROR in ./src/modules/topology/components/ClusteredLinkInfo/styles.less (./node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js!./node_modules/.pnpm/[email protected]_cevnyqd5mhktybfrpstjugctw4/node_modules/postcss-loader/dist/cjs.js??ref--15-2!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/less-loader/dist/cjs.js??ref--15-3!./src/modules/topology/components/ClusteredLinkInfo/styles.less)
Module build failed (from ./node_modules/.pnpm/[email protected]_cevnyqd5mhktybfrpstjugctw4/node_modules/postcss-loader/dist/cjs.js):
ReferenceError: __name is not defined
    at SortTemplate (eval at cloneSort (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\[email protected]\node_modules\source-map-js\lib\quick-sort.js:2:861), <anonymous>:3:107)
    at cloneSort (c:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\[email protected]\node_modules\source-map-js\lib\quick-sort.js:112:10)
    at exports.quickSort (c:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\[email protected]\node_modules\source-map-js\lib\quick-sort.js:128:19)
    at BasicSourceMapConsumer.SourceMapConsumer_parseMappings (c:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\[email protected]\node_modules\source-map-js\lib\source-map-consumer.js:604:9)
    at BasicSourceMapConsumer.get (c:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\[email protected]\node_modules\source-map-js\lib\source-map-consumer.js:70:12)
    at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor (c:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\[email protected]\node_modules\source-map-js\lib\source-map-consumer.js:694:12)
    at SourceMapGenerator.<anonymous> (c:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\[email protected]\node_modules\source-map-js\lib\source-map-generator.js:207:43)
    at Array.forEach (<anonymous>)
    at MappingList.MappingList_forEach (c:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\[email protected]\node_modules\source-map-js\lib\mapping-list.js:44:17)
    at SourceMapGenerator.SourceMapGenerator_applySourceMap (c:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\[email protected]\node_modules\source-map-js\lib\source-map-generator.js:204:20)
 @ ./src/modules/topology/components/ClusteredLinkInfo/styles.less 2:12-411 9:17-24 13:7-14 15:20-27 17:4-30:5 19:6-29:7 20:38-45 26:26-33 28:21-28 38:15-22
 @ ./src/modules/topology/components/ClusteredLinkInfo/index.jsx
 @ ./src/modules/topology/containers/Sidebar/index.jsx
 @ ./src/modules/topology/containers/App/index.jsx
 @ ./src/modules/topology/index.js
 @ ./src/containers/Main/constants.ts
 @ ./src/containers/Main/index.tsx
 @ ./index.tsx
 @ multi webpack-dev-server/client?http://localhost:3001 webpack/hot/only-dev-server ./index

Reproduction

This is a very large enterprise project, so I can't provide a repro easily right now. I'm happy to work with you and provide more information, because I'd really love to ditch Babel.

Environment

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 5.40 GB / 15.71 GB
  Binaries:
    Node: 16.19.0 - C:\Program Files\Node.js\node.EXE
    npm: 9.2.0 - C:\Program Files\Node.js\npm.CMD
  npmPackages:
    tsx: 3.12.2 => 3.12.2

Can you work on a fix?

• I’m interested in opening a pull request to address this issue.

[privatenumber]

Duplicate of #113 #87

You can debug your project to identify which dependency is using eval or Workers and see if it offers an option to disable it. For example, in terser-webpack-plugin: #87 (comment)

[kaiyoma]

Hmm, I tried setting parallel: false and it didn't change anything. How do I determine which webpack dependencies are at fault? Is there a list somewhere of webpack plugins that are known to be incompatible with tsx?

[privatenumber]

Hmm, I tried setting parallel: false and it didn't change anything.

That was just an example for terser-webpack-plugin.

How do I determine which webpack dependencies are at fault?

It's in your error stack:

    at SortTemplate (eval at cloneSort (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\[email protected]\node_modules\source-map-js\lib\quick-sort.js:2:861), <anonymous>:3:107)

Is there a list somewhere of webpack plugins that are known to be incompatible with tsx?

No. As the issues I referenced indicate, tsx doesn't support eval. So any code that uses eval is incompatible with tsx. Not sure if it makes sense to make a list for that.

Why are you using tsx to run Webpack, anyway?

[kaiyoma]

We're currently using Node + Babel to run webpack, but in general we're trying to move off of Babel. We've migrated all our other tooling and packages to use esbuild and webpack is the last holdout. Eventually I want to move to something like Vite, but we need to use webpack for now. esbuild was a great drop-in replacement for rollup, so I wanted to see if it would work for webpack too.

[privatenumber]

We're currently using Node + Babel to run webpack

Why?

[kaiyoma]

Sorry, I should clarify that by "webpack" I mean the webpack dev server. We have a server written in TypeScript that needs to be run.

[privatenumber]

That makes a lot more sense.

In the future, tsx may become smarter about excluding dependencies from transpilation when unnecessary. That may unblock your issue.

[RichieChoo]

Reproduction!!

If used tsx to run node.js cli app which has webpack , tsx will add __name for webpack hot module replacement function statement

[privatenumber]

FYI this is no longer an issue with the latest tsx