export 'default' was not found in 'react-module' (module has no exports)

Question

I created a React Module (react-accordion-animated) using react TS, packaging with rollup. I put my accordion component in index.tsx in src and configured rollup.

Then i did npm link and npm link ../path_to__another_reactapp_to_test/node_modules/react and now my another project is able to use locall use the packaged dist folder, but it's throwing error module has no exports.

My module directory is like:

react-accordion-animated
+--node_modules
+--src
+--+--index.tsx
+--+--index.css
+--+--add.svg
+--+--react-app-env.d.ts
+--dist
+--+--index.js
+--+--index.js.map

My component code:

import * as React from 'react'
import { Add, Remove } from '@mui/icons-material';
import { Accordion as AccordionRootComponent, AccordionItem as Item } from '@szhsin/react-accordion'
import addIcon from "./add.svg"
import "./index.css"

const AccordionItem = () => { ... some item code }  

function Accordion(props: {faqs: {
    header: string,
    content: string
}[],
    headerStyle?: string,
    contentStyle?: string,
    expandButon?: number,
    showBorder?: boolean
}) {
  return (
    <AccordionRootComponent transition transitionTimeout={200}>
        {
          props.faqs.map((faq, index) => (
            <AccordionItem key={index} header={faq.header} headerStyle={props.headerStyle} contentStyle={props.contentStyle} showBorder={props.showBorder} expandButton={props.expandButon}>
              {faq.content}
            </AccordionItem>
          ))
        }
      </AccordionRootComponent>
  )
}

Accordion.defaultProps = {
    headerStyle: "",
    contentStyle: "",
    expandButon: 0,
    showBorder: true
}

export default Accordion

My rollup config:

import sass from 'rollup-plugin-sass'
import typescript from 'rollup-plugin-typescript2'
// import tailwind from "rollup-plugin-tailwindcss"
import tailwind from "tailwindcss"
import tailwindConfig from './tailwind.config.js'
import autoprefixer from "autoprefixer"
import postcss from "rollup-plugin-postcss"
import svg from "rollup-plugin-svg"

import pkg from './package.json' assert {type: "json"};

export default {
    input: 'src/index.tsx',
    output: [
      {
        file: pkg.main,
        format: 'cjs',
        exports: 'named',
        sourcemap: true,
        strict: false
      }
    ],
    plugins: [
      postcss({
        extensions: ['.css', '.module.css'],
        plugins: [autoprefixer(), tailwind(tailwindConfig)],
    }),
    typescript({ objectHashIgnoreUnknownHack: true }),
    svg()
    ],
    external: ['react', 'react-dom']
  }

My tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "example",
    "rollup.config.js",
  ]
}

I'm importing it in testing project like import Accordion from "react-accordion-animated";

I was expecting to import the module, pass faqs array, and just it like any other react module from npm registry

(I also tried named exporting and named importing, but it throws same error, module has no exports)

Answer 1

the issue might be that in some cases, especially with certain bundlers or transpilers, it's possible that the default export is not recognized correctly.

By explicitly using the named export syntax in your index.TSX file:

export { Accordion };

and import it :

import { Accordion } from "react-accordion-animated";

You are explicitly stating that the Accordion component is the named export, which can help in some scenarios where default exports may not be handled as expected.