React library with typescript and module css [duplicate]

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" — sportzpikachu
– sportzpikachu, Commented Dec 9, 2020 at 6:23

user1205028 · Accepted Answer · 2020-12-08 17:06:17Z

4

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;
}

answered Dec 8, 2020 at 17:06

user1205028

514 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Willey3x37 · Accepted Answer · 2020-03-28 17:15:46Z

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, 2020 at 17:15

Willey3x37

3102 silver badges14 bronze badges

Collectives™ on Stack Overflow

React library with typescript and module css [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related