Skip to content

CSS Modules have issued with object deconstruction #12096

Open
@Lagicrus

Description

@Lagicrus

Describe the bug

In react scripts 4.0.3 and earlier you were able to do

import {firstClass, title, bacon} from "./App.module.css"; // also using scss

But now when you do the same you get
export 'app' (imported as 'app') was not found in './App.module.css' (possible exports: default)
This can also be seen in https://blog.logrocket.com/a-deep-dive-into-css-modules/ and their repo @ https://github.com/lawrenceagles/css-module-demo

Did you try recovering your dependencies?

8.1.0 & no as this is a fresh install

Environment

Environment Info:

current version of create-react-app: 5.0.0
running from C:\Users\Lagicrus\AppData\Local\npm-cache_npx\c67e74de0542c87c\node_modules\create-react-app

System:
OS: Windows 10 10.0.22000
CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12600K
Binaries:
Node: 16.13.0 - E:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 8.1.0 - E:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.22000.120.0), Chromium (98.0.1108.62)
Internet Explorer: 11.0.22000.120
npmPackages:
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
react-scripts: 5.0.0 => 5.0.0
npmGlobalPackages:
create-react-app: Not Found

(I do have Chrome, this just can't find it weirdly)

Steps to reproduce

  1. Create a fresh CRA repo
  2. Rename App.css to App.module.css
  3. Replace import 'App.css'; in App.js with import {test} from "./App.module.css";
  4. Get error in browser

Expected behavior

To be able to import only the styles I need from a file and not the entire thing.
To not have to import styles and then deconstruct it on the next line which is verbosity for the sake of it.

Actual behavior

image

DEMO

https://github.com/Lagicrus/cra-bug12096

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions