Attempted import error: 'styles' is not exported from './styles.scss' (imported as 'styles')

Question

guys

I'm trying to build my react project, but it keeps saying

'Attempted import error: 'styles' is not exported from './styles.module.scss' (imported as 'styles').'

So, I guess I've got wrong settings in my webpack config file but have no idea what's wrong in there. I'm using css module so have tried this way https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules, but didn't work for me.

This is the one of the source file I'm using styles

import styles from "./styles.scss";
import { withRouter } from "react-router";

const ArrowBack = ({ history, onClick }) => {
    return (
        <button type="button" onClick={onClick || history.goBack} className={styles.arrowBack}>
            <span className={styles.bar}></span>
        </button>
    );
};

export default withRouter(ArrowBack);

Here is my files

• webpack config https://gist.github.com/bbatta38/45695862bdde7928b788420793c006b6
• package json https://gist.github.com/bbatta38/4b91a2b84aaa237b54277b78525f8473
• build js https://gist.github.com/bbatta38/e18792375a107afcfedfeba48bc3fe1e

It's been already two days to find out any ways to make it work. Please help me if you have any idea to resolve this error.

Answer 1

Try

import styles from "./styles.module.scss";

It seems you're missing the 'module' in the file name.