Search code examples
reactjsbundleres6-modulesrollupcjs

Bundled module throws 'requested module does not provide an export'


I'm currently making React UI Library.

I'm using rollup as bundler , VITE just to run dev server.

after building my app, I wanted to test if bundled files runs as expected.

So, I've tried to import the file and run it. and it throws error as below

 requested module '/dist/cjs/index.js' does not provide an export named 'my-----module' ('

my rollup config::

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";
import json from '@rollup/plugin-json'

const packageJson = require("./package.json");

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      postcss(),
      json()
    ],
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts(),json()],
    external: [/\.(css|less|scss)$/],
  },
];

tsconfig ::

{
  "compilerOptions": {
    "useDefineForClassFields": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    
    // "declaration": true,
    // "outDir": "compile" /* Specify an output folder for all emitted files. */,
    // "outDir": "./dist",
    "target": "esnext",
    "lib": ["dom", "DOM.Iterable", "ESNext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    // "module": "esnext",
    // "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    // "jsx": "react-jsx",

    "baseUrl": ".",
    "typeRoots": ["node_modules/@types/"],

    "paths": {
      "@models/*" : ["src/models/*"],
      "@constants/*" : ["src/constants/*"],
      "@components/*" : ["src/components/*"],
      "@abi/*" : ["src/abi/*"],
      "@styles/*": ["src/styles/*"],
      "@utils/*": ["src/utils/*"],
      "@assets/*" : ["src/assets/*"],
      "@core/*" : ["src/core/*"],
      "@contexts/*" : ["src/contexts/*"],
      "@hooks/*" : ["src/hooks/*"],
      "@HOC/*" : ["src/HOC/*"]
    },
    "jsx" : "react-jsx",
    "module" : "esnext",
    "declaration" : true,
    "declarationDir" : "types",
    "sourceMap" : true,
    "outDir" : "dist",
    "moduleResolution" : "Node",
    "allowSyntheticDefaultImports": true,
    "emitDeclarationOnly": true
  },
  "include": ["src", "test/main.tsx", "test/App.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "exclude": ["dist","node_modules","test"],
}

after runing build command which is

"build" : "rollup -c"

I run below code on my App.tsx

import { myModule } from '../dist/cjs/index';

function App() {
  console.log(myModule);
  const mW = new myModule();

  return <>{mW!.render()}</>;
}

export default App;

at first, I thought building process got wrong, but at '../dist/cjs/index', it actually has module exporter which I expect, but only when I try to import it, it throws error.

Also I tried to import '../dist/esm/index' as alternative, but it then throws error that

process is not defined.

(on path.js ) 
error point => process.platform === 'win32'
```

also googled it, and found nothing suitable for me..

any advise or help will help me a lot..

Solution

  • By Discarding @rollup/plugin-node-resolve, it got fixed.

    Don't know why, but as a result got fixed.

    I'll comment the reason if I could find what kind of feature of @rollup./plugin-node-resolve messed my code