Office Add-in: Support CSS Module in React app

[Cuong Le (cuongle)]

Hi All,

I got stump when trying to set up CSS Module into my Office Add-in - React app. I got the exception:

Cannot read properties of undefined (reading 'content')

My global.d.ts:

declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

Typescript configuration:

{
  "compilerOptions": {
    // other options...
  },
  "include": ["src/**/*"]
}

Webpack configuration:

module: {
  rules: [
    {
      test: /\.module\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[name]__[local]__[hash:base64:5]',
            },
          },
        },
      ],
    },
    // other rules...
  ],
},

And the code:

import styles from "./Settings.module.css";

  <div className={styles.content}>
      <Field label="API URL">
        <Input onChange={handleApiUrlChange}
               value={state.apiUrl}
        />
      </Field>

      <Field label="API Key">
        <Input onChange={handleApiKeyChange}
               value={state.apiKey}
        />
      </Field>
    </div>

Looks like for styles is undefined and cannot read content from css.

Is there any example that support css module from Office Add-in React?