React library with typescript and module css

Question

how should looks like bolderplate project for react library with typescript and module css?

I don't know how rolloup.config.js should looks like for this case.

When I build project I'm getting error

semantic error TS2307: Cannot find module './MyComponent.module.css'.

I have something like this in rollup.config.js file

import typescript from 'rollup-plugin-typescript2'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import resolve from 'rollup-plugin-node-resolve'
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';

import pkg from './package.json'

export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      exports: 'named',
      sourcemap: true
    },
    {
      file: pkg.module,
      format: 'es',
      exports: 'named',
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    postcss({
      extract: false,
      modules: true
    }),
    external(),
    resolve(),
    typescript({
      rollupCommonJSResolveHack: true,
      exclude: [
        '**/__tests__/**',
        '**/*.stories.tsx'
      ],
      clean: true
    }),
    commonjs({
      include: ['node_modules/**'],
      namedExports: {
        'node_modules/react/react.js': [
          'Children',
          'Component',
          'PropTypes',
          'createElement'
        ],
        'node_modules/react-dom/index.js': ['render']
      }
    })
  ]
}

But it doesn't work. It would be great, if somone could create simple library project with Typescript and module css.

Does this answer your question? [Can't import CSS/SCSS modules. TypeScript says "Cannot Find Module"](https://stackoverflow.com/questions/40382842/cant-import-css-scss-modules-typescript-says-cannot-find-module) — sportzpikachu, Dec 09 '20 at 06:23

score 2 · Answer 1 · answered Dec 08 '20 at 17:06

Check answers here Can't import CSS/SCSS modules. TypeScript says "Cannot Find Module"

Basically you need to add a file typings.d.ts with something like:

declare module "*.module.css" {
  const classes: { [key: string]: string };
  export default classes;
}

score 0 · Answer 2 · answered Mar 28 '20 at 17:15

0

You can use create-react-app and create a project like npx create-react-app myapp --typescript and then add a mobular css solution like styled components to your project. It is the simplest way for integrate React.

answered Mar 28 '20 at 17:15

Willey3x37

310
2
12

React library with typescript and module css

2 Answers2