Unable to get css module and execute application using rollup.js and react

Question

Hi I am trying to create a react plugin using rollup which will be used locally instead of publishing to npm . I was able to create the plugin but the problem is i unable to generate the css (Which are in modules example somefile.module.css) although i able to generate the css file and consuming it in host application . but im getting below error

Below is my plugin code

State.jsx

import React , { useState } from "react";
import classes from './State.module.css';

export const  State = () => {
     // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div className={classes.background-div}>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

State.module.css

p{
    background-color: red;
}

.backgroundDiv{
    background-color: blue;
    color: white;

}

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import generatePackageJson from 'rollup-plugin-generate-package-json'

import postcss from 'rollup-plugin-postcss';

export default {
    input: 'src/index.jsx',
    output: {
        file: 'dist/bundles/bundle.js',
        format: 'cjs'
    },
    external: [
        'react',
        'react-dom'
    ],
    plugins: [
        resolve({ extensions: ['.jsx', '.js', '.tsx'] }),
        commonjs(),
        babel({
            extensions: ['.jsx', '.js', '.tsx'], 
            exclude: 'node_modules/**'
        }),
        postcss(
            {
                modules:true,
                extract: true,
            }
        ),
        generatePackageJson({
            outputFolder: 'dist',
            baseContents: (pkg) => ({
                name: pkg.name,
                main: 'bundles/bundle.js',
                peerDependencies: {
                  "react": "^18.2.0"
                }
            })            
        })
    ]
};

So how can i resolve this issue or is my post css is correct ?

and How can i bundle both js and css file as one so that i can directly install it like package . Now i am importing css file separately from dist folder

Answer 1

The apparent discrepancy in code is the className. You've named the div in the State component {classes.background-div}, whereas, in the css module the name is backgroundDiv. Although, from the error it doesn’t seem like fixing this particular issue is going to solve the problem. In any case, do let use know what happens if and when you make the change in the className.