Use CSS Modules in React components with Typescript built by webpack

Question

I want to use the css-loader with the 'modules' option of webpack in a React application written in Typescript. This example was my starting point (they are using Babel, webpack and React).

webpack config

var webpack=require('webpack');
var path=require('path');
var ExtractTextPlugin=require("extract-text-webpack-plugin");

module.exports={
    entry: ['./src/main.tsx'],
    output: {
        path: path.resolve(__dirname, "target"),
        publicPath: "/assets/",
        filename: 'bundle.js'
    },
    debug: true,
    devtool: 'eval-source-map',
    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ],
    resolve: {
        extensions: ['', '.jsx', '.ts', '.js', '.tsx', '.css', '.less']
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'ts-loader'
            },
            {
                test: /\.tsx$/,
                loader: 'react-hot!ts-loader'
            }, {
                test: /\.jsx$/,
                exclude: /(node_modules|bower_components)/,
                loader: "react-hot!babel-loader"
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader"
            }, {
                test: /\.css/,
                exclude: /(node_modules|bower_components)/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css", {allChunks: true})
    ],
    postcss: function() {
        return [require("postcss-cssnext")()]
    }
}

This is a React component I want to style with an accompanying CSS file:

import React = require('react');
import styles = require('../../../css/tree.css')

class Tree extends React.Component<{}, TreeState> {
...

    render() {
        var components = this.state.components
        return (
            <div>
                <h3 className={styles.h3} >Components</h3>
                <div id="tree" className="list-group">
                    ...
                </div>
            </div>
        )
    }
}

    export = Tree

tree.css

.h3{
    color: red;
}

No matter what I'm doing (tried changing the import syntax, tried declaring the 'require' for ts-loader, described here, I always get:

Uncaught Error: Cannot find module "../../../css/tree.css"

at runtime and

error TS2307: Cannot find module '../../../css/tree.css'.

by the TS compiler. Whats happening? Seems to me that css-loader is not even emitting ICSS? Or is it ts-loader behaving wrong?

import someName = require('/some/path') is two different kinds of invalid ;-) - are you using import or require? — Sean Vieira
– Sean Vieira, Commented Jan 26, 2016 at 13:19
What do you mean? Thats valid Typescript syntax. @SeanVieira — Shady
– Shady, Commented Jan 26, 2016 at 13:37
Yea, TypeScript adopted sort of their own module syntax while ES6 modules were still being developed. It's a hybrid between CJS and ES6 where you use import (like ES6) but also require (like CJS). TypeScript also (now) supports full ES6 syntax though as well. — James Brantly
– James Brantly, Commented Jan 26, 2016 at 13:45

James Brantly · Accepted Answer · 2016-01-26 13:40:01Z

13

import has special meaning to TypeScript. It means that TypeScript will attempt to load and understand the thing being imported. The right way is to define require like you mentioned but then var instead of import:

var styles = require('../../../css/tree.css')`

answered Jan 26, 2016 at 13:40

James Brantly

5692 silver badges9 bronze badges

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

8 Comments

Shady Over a year ago

Do I still need to define 'require' in a d.ts? Do I have to target ES6 in my tsconfig? I get the same error @James Brantly

James Brantly Over a year ago

You need to define require in a d.ts, yes, otherwise TypeScript will complain that there is no require function. The target doesn't matter, should work the same using any target. Do you still see specifically "TS2307"? If not, then it's no longer a TypeScript error and it's webpack saying that it can't find the file (due to a bad path).

Shady Over a year ago

Yes you are right, the TS2307 is gone. The runtime error comes from webpack. How do I need to understand the path? Is it relative to the webpack.config.js?

James Brantly Over a year ago

No, it's relative to the file that's doing the requiring.

Shady Over a year ago

Right... webpack just cant find the file. I tried pulling it into the same directory as the .tsx file. No luck... Do you have a working example of Typescript+rect+modules at hand?

|

Martin · Accepted Answer · 2016-03-19 21:35:05Z

9

Declare 'require' as per ts-loader documentation.
Use 'require' as generic with < any > type: require< any >("../../../css/tree.css").

*.d.ts file

declare var require: {
   <T>(path: string): T;
   (paths: string[], callback: (...modules: any[]) => void): void;
   ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
};

*.tsx file with component

const styles = require<any>("../../../css/tree.css");
...
<h3 className={styles.h3}>Components</h3>

I know it was already answered, but I was struggling with it for a while before I realized I need to use generic type specification, without that I wasn't able to access content of CSS file. (I was getting error: Property 'h3' does not exists on type '{}'.)

answered Mar 19, 2016 at 21:35

Martin

1163 bronze badges

1 Comment

Shady Over a year ago

Yeah or you can just leave away the generic <T> in the declaration of 'require': declare var require:{(path: string): T}

Yosuke Kurami · Accepted Answer · 2016-05-20 18:41:00Z

3

You can use https://github.com/Quramy/typed-css-modules, which creates .d.ts files from CSS Modules .css files. Please see also https://github.com/css-modules/css-modules/issues/61#issuecomment-220684795

answered May 20, 2016 at 18:41

Yosuke Kurami

862 bronze badges

Comments

Krzysztof Sztompka · Accepted Answer · 2016-01-26 13:28:43Z

1

I had similar problem. For me, works import:

import '../../../css/tree.css';

Webpack change this like any other normal imports. It change it to

__webpack_require__(id)

One drawback is that you lost control on style variable.

answered Jan 26, 2016 at 13:28

Krzysztof Sztompka

7,2144 gold badges36 silver badges49 bronze badges

4 Comments

Shady Over a year ago

But I need the variable 'styles' for setting the className in the React component like: <div className={styles.style}/> Can you explain further what you mean?

Krzysztof Sztompka Over a year ago

All styles are available as normal css. Then you could use it in your h3 component: <h3 className="h3" >Components</h3>

Shady Over a year ago

I see what you mean, but my goal is to use CSS modules where every CSS file is scoped locally (one css file per react component). Thats why I need to assign the className programmatically

Krzysztof Sztompka Over a year ago

I see, I didn't find any better solution only this workaround. I will follow this question, maybe you will have a luck.

Gareth Evans · Accepted Answer · 2017-02-05 00:05:05Z

0

A bit late to game but you can create a file called tree.css.d.ts in the same folder as tree.css that has this line:

export const h3: string;

and still use the import statement import * as styles from ... and you will still getcode completion and compile time checking.

You can either manage these definition files manually or you could integrate typed-css-modules into your build pipeline (https://github.com/Quramy/typed-css-modules)

answered Feb 5, 2017 at 0:05

Gareth Evans

763 bronze badges

Collectives™ on Stack Overflow

Use CSS Modules in React components with Typescript built by webpack

5 Answers 5

8 Comments

1 Comment

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

1 Comment

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related