First compilation fails because typings aren't generated yet

[SaphuA]

We have successfully introduced this package into our project and typings are generated just fine. However a problem arose on our build server because the first time when the project is compiled with webpack the typing files aren't generated yet causing the typescript compilation to fail.

Are we doing something wrong? Is there any way to fix it?

Here's our module config:

module: {
    rules: [
        { test: /\.scss$/, use: ["style-loader", { loader: "typings-for-css-modules-loader", options: { modules: true, namedExport: true, camelCase: true, localIdentName: "[path][name]__[local]--[hash:base64:5]" } }, "sass-loader"] },
        { test: /\.tsx?$/, use: [{ loader: "ts-loader", options: { transpileOnly: true } }] }
    ]
},

[SaphuA]

So I'm guessing this is a fundamental problem with this library? How are others dealing with this issue?

[huan086]

Typescript compiler is loaded first and it immediately sees scss as unrecognized. Add a new global.d.ts file with the following content to get Typescript to ignore scss and css

declare module '*.css';
declare module '*.scss';

[Manc]

I had exactly the same problem, but @huan086's suggested solution seems to work for me. Thanks!

[joshuatshaffer]

Unfortunately, @huan086's suggestion is only a workaround. Making these module declarations effectively disables type checking on the first compilation. All .css and .scss modules are given the any type, even modules which do not exist.

What would fix this issue is forcing the CSS loaders to run before the TypeScript compiler. I don't know how this can be done with WebPack; It may even be impossible. GraphQL Code Generator does a similar job of generating types, but it runs as a separate command before WebPack is run.

I think typescript loader firstly to run to parse ts files collecting dependencies, when it meets css files it will use css-loader, so css-loader can not run before ts-loader, then the .d.ts files can not be generated at first compilation. If @huan086 's suggestion is not good enough for you, you can use plugins, I am also looking for a good webpack plugin for my css types. If you find one please also tell me.

[Billy-]

I'm also running into this issue. It will crop up any time you might want to use typescript outside of webpack - for me it's running unit tests, when the css definitions aren't available (e.g in CI).

I don't want to use declare module '*.css'; as I want the types to be checked.

At the moment my current fix is running the entire webpack build (redundantly) before running tests.

Would it be possible to separate out the type definition generation from the rest of the loader, to be able to run it independently?