Solidjs library rollup configuration: unresolved dependencies - rollupjs

Question

I try to build a solidjs npm lib using rollup to provide some components. I intend to build esm and cjs module using the following rollup.config.js:
import commonjs from "rollup-plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import babel from "#rollup/plugin-babel";
import postcss from "postcss";
import nodeResolve from "#rollup/plugin-node-resolve";
export default {
input: "./src/index.ts",
output: [
{
file: "dist/index.cjs.js",
format: "cjs",
},
{
file: "dist/index.esm.js",
format: "esm",
},
],
external: [
"#suid",
"#suid/icons-material",
"#suid/material",
"solid-js",
"solid-js/web",
],
plugins: [
nodeResolve(),
resolve(),
commonjs(),
postcss({
autoModules: true,
plugins: [],
sourceMap: true,
extract: true,
minimize: true,
}),
typescript(),
babel({
babelHelpers: "bundled",
exclude: "node_modules/**",
extensions: [".ts", ".tsx"],
}),
],
};
Unfortunately, i cannot build this. Here's the error message:
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
~/MonthPicker.module.css (imported by "src/MonthPicker.tsx")
~/DatePicker.module.css (imported by "src/DatePicker.tsx")
#suid/icons-material/ExpandLess (imported by "src/MonthPicker.tsx")
#suid/icons-material/ExpandMore (imported by "src/MonthPicker.tsx")
created dist/index.cjs.js, dist/index.esm.js in 849ms
If I understood correctly, nodeResolve() is supposed to help here, but i guess i have misconfigured it.
EDITS:
added postcss as #snnsnn proposed
removed babel from this post (it seems this is a rollup issue)

Answer 1

You are missing postCss plugin.
https://www.npmjs.com/package/rollup-plugin-postcss
Edit:
You are missing some peer dependencies like postcss, #babel/core and I believe that is why you receive "unresolved dependencies" error. I installed them as dev dependencies, but it is better if you add them as peerDependencies:
{
"dependencies": {
"#suid/icons-material": "^0.5.1",
"#suid/material": "^0.8.0",
"babel-plugin-react-css-modules": "^5.2.6",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-postcss-modules": "^2.1.1",
"solid-js": "^1.6.9",
"suid": "^1.0.0"
},
"devDependencies": {
"#babel/core": "^7.20.12",
"#rollup/plugin-babel": "^6.0.3",
"#rollup/plugin-node-resolve": "^15.0.1",
"#suid/vite-plugin": "^0.1.0",
"#types/node": "^18.11.18",
"#typescript-eslint/eslint-plugin": "^5.48.1",
"#typescript-eslint/parser": "^5.48.0",
"eslint": "^8.31.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-solid": "^0.9.1",
"postcss": "^8.4.21",
"prettier": "^2.8.2",
"rollup": "^3.10.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-typescript2": "^0.34.1",
"typescript": "^4.8.2",
"vite": "^4.0.4",
"vite-plugin-solid": "^2.5.0"
}
}
Used following rollup.config.js:
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import babel from "#rollup/plugin-babel";
import nodeResolve from "#rollup/plugin-node-resolve";
import postcss from 'rollup-plugin-postcss-modules';
export default {
input: "./src/index.tsx",
output: [
{
file: "dist/index.cjs.js",
format: "cjs",
},
{
file: "dist/index.esm.js",
format: "esm",
},
],
external: [
"#suid",
"#suid/icons-material",
"#suid/material",
"solid-js",
"solid-js/web",
],
plugins: [
nodeResolve(),
resolve(),
commonjs(),
postcss({
autoModules: true,
plugins: [],
sourceMap: true,
extract: true,
minimize: true,
}),
typescript(),
babel({
babelHelpers: "bundled",
exclude: "node_modules/**",
extensions: [".ts", ".tsx"],
}),
],
};
Used a simple application as index.tsx:
import { render } from 'solid-js/web';
import style from './app.module.css';
export const App = () => {
const handleClick = () => {
console.log('Clicking');
};
return (
<div class={style.app}>
App! <button onClick={handleClick}>Some Button</button>
</div>
);
};
render(App, document.body);
Your project compiles:
pnpm run build
> #edelmeier/solid-timeline#0.0.1 build **snipped**/solid-timeline
> rollup -c
./src/index.tsx → dist/index.cjs.js, dist/index.esm.js...
created dist/index.cjs.js, dist/index.esm.js in 1.6s