0

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

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

Madpop
  • 729
  • 4
  • 24
  • 61

1 Answers1

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.

Suryasish Paul
  • 399
  • 2
  • 12
  • it is working now but do u have any idea how can i bundle for css and js so that it will work as expected in roll up config file ? – Madpop Jul 05 '23 at 18:11
  • Also, you may want to change the state updating code in State component to setCount((prevCount) => prevCount + 1) or something in similar lines. That will reduce the possibility of inconsistencies and keep things synchronised. – Suryasish Paul Jul 05 '23 at 18:15
  • Hey! That's good news! I can try to help but I am not very well acquainted with roll up. – Suryasish Paul Jul 05 '23 at 18:20