package.json

  "name": "web-component-g",
  "version": "1.0.2",
  "private": false,
  "browserslist": {
    "development": [
      "last 1 version"
    ],
    "production": [
      "defaults"
    ]
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "rollup -c"
  },
  "dependencies": {
    "@redwoodjs/cli-storybook": "^7.6.3",
    "@redwoodjs/forms": "7.6.3",
    "@redwoodjs/router": "7.6.3",
    "@redwoodjs/web": "7.6.3",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@redwoodjs/vite": "7.6.3",
    "@rollup/plugin-commonjs": "^26.0.1",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-typescript": "^11.1.6",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@types/rollup-plugin-peer-deps-external": "^2",
    "rollup": "^4.18.1",
    "rollup-plugin-dts": "^6.1.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-terser": "^7.0.2"
  },

  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
    "web/dist/cjs/index.js"
  ]
}

Rollup.config.mjs

import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'
import typescript from '@rollup/plugin-typescript'
import dts from 'rollup-plugin-dts'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'

// const packageJson = requireFile('./package.json')

const requireFile = createRequire(import.meta.url)
const packageJson = requireFile('./package.json')

export default [
  {
    input: 'src/components/index.tsx',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
        // sourcemap: true,
        sourcemap: 'inline',
        name: 'react-lib',
      },
      {
        file: packageJson.module,
        format: 'esm',
        // sourcemap: true,
        sourcemap: 'inline',
      },
    ],
    plugins: [
      external(),
      resolve(),
      commonjs(),
      typescript({ tsconfig: './rollup/tsconfig.json' }),
      postcss(),
      terser(),
    ],
  },
]

When I import my library I get this error:

[plugin:vite:import-analysis] Failed to resolve entry for package “web-component-g”. The package may have incorrect main/module/exports specified in its package.json.

Not sure what to do to get the react app to be able to see my component.