Descubrí que no puedo hacer que funcione la importación llamada con módulos css en create-reat-app.

El siguiente código dispara un error:

import * as styles from './PriceTable.module.css';

y el error es:

export 'table' (imported as 'styles') was not found in './PriceTable.module.css' (possible exports: default)

Sé que solo puedo usar import styles from './PriceTable.module.css'; pero esto no es lo que necesito ya que estoy usando un paquete y requiere importaciones nombradas para sacudir árboles.

Agradecería si alguien tiene alguna idea sobre esto, ¿cómo solucionarlo?

Aquí está el código:

 import React from 'react'; import * as styles from './PriceTable.module.css'; const PriceTable = (props) => { console.log(styles) return ( <div className={styles.table}>This is a price table {props.widget} and the hex color is: {props.color} !</div> ) } export default PriceTable;

paquete.json

 { "name": "react-widgets", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", "web-vitals": "^1.1.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "serve-build": "serve -s build", "test": "react-scripts test", "eject": "react-scripts eject", "build:widget": "parcel build src/index.js --no-source-maps --dist-dir docs" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "parcel": "^2.0.1", "postcss": "^8.4.5", "react-app-rewired": "^2.1.8" } }