ESM output with CJS content

[elrumordelaluz]

I am pretty happy using tsup for a couple of packages inside a monorepo (using turbo), but having several problems with a particular one, which fires the error described at #579, in my case, the message is:

Error: Dynamic require of "react" is not supported

The dev and build scripts are the same for all packages, however I am noticing that for this particular one, the .mjs and .js output is pretty similar. I mean that the mjs file has the appearance to be transpiled into cjs, like in the screenshot below, when in the other packages, the same file maintains the import statements and modern structure like the input file.

Thanks in advance!

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.

[nitedani]

Related:
evanw/esbuild#1921
evanw/esbuild#2067

[elrumordelaluz]

also:

https://stackoverflow.com/questions/68423950/when-using-esbuild-with-external-react-i-get-dynamic-require-of-react-is-not-s?rq=1

and

evanw/esbuild#1944

[10Derozan]

The solution is to external the other cjs packages that required react, like react-dom

[glitch-txs]

hey could you solve this? I'm using external react and still got the same error

[MatejFacko]

any update on this guys?

tsup version: 8.0.1

I am using following tsup config:

import { sassPlugin } from 'esbuild-sass-plugin';
import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.ts'],
  sourcemap: true,
  clean: true,
  bundle: true,
  dts: true,
  esbuildPlugins: [sassPlugin()],
  splitting: true,
  minify: true,
  format: ['esm', 'cjs'],
  external: ['react', 'react-dom']
});

but in App after npm install I am getting an error (index.js:1 Uncaught Error: Dynamic require of "react" is not supported)

[segevfiner]

@egoist I wonder if you might want to include the workaround that some other bundlers use, but esbuild doesn't, as a plugin in tsup:

import { defineConfig } from 'tsup';

export default defineConfig({
  // *snip*
  banner(ctx) {
    if (ctx.format === "esm") {
      return {
        js: `import { createRequire } from 'module'; const require = createRequire(import.meta.url);`,
      };
    }
  },
});

[segevfiner]

Or maybe even as part of the shims option...

@egoist