Error importing sass file with cypess and componentFolder

[andrescabana86]

I am having the same problem with a sass file

// cy-ts-preprocessor.ts
import cypressWebpack from '@cypress/webpack-preprocessor'

const webpackOptions = {
  resolve: {
    extensions: ['.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: ['@babel/plugin-proposal-class-properties'],
        },
      },
      {
        test: /\.sass$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
          },
        ],
      },
    ],
  },
}

const options = {
  webpackOptions,
  watchOptions: {},
}

export default cypressWebpack(options)

and inside of plugin/index.js

// plugin/index.ts
import cypressTypeScriptPreprocessor from './cy-ts-preprocessor'

export default (on, config) => {
  on('file:preprocessor', cypressTypeScriptPreprocessor)
}

I am receiving the next error

src/components/action-bar-button/action-bar-button.component.sass:4
background: #ffffff;
            ^
ParseError: Unexpected token

I also tried with

{
  test: /\.(ts|tsx)$/,
  exclude: [/node_modules/],
  use: [
    {
      loader: 'ts-loader',
    },
  ],
},

same error

[bahmutov]

Hi @andrescabana86 is your repo public? Also, I notice your provide list of extensions to resolve

  resolve: {
    extensions: ['.ts', '.tsx'],
  },

Could you remove it? Seems webpack is not loading the sass files using the sass loader

[bahmutov]

I should add an example with Node sass in this repo, right now there is only a note https://github.com/bahmutov/cypress-react-unit-test#common-problems

[andrescabana86]

I should add an example with Node sass in this repo, right now there is only a note https://github.com/bahmutov/cypress-react-unit-test#common-problems

Not my repo, this is an issue at the company where I work, I proposed cypress as the testing tool and I found this in the middle of seeking a unit test approach.

@bahmutov I can create something similar in a public repo... but I will try removing list of extensions first.

thank you

[bahmutov]

🎉 This issue has been resolved in version 4.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀