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 [email protected] (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 {
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": ["./node_modules/cypress", "cypress/**/*.js"]
}cypress.config.js const { defineConfig } = require("cypress");
const dotenv = require('dotenv')
const env = dotenv.config('./.env.local').parsed
module.exports = defineConfig({
env: {
...env,
},
e2e: {
specPattern: "src/tests/e2e/**/*.spec.js",
},
component: {
specPattern: "src/tests/components/**/*.spec.js",
devServer: {
framework: "vue-cli",
bundler: "webpack"
},
},
});package.json {
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve & yarn svg-sprite",
"build": "vue-cli-service build & yarn svg-sprite",
"watch": "vue-cli-service build --mode development --watch & yarn svg-sprite",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint",
"svg-sprite": "svg-sprite -d --dx --dest=./public/sprite/ ./src/assets/icons/*.svg"
},
"pre-commit": [
"test:unit"
],
"dependencies": {
"@ungap/structured-clone": "^1.2.0",
"@vueuse/core": "^10.5.0",
"axios": "^1.5.1",
"core-js": "^3.8.3",
"dotenv": "^16.4.5",
"moment": "^2.29.4",
"object.groupby": "^1.0.1",
"pinia": "^2.1.6",
"register-service-worker": "^1.7.2",
"reset-css": "^5.0.2",
"sass-mq": "^6.0.0",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vue3-rich-accordion": "^0.0.7",
"vuedraggable": "^4.1.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@cypress/vue": "^6.0.0",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-e2e-cypress": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-pwa": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-unit-jest": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "^5.0.8",
"@vue/eslint-config-standard": "^6.1.0",
"@vue/test-utils": "^2.0.0-0",
"@vue/vue3-jest": "^27.0.0-alpha.1",
"babel-jest": "^27.0.6",
"cypress": "13.6.6",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
"jest-mock-axios": "^4.7.3",
"path": "^0.12.7",
"pre-commit": "^1.2.2",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"svg-sprite": "^2.0.2"
}
}Component testing is working well but e2e is not. Could someone can help me please ? |
|
|
Since today we seem to suddenly have the same issue: |
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: