I am trying to build module using rollup but I am getting this error –

ERROR in ../app-react/src/assets/add-jd.jsx 56:8
Module parse failed: Unexpected token (56:8)
File was processed with these loaders:

• ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
• ./node_modules/source-map-loader/dist/cjs.js
  You may need an additional loader to handle the result of these loaders.
  |
  | return (

Plain text

Copy to clipboard

Open code in new window

EnlighterJS 3 Syntax Highlighter

<code> <Box padding={"30px"} sx={{ minHeight: "90vh" }}>

</code>

<code> <Box padding={"30px"} sx={{ minHeight: "90vh" }}> </code>

    <Box padding={"30px"} sx={{ minHeight: "90vh" }}>

| <Typography textAlign={“center”} fontSize={“26px”} fontWeight={“400”} marginBottom={“30px”}>{heading}
|

Here is my rollup.config.js –

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';
import json from '@rollup/plugin-json';
import pkg from './package.json' assert { type: 'json' };
 
export default {
  input:'src/index.jsx',
  output: [
    { file: pkg.main, format: 'cjs' },
    { file: pkg.module, format: 'esm' }
  ],
  plugins: [
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**',
      presets: ['@babel/preset-env','@babel/preset-react'],
      extensions: ['.js', '.jsx']
    }),
    resolve(),
    commonjs(),
    terser(),
    json()
  ],
  external: Object.keys(pkg.peerDependencies),
};

Here is my package.json –

{
  "name": "app-react",
  "version": "1.0.0",
  "description": "React reusable component for client application",
  "type": "module",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "rollup -c"
  },
  "author": "itsMe",
  "license": "ISC",
  "peerDependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "dependencies": {
    "@mui/icons-material": "^5.15.15",
    "@mui/material": "^5.15.15",
    "axios": "^1.6.8",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-dropzone": "^14.2.3",
    "rollup": "^4.17.2",
    "rollup-plugin-peer-deps-external": "^2.2.4"
  },
  "devDependencies": {
    "@babel/core": "^7.24.5",
    "@babel/preset-env": "^7.24.5",
    "@babel/preset-react": "^7.24.1",
    "@rollup/plugin-babel": "^6.0.4",
    "@rollup/plugin-commonjs": "^25.0.7",
    "@rollup/plugin-json": "^6.1.0",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-terser": "^0.4.4",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}