Cypress Components - React & Webpack - missing configuration?

[Zarmakuizz]

Hello!

I tried to reproduce my configuration in this repo: Cypress Webpack Alias.

Steps I followed:

• Created project using create-react-app
• Created dummy files inside src
• Ejected the configuration
• After that, I added aliases in my project.

The goal: I can call my project files using:

import Title from '@Components/Title';
import { expandTitle } from '@Helpers/title';

And, if I load my project files into a test, the path resolution works as well.

This is where I stumbled on two issues.

1. Webpack aliases not recognized

(disclaimer: I'm not talking about Typescript aliases, I'm not talking about query aliases.)

If I start the only Component test into a browser, the console throws this:

ERROR in ./cypress/component/Title.cy.js 1:0-38
Module not found: Error: Can't resolve '@Components/Title' in 'D:\Code\cypress-components-toast\cypress-toast\cypress\component'

2. I cannot mount any Component in cy.mount().

If I modify my Component test file and write this:

import { mount } from 'cypress/react'

describe('Title.cy.js', () => {
  it('playground', () => {
	mount(<p>Toast</p>);
	
	cy.get('p').should('be.visible');
  })
})

I get an error at the mount line that < is unrecognized token.

For what I can see online, Component testing with React seems to work "out of the box", so I am quite confident that I missed an obvious configuration step. Any idea what fails?