Webpack Compilation Error #25300
Comments
|
This syntax is called a Can you
|
|
Unfortunately we have to close this issue due to inactivity. Please comment if there is new information to provide concerning the original issue and we can reopen. |
|
Hello there, Do you know any solution to this problem without changing the compile target or will such a solution come up? |
|
@Magg1808 could you provide more information on your setup? I scaffolded an Angular 15 application and imported a service into an e2e test and didn't have any problems. Is there a reproduction that I can clone and check out? |
|
Hi Zachary, sure, just let me know which settings to provide. |
|
@Magg1808 |
|
I found out that the confidentiality agreement does not allow me to share the setup. Where can I look for a solution? Does your Cypress 12 work with compiler target set to ES2022 and webpack 5 at your place? |
|
@Magg1808 here is a repo with Angular 15 and |
|
Thank you. I ran the tests by adding these compiler options to package.json in the e2e folder: |
|
@Magg1808 ES2021 is also working fine: |
|
I was not able to reproduce this on the repo I provided here. Not sure where the |
|
I'm having this same issue without typescript, using Cypress@12.4.1 (also had the issue on v12.1.0). My spec file imports a module which uses a public class field, and Cypress throws a "Webpack Compilation Error" at that point in the file when it tries to load. When I copy the same file into my project root and import it, it works just fine. import moduleName from '@org/moduleName' // <- fails
import moduleName from 'node_modules/@org/moduleName/index.js' // <- fails
import moduleName from './moduleName.js' // <- works fineSo it doesn't seem like this is a typescript config issue per se, but rather something to do with how Cypress/webpack is interpreting files loaded from another module (a folder with a |
|
Thanks, @LukasKlement. It works for me too. |
|
@dwhieb what version of babel/webpack are you on? The default preprocessor uses Webpack v4 I think, pretty old - if you install webpack 5, that might fix it. |
|
@lmiller1990 I'm not using webpack in this project (I'm using esbuild), so yeah, presumably it's just defaulting to v4. It would be nice if I didn't have to install webpack in my project to make Cypress work though. And I think (?) this is a regression, since I wasn't encountering this issue prior to Cypress v12. |
|
We haven't updated webpack in a good while; I'm surprised this randomly happened. If you can share a minimal reproduction, happy to have a look. Not a direct fix, but if you are using esbuild, worth considering using that for your preprocessor, too (vastly faster and more ergonomic than webpack). There seems to be 2 esbuild preprocessors, not sure which is most up to date:
I tried using esbuild for the preprocessor, it's around 30% faster on the Cypress test suite - definitely worth a try. |
|
I'll see if I can make a repro and check out the preprocessor and report back! Many thanks. |
|
After further investigating, it seems my issue had something to do with updates to esbuild and cypress-esbuild-preprocessor (which I was already using in my project but forgot about). The latest versions of each are currently incompatible. After pinning older versions of these, my problem went away. |
I am using Vite and I also get a similar error. How should I update to webpack? |
|
@flawnn Please provide a reproducible example of the issue you're encountering. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide. |
|
@flawnn If you are still having this issue and need help, please open a new issue with a reproducible example and link to this issue. |
|
This is finally going to be fixed in core, probably Cy 13 #27438 |
|
@warrensplayer we are facing the same issue for Cy13: import { formatNumber } from '@/utils/index'; // <-- does not work
import { formatNumber } from '@/utils'; // <-- does not work
import { formatNumber } from '@/utils/filtres'; // <-- worksHere is out setup:
{
"@cypress/vue": "^5.0.5",
"@types/cypress-dotenv": "^2.0.0",
//...
"cypress": "^13.1.0",
"cypress-dotenv": "^2.0.0",
"cypress-log-to-output": "^1.1.2",
"cypress-wait-until": "^2.0.1",
}
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"shared-types": ["types"],
"tests": ["tests"],
"@/*": ["src/*"]
},
"target": "es2019",
"module": "esnext",
"moduleResolution": "node",
"jsx": "preserve",
"sourceMap": true,
"inlineSources": true,
"sourceRoot": "/",
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"types": ["vite-svg-loader", "vite/client", "@types/jest", "cypress", "cypress-wait-until"],
"isolatedModules": true,
"skipLibCheck": true
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"jest.config.js"
]
}
|
|
Here is a reproduction example 
@warrensplayer @ZachJW34 @jennifer-shehane |
|
I have a similar issue with NextJS 13.5.4 with SWC Compiler. This is the project {
"compilerOptions": {
"target": "ES2022",
"lib": ["dom", "dom.iterable", "esnext"],
"baseUrl": ".",
"paths": {
"@atoms": ["src/components/atoms"],
"@atoms/*": ["src/components/atoms/*"],
"@molecules": ["src/components/molecules"],
"@molecules/*": ["src/components/molecules/*"],
"@organisms": ["src/components/organisms"],
"@organisms/*": ["src/components/organisms/*"],
"@stores": ["src/stores"],
"@stores/*": ["src/stores/*"],
"@layouts/*": ["src/layouts/*"],
"@utils/*": ["src/utils/*"],
"@data/*": ["src/data/*"],
"@graphql/*": ["src/graphql/*"],
"@type": ["src/types"],
"@type/*": ["src/types/*"],
"@hooks/*": ["src/hooks/*"]
},
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"strictNullChecks": false,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"include": ["next-env.d.ts", "codegen.ts", "src/**/*.ts", "src/**/*.tsx"],
"exclude": ["cypress.config.ts", "cypress", "node_modules"]
}This is the Cypress {
"compilerOptions": {
"types": ["cypress", "node"],
"baseUrl": "../../"
},
"extends": "../../tsconfig.json",
"include": ["**/*.ts"]
}And the error I get is: |
|
Similar issue with Next 14 tsconfig.json {
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next",
},
],
"paths": {
"@/*": ["./*"],
},
},
"include": ["cypress", "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"],
}
Just created random e2e test import { getURL } from "@/app/utils/getURL"
describe("template spec", () => {
it("passes", () => {
cy.visit(getURL())
cy.get("[data-testid='cypress-navbar']").should("exist")
})
})And I got this In fact //This function may be user on client side and server side
export const getURL = () => {
// if you change port - change it here as well
let url =
process.env.NODE_ENV === "development"
? "http://localhost:3029"
: process.env.NEXT_PRODUCTION_URL ?? process.env.NEXT_PUBLIC_SITE_URL ?? process.env.NEXT_PUBLIC_VERCEL_URL
url = url.includes("http") ? url : `https://${url}`
url = url.charAt(url.length - 1) === "/" ? url : `${url}/`
return url
} |
I think here you are missing |
May I kindly ask you about - where should I add |
jennifer-shehane
added
the
stage: needs investigating
|
Hello,
jsconfig.json cypress.config.js ` module.exports = defineConfig({ e2e: { component: { package.json Component testing is working well but e2e is not. Could someone can help me please ? |
Current behavior
I just added Cypress on an existing project, using vue and typescript.
Desired behavior
I should be able to run the test without errors.
Test code to reproduce
Test.ts
Cypress Version
12.2.0
Node version
16.10.0
Operating System
macOs
Debug Logs
Question
What am I missing? How could we import a typescript file without creating issues?
The text was updated successfully, but these errors were encountered: