Errors in importing a react library created using rollup - reactjs

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';