1

multiple component default export problem in react component library NPM package

I created a react component library(with one component) and published it to NPM and its working fine. But the problem is when I tried to add another component, I'm facing a problem on how to export multiple components through main index.js file which is the entry point for my library, it seems I can only export one component or function as default and the export isn't working if it isn't default export. I really have no clue on how to solve this. I want to default export multiple components.

This is my folder structure. I would like some help on that here

import Button from "./components/Button";
import Pagination from "./components/Pagination";

export default {Button, Pagination}

this is my main index.js file this isn't working. I also tried this

import Button from "./components/Button";
import Pagination from "./components/Pagination";
 module.exports= {
    Button: Button,
    Pagination: Pagination
}

I'm getting this error

I even tried doing this

export {default as Button} from './components/Button';
export {default as Pagination} from './components/Pagination';

I'm getting the same export default error. Please someone help me.

package.json

{
  "name": "exampledemo3",
  "version": "1.0.0",
  "description": "Made with create-react-library",
  "license": "MIT",
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
  "source": "src/index.js",
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "build": "microbundle-crl --no-compress --format modern,cjs",
    "start": "microbundle-crl watch --no-compress --format modern,cjs",
    "prepare": "run-s build",
    "test": "run-s test:unit test:lint test:build",
    "test:build": "run-s build",
    "test:lint": "eslint .",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom",
    "predeploy": "cd example && npm install && npm run build",
    "deploy": "gh-pages -d example/build"
  },
  "peerDependencies": {
    "react": "^18.2.0"
  },
  "devDependencies": {
    "microbundle-crl": "^0.13.10",
    "babel-eslint": "^10.0.3",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-standard": "^4.0.1",
    "gh-pages": "^2.2.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^3.4.1"
  },
  "files": [
    "dist"
  ]
}

.eslintrc

{
  "parser": "babel-eslint",
  "extends": [
    "standard",
    "standard-react",
    "plugin:prettier/recommended",
    "prettier/standard",
    "prettier/react"
  ],
  "env": {
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 2020,
    "ecmaFeatures": {
      "legacyDecorators": true,
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "16"
    }
  },
  "rules": {
    "space-before-function-paren": 0,
    "react/prop-types": 0,
    "react/jsx-handler-names": 0,
    "react/jsx-fragments": 0,
    "react/no-unused-prop-types": 0,
    "import/export": 0
  }
}
Alek2499
  • 11
  • 1
  • You can only export one default module per file. – Youssouf Oumar Apr 26 '23 at 08:27
  • But what if i want to put so many components in a single npm library? I can't create seperate library for every individual component right. What can I do to create a single library for many components – Alek2499 Apr 26 '23 at 09:43
  • Use [named exports](https://medium.com/@etherealm/named-export-vs-default-export-in-es6-affb483a0910). – Youssouf Oumar Apr 26 '23 at 09:46
  • it's not working either. There aren't much tutorials about this topic. I don't understand how so many people made npm libraries for multiple components and how did they export it all – Alek2499 Apr 26 '23 at 10:10

1 Answers1

0

Try to export the default function like this:

for default function

import Button from "./components/Button";
import Pagination from "./components/Pagination";

export default Button, Pagination

You shouldn't have to use {} while exporting function.

nuser137
  • 401
  • 2
  • 8