Solidjs library rollup configuration: unresolved dependencies

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:

1. 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"
  }
}

2. 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"],
    }),
  ],
};

3. 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