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

Question

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..

Well you don't want to use the CommonJS `'../dist/cjs/index'` module in an `import` declaration (unless you transpile your `App.tsx` to CommonJS as well, which you don't). "*I tried to import `'../dist/esm/index'` as alternative*" - yes, do that. It's the way to go. "*but it then throws error that process is not defined." - well `process` is not defined in the browser. What did you expect it to be? Don't use it in your code. But this is unrelated to the `import` problem. — Bergi, Jun 20 '23 at 20:09
@Bergi thanks for reply:), well, as im building my react ui library, should it be work well when Im trying to import file that ive built? Since bundler is just a program that “bundles” my project to basic js css html stuff + etc, it should not affect the runtime logic. Which mean, it should act same as pre-bundled isnt it? — Justin Seo, Jun 21 '23 at 01:02
@Bergi ofcourse I didn't used process in my code and also, process won't be instantiate in browser even if I wanted to — Justin Seo, Jun 21 '23 at 01:43
If you didn't use `process` in your code then where does it come from? — Bergi, Jun 21 '23 at 07:21
@Bergi solved it! actually it was caused by, @rollup/plugin-node-resolve , don't know what feature messed my code, but by discarding resolver, it got alright — Justin Seo, Jun 21 '23 at 08:15

score 0 · Answer 1 · answered Jun 21 '23 at 08:16

0

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

answered Jun 21 '23 at 08:16

Justin Seo

59
8

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 28 '23 at 04:46

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

1 Answers1