Module scss during component testing

[bryansantamaria]

Hello, I have a next.js application and I've done all the configuration for testing components with cypress.
I have succeeded if I only include the react component.

index.jsx

import React from 'react';

function ButtonComponent() {
    function handleOnClick(e) {
        console.log(e.target.value);
    }
    return (
        <button
            type="button"
            onClick={handleOnClick}
            value="hej"
        > Click me
        </button>
    );
}

export default ButtonComponent;

test.spec.js

import React from 'react';
import { mount } from '@cypress/react';
import ButtonComponent from './ButtonComponent';

describe('BryanButton component', () => {
    it('works', () => {
        mount(<ButtonComponent />);
        // now use standard Cypress commands
        cy.contains('Click me').should('be.visible');
    });
});

As soon as I include a modular scss file. The loader fails.

button.module.scss

.button {
    padding: 10px;
    border-radius: 8px;
    color: black;
    background-color: blue;
}

import in component
import Styles from './button.module.scss'

This is the error message that I receive:

Error: Webpack Compilation Error
./src/components/button.module.scss
Module build failed (from ./node_modules/next/dist/build/webpack/plugins/mini-css-extract-plugin/src/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/bryansantamaria/Documents/dev/web-4.0/src/components/button.module.scss: Unexpected token (1:0)

> 1 | .button {
    | ^
  2 |     padding: 10px;
  3 |     border-radius: 8px;
  4 |     color: black;
 @ ./src/components/ButtonComponent.jsx 3:0-42 11:15-21
 @ ./src/components/test.spec.js

How can I get this to work?
Any help or tips are greatly appreciated! :)

[JohnHuynh]

Try to add the following to your cypress.json:

{
 "nodeVersion":"system"
}

Seems to be similar to this issue: #3875