Why is @headlessui/react require() resolving to a string "/static/media/index.0e533cff7c637c31a558.cjs"?

[james-bowers]

Hi,

I've got a typescript library which I transpile to CJS using tsdx. The resulting "require" in the bundle resolves to the string /static/media/index.0e533cff7c637c31a558.cjs instead of a function or JS object like all the other 3rd part libraries I'm using.

My babelrc is

module.exports = {
  "babelrcRoots": [
    "./src",
    "../shared-ui/src"
  ],
  "presets": [
    ["@babel/preset-react", {"runtime": "automatic"}],
    "@babel/preset-typescript",
    "@babel/preset-env"
  ],
  "plugins": [
    "babel-plugin-macros",
    // https://styled-components.com/docs/tooling
    ["styled-components", {"ssr": true, "namespace": "v_", "pure": true}]
  ]
}

My tsconfig.json is

{
  "compilerOptions": {
    "sourceMap": false,
    "allowSyntheticDefaultImports": true,
    "noUnusedParameters": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "jsx": "preserve",
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "skipLibCheck": true,
    "noEmit": true,
    "isolatedModules": true,
    "strictNullChecks": true,
    // "noUnusedLocals": true,
    // "alwaysStrict": true
    "outDir": "./dist"
  },
  "include": [
    "../shared-ui",
    "../shared-ui/*",
    "../shared-ui/**/*",
    "../../types",
    "../../types/*",
    "../../types/**/*"
  ],
  "references": [
    {"path": "../shared-ui"}
  ],
  "exclude": [
    "node_modules",
    ".next"
  ]
}

and my tsdx.config.js is

module.exports = {
  rollup (config, opts) {
    if (opts.environment === 'development') {
       // redirect dev build to nowhere
       config.output.file = '/dev/null'
    } else {
      // rename prod build to index.js
      config.output.file = './dist/index.js'
    }

    return config;
  }
}

This works fine in a nextjs environment, but not create react app or vite