Destructuring CSS module import

user_13396027 0
Viewed 345

I use CSS modules in my React app. Today I was trying to code and had to upgrade some dependencies - react from 17.0.1 to 17.0.2, react-scripts from 4.0.3 to ^5.0.0, eslint from ^7.32.0 to 8.0.0 - and I had a bunch of errors. I managed to fix a lot of them, but I'm getting a lot of errors like this one:

export 'headerImageWrapper' (imported as 'headerImageWrapper') was not found in './Header.module.css' (possible exports: default)

I've been importing destructured classes from CSS modules - and it was working until today.

import React from 'react';
import logo from '../../assets/logo.png';
import {
  headerWrapper,
  headerImageWrapper,
  headerLogo,
  headerTitleWrapper,
} from './Header.module.css';

export default function Header() {
  return (
    <div className={headerWrapper}>
      <div className={headerImageWrapper}>
        <img className={headerLogo} src={logo} alt="Logo" />
      </div>
      <div className={headerTitleWrapper}>
        <p>Biblioteca</p>
        <p>Colégio</p>
      </div>
    </div>
  );
}

It does work when I import it as "styles", but I wanted to keep it destructured so I didn't have to use "styles.headerWrapper"

css-modules react-native reactjs destructuring css
1 Answers

I am getting this same error and don't want to revert to styles.myStyle. So right now I am still importing the entire styles object, import styles from "./blah.module.css", but then I deconstruct the variables after const {styleOne, styleTwo} = styles;. This allows you to keep everything else the same, but still kinda annoying.

user_111949170
Related