Why do I get a "Module parse failed" when compiling my SASS module?

Question

I'm getting the following error every time I run my CRA app, though everything runs correctly:

Compiling...
Files successfully emitted, waiting for typecheck results...
Compiled with warnings.

./src/app/theme/colors.module.scss.d.ts 4:12
Module parse failed: Unexpected token (4:12)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| $RefreshSetup$(module.id);
| 
> const colors;
| export default colors;
|

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Here's the culprit file:

export interface AppColors {
    background: string;
    primary: string;
    secondary: string;
}

const colors: AppColors;

export default colors;

It allows me to re-use my SCSS/SASS variables in my Typescript files.

What's wrong?

Hey! Wanna also add your webpack config so we can see loaders and their order? — Serhii Matrunchyk, Jan 30 '21 at 10:33

score 1 · Answer 1 · answered Jan 30 '21 at 12:49

Try replacing the content of the file with:

declare module 'AppColors' { export interface AppColors { background: string; primary: string; secondary: string; } export = AppColors }

You can’t define variables in d.ts files

(sorry for not formatting code - writing from cell)

score 1 · Accepted Answer · answered Jan 30 '21 at 13:04

1

In the end I just had to replace

const colors: AppColors;

with

declare const colors: AppColors;

answered Jan 30 '21 at 13:04

Sammy

3,395
7
49
95

Why do I get a "Module parse failed" when compiling my SASS module?

2 Answers2