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