I am currently working on developing a TypeScript library to be shared across various websites. It's been a while since I last worked on something like this. Here is a snippet from my tsconfig.json:
{
"compilerOptions": {
"target": "es6",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"baseUrl": "."
},
"include": ["src/**/*.ts", "src/**/*.tsx"],
"exclude": ["node_modules"],
"ts-node": {
"compilerOptions": {
"module": "commonjs"
}
}
}
In addition, here is an excerpt from my rollup.config.js:
import pkg from './package.json'
import dts from 'rollup-plugin-dts'
import esbuild from 'rollup-plugin-esbuild'
import autoprefixer from 'autoprefixer'
import postcss from 'rollup-plugin-postcss'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
const name = pkg.main.replace(/\.js$/, '')
export default [
{
preserveModules: true,
input: 'src/index.ts',
plugins: [
peerDepsExternal(),
postcss({
plugins: [autoprefixer()],
sourceMap: true,
extract: false,
modules: true,
}),
esbuild({
include: /\.[jt]sx?$/,
exclude: /node_modules/,
sourceMap: true,
target: 'es6',
jsx: 'transform',
jsxFactory: 'React.createElement',
jsxFragment: 'React.Fragment',
}),
],
output: [
{
dir: 'dist',
exports: 'default',
format: 'cjs',
sourcemap: true,
},
],
external: ['react', 'react-dom'],
},
{
input: 'src/index.ts',
plugins: [dts()],
output: {
file: `${name}.d.ts`,
format: 'es',
},
},
]
Furthermore, here is part of my package.json:
{
"name": "@myorg/mylib.js",
"version": "0.0.1",
"devDependencies": {
"autoprefixer": "^10.4.11",
"esbuild": "^0.15.7",
"postcss": "^8.4.16",
"rollup": "^2.79.0",
"rollup-plugin-dts": "^4.2.2",
"rollup-plugin-esbuild": "^4.10.1",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"typescript": "^4.8.3"
},
"main": "dist/index.js",
"license": "MIT",
"scripts": {
"build": "yarn rollup -c"
},
"peerDependencies": {
"classnames": "^2.3.2",
"next": "^12.3.0",
"react": "^18.2.0"
},
"dependencies": {
"@types/react": "^18.0.20",
"classnames": "^2.3.2"
}
}
Lastly, when trying to load the src/index.ts, I encountered an issue with CSS modules within Rollup:
import Button from './components/Button'
export default {
Button,
}
The Button component references these two files:
import React from 'react'
import styles from './index.module.css'
export default function Button() {
return <button className={styles.button}>hello</button>
}
The content of index.module.css is as follows:
.button {
background: red;
}
However, upon running yarn build, I encountered the following error:
yarn run v1.22.17
$ yarn rollup -c
$ /my/project/node_modules/.bin/rollup -c
src/index.ts → dist...
created dist in 190ms
src/index.ts → dist/index.d.ts...
src/components/Button/index.tsx(4,20): error TS2307: Cannot find module './index.module.css' or its corresponding type declarations.
[!] (plugin dts) Error: Failed to compile. Check the logs above.
src/components/Button/index.tsx
Error: Failed to compile. Check the logs above.
at error (/my/project/node_modules/rollup/dist/shared/rollup.js:198:30)
at throwPluginError (/my/project/node_modules/rollup/dist/shared/rollup.js:21919:12)
at Object.error (/my/project/node_modules/rollup/dist/shared/rollup.js:22641:20)
at Object.error (/my/project/node_modules/rollup/dist/shared/rollup.js:22096:42)
at Object.transform (/my/project/node_modules/rollup-plugin-dts/dist/rollup-plugin-dts.cjs:1618:26)
at /my/project/node_modules/rollup/dist/shared/rollup.js:22848:40
Any suggestions on how to resolve the compilation issue related to CSS modules in Rollup?