Errors in importing a react library created using rollup

Question

I am writing a React/Next app. I have created a react accordion-component external to the app. I am using rollup to create a package and importing that package into my app. When I run the app I get the error

./node_modules/@zeilsell-user1/accordion-component/dist/esm/index.js Module parse failed: Unexpected token (1:4) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders use clientfunction getDefaultExportFromCjs (x) { | return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x; | }

I do not understand why I am seeing this error. The component is ESM so why the CSJ function? Nexrjs uses webpack, but that should handle csj, I can't find anything about loaders anyway.

I am assuming that the issue is on the component side, so I have included the rollup, tsconfig and package files below. Really appreciate any help that the community can offer me as I have been stuck on this problem for ages.

my rollup.config.mjs

import {nodeResolve} from '@rollup/plugin-node-resolve';
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import banner2 from "rollup-plugin-banner2";
import dts from "rollup-plugin-dts";

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

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      nodeResolve({extensions: [".js", ".jsx", ".ts", ".tsx", ".json"], }),
      commonjs(),
      typescript({
        tsconfig: "./tsconfig.json",
        verbosity: 1,
        clean: true,
        include: ["*.ts+(|x)", "**/*.ts+(|x)"],
      }),
      banner2(() => `use client`),
    ],
  },
  {
    input: "dist/esm/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
  },
];

my tsconfig.json is

{
  "compilerOptions": {
    "target": "es2016",
    "lib": ["es6", "dom", "es2016", "es2017"],
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "node",
    "declaration": true,
    "sourceMap": true,
    "outDir": "dist",
    "preserveConstEnums": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts*"],
  "exclude": ["node_modules", "dist"]
}

and the package.json is

{
  "name": "@zeilsell-user1/accordion-component",
  "type": "module",
  "version": "0.0.5",
  "description": "This is a simple accordion component to be used with react/next apps",
  "author": "...>",
  "license": "MIT",
  "private": false,
  "main": "index.js",
  "module": "dist/esm/index.js",
  "files": [ "dist" ],
  "types": "dist/index.d.ts",
  "repository": "https://github.com/zeilsell-user1/accordion-component.git",
  "publishConfig": { "registry": "https://npm.pkg.github.com/zeilsell-user1" },
  "scripts": {

    "rollup": "rollup -c rollup.config.mjs",
    "rollup:watch": "rollup -cw",

  },
  "dependencies": {

  },
  "devDependencies": {
  }
}

I have googled a lot for answers. I added the "type": "module", into the package.json following the suggestion from one site. I also switched to nodeResolve in rollup.config.mjs based on another suggestion. Neither of them changed the outcome.

Answer 1

After a lot of careful combing I realised that if I was specifying "type":"module" then there was no need to include "main": "index.js" as that was specific for cjs.

This solved the issue of cjs being picked up by the app rather than esm. It did result in another issue,below, but that is a 'good' problem as it is correctly picking up esm now!

./node_modules/@zeilsell-user1/accordion-component/dist/esm/index.js

Module parse failed: Unexpected token (1:4)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

use clientimport { jsxs, Fragment, jsx } from 'react/jsx-runtime'; | import { useState } from 'react'; | import styled from 'styled-components';