You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
src/MyComponent.tsx
MyComponentBackGround is not exported by src/MyComponent.module.css
3: export var MyComponent = function(props) {
4: var str = "Hello, the text is: " + props.text;
5: return React.createElement("div", { className: style.MyComponentBackGround },
^
6: React.createElement("label", null, str));
7: };```bashand if I look into the builded index.js I see:```javascriptvar css = ".MyComponent-module_MyComponentBackGround__2MMVh {\n background-color: antiquewhite;\n color: black;\n padding: 5px;\n}";var MyComponent_module = {"MyComponentBackGround":"MyComponent-module_MyComponentBackGround__2MMVh"};styleInject(css);var style = /*#__PURE__*/Object.freeze({ 'default': MyComponent_module});var MyComponent = function (props) { var str = "Hello, the text is: " + props.text; return React.createElement("div", { className: undefined }, React.createElement("label", null, str));};
Note { className: undefined }
I have in the src directory the files:
MyComponent.tsx
import*asReactfrom"react";import*asstylefrom"./MyComponent.module.css";exportinterfaceIMyComponentProps{
text: string;}exportconstMyComponent=(props: IMyComponentProps)=>{conststr="Hello, the text is: "+props.text;return<divclassName={style.MyComponentBackGround}><label>{str}</label></div>;};
to the configuration of rollup and it works correctly with imports of css modules.
Anyway I updated some projects and I'm currently using @rollup/plugin-typescript and rollup-plugin-postcss. It works with this configuration:
// rollup.config.js
import typescript from "@rollup/plugin-typescript";
import postcss from "rollup-plugin-postcss";
import autoprefixer from "autoprefixer";
import serve from "rollup-plugin-serve";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import replace from "@rollup/plugin-replace";
const dev = "development";
const prod = "production";
function parseNodeEnv(nodeEnv) {
if (nodeEnv === prod || nodeEnv === dev) {
return nodeEnv;
}
return dev;
}
const nodeEnv = parseNodeEnv(process.env.NODE_ENV);
console.log("Found Node Env: ", nodeEnv);
const plugins = [typescript(),
replace({
// The react sources include a reference to process.env.NODE_ENV so we need to replace it here with the actual value
"process.env.NODE_ENV": JSON.stringify(nodeEnv)
}),
postcss({
extract: false,
writeDefinitions: true,
modules: true,
namedExports: true,
plugins: [autoprefixer()]
}),
resolve(),
commonjs({
include: "node_modules/**"
})];
if (nodeEnv === dev) {
// For playing around with just frontend code the serve plugin is pretty nice.
// We removed it when we started doing actual backend work.
plugins.push(serve("build"))
}
export default {
input: "src/index.tsx",
output: {
dir: "build",
format: "esm",
sourcemap: true
},
plugins: plugins
};
Hello,
I'm using rollup to build a typescript module with React components. I have this configuration of rollup:
and this tsconfig.json
During the build I have this waring:
Note { className: undefined }
I have in the src directory the files:
MyComponent.tsx
MyComponent.module.css
As expected when I use the component exported by the module in a demo app the style doesn't work and there's no classname in the html div.
Can you help me to solve this issue?
Thanks all.
The text was updated successfully, but these errors were encountered: