TypeScript: Element implicitly has an 'any' type because type typeof css file has no index signature

Question

Im converting React app to use Typescript. And Im getting the following error:

ERROR in [at-loader] ./src/components/Services/Services.tsx:34:29
    TS7017: Element implicitly has an 'any' type because type 'typeof "/Users/path/to/project/src/components/Services/Services.css"' has no index signature.

Webpack config

    const path = require("path");

module.exports = {
    context: path.join(__dirname, "src"),
    entry: ["./index.js"],
    output: {
        path: path.join(__dirname, "www"),
        filename: "bundle.js"
    },
    devtool: "sourcemap", // has to be removed in production
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"],
        modules: [path.join(__dirname, "node_modules")]
    },
    module: {
        rules: [
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
            {
                test: /\.(jsx?)$/,
                exclude: /node_modules/,
                use: ["babel-loader"]
            },
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "typings-for-css-modules-loader",
                        options: {
                            modules: true,
                            localIdentName: "[name]__[local]___[hash:base64:5]"
                            // namedExport: true
                        }
                    },
                    "postcss-loader"
                ]
            },
            {
                test: /\.(jpeg|jpg|png|gif|svg)$/i,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            outputPath: "images/"
                        }
                    }
                ]
            }
        ]
    }
};

And this is my tsconfig:

{
    "compilerOptions": {
        "outDir": "./www/", 
        "sourceMap": true,
        "noImplicitAny": true,
        "alwaysStrict": true,
        "strictNullChecks": true, 
        "module": "es6", 
        "moduleResolution": "node",
        "jsx": "react", 
        "target": "es5",
        "allowJs": true,
        "allowSyntheticDefaultImports": true
    },
    "include": ["./src/**/*"]
}

This is the Services.tsx file:

import React from "react";
import ReactDOM from "react-dom";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import queryString from "query-string";

import * as styles from "./Services.css";
import globalStyles from "../../styles/global.css";
import SubHeader from "../common/SubHeader";

class Services extends React.Component<any, any> {
    constructor() {
        super();
    }

    render() {
        return (
            <div className={styles["services"]}>
                <SubHeader text={"MY SERVICES"} />
                <div className={styles["body"]}>
                    //loop over props and render
                </div>
            </div>
        );
    }
}

function mapStateToProps(state: any) {
    return {
        services: state.services,
        vehicles: state.vehicles
    };
}

export default connect(mapStateToProps)(Services);

This is the Services.css file:

.services {
    padding-top: 64px;
    .body {
        margin: 16px;
    }
}

And this is the Services.css.d.ts file created by typings-for-css-modules-loader:

export interface IServicesCss {
  'services': string;
  'body': string;
}

export const locals: IServicesCss;

Im using typescript: "^2.7.2" and typings-for-css-modules-loader: "^1.7.0"

I cant figure out what the error means. I searched online and all the resource mention about index signature related. Since Im new to Typescript, cant figure out what it takes to fix the issue.

It would sure help if you showed the Services.tsx file, where the error is being flagged. — kshetline
– kshetline, Commented Mar 12, 2018 at 1:10
Also share the .css file. It looks like you're using some module that allows you to write CSS as Typescript instead. — Evert
– Evert, Commented Mar 12, 2018 at 1:11
import * as styles from "./Services.css"; doesn't make sense. — Aluan Haddad
– Aluan Haddad, Commented Mar 12, 2018 at 5:09

Neha Tawar · Accepted Answer · 2018-03-12 08:26:30Z

1

Try this might help article for style loader

Typescript is unable to load the css files or is unable to find the declarations for the same please do try these webpack.config.js changes of adding a style-loader in plugins might help and your related problem will be solved

answered Mar 12, 2018 at 8:26

Neha Tawar

7058 silver badges25 bronze badges

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

1 Comment

Ivin Over a year ago

I have added that already. That loader is the one that is creating the Services.css.d.ts. But its not helping issue.

Ivin · Accepted Answer · 2018-03-13 01:08:37Z

The error/warning was coming because namedExport was not set as true. (I had it commented out)

Note: even with namedExport: false, the code will run. But the .css.d.ts file created will be of the following structure:

export interface IServiceDetailCardCss {
  'service-detail-card': string;
  'left-col': string;
  'amount': string;
  'symbol': string;
}

export const locals: IServiceDetailCardCss;

But, if you set namedExport: true, each classname will be an individual named export, like this:

export const serviceDetailCard: string;
export const leftCol: string;
export const amount: string;
export const symbol: string;

..and you will be able to reference them like styles.serviceDetailCard in your JSX.

Note: If you enable namedExport: true, you should also couple it with camelCase: true, to convert classnames of type some-classname to someClassname.

Collectives™ on Stack Overflow

TypeScript: Element implicitly has an 'any' type because type typeof css file has no index signature

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related