Develop Reference

Cypress and Typescript - your configFile is invalid: config.ts

I am trying to setup a custom take in Cypress and am running into a Cypress config error whenever I import a Typescript file into my cypress.config.ts. Here is my code:
cypress.config.ts
import 'dotenv-defaults/config';
import { defineConfig } from 'cypress';
import { MongoMemoryServer } from 'mongodb-memory-server';
import db from './src/server/db/datasource';
const createDb = async () => {
const server = await MongoMemoryServer.create();
try {
db.setOptions({ url: server.getUri() });
await db.initialize();
} catch (err) {
throw err;
}
return db;
};
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
on('before:browser:launch', (browser, launchOptions) => {
if (browser.name === 'chrome') {
launchOptions.args.push('--proxy-bypass-list=<-loopback>');
launchOptions.args.push('--disable-dev-shm-usage');
launchOptions.args.push('--disable-gpu');
launchOptions.args.push('--no-sandbox');
return launchOptions;
}
});
on('task', {
log(message) {
console.log(message);
return null;
},
/* createDb() {
return createDb();
}, */
});
return config;
},
baseUrl: `http://localhost:${process.env.PORT || 3000}`,
video: false,
screenshotOnRunFailure: false,
modifyObstructiveCode: false, // Cypress utterly ruins Remix Context if this isn't disabled
chromeWebSecurity: false,
experimentalSessionAndOrigin: true,
experimentalSourceRewriting: true,
},
env: process.env,
});
The fourth line in the above file import db from './src/server/db/datasource'; is what breaks the config and results in this error:
Your configFile is invalid: /home/project/cypress.config.ts TypeError
[ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for
/home/project/cypress.config.ts
I have Googled the error and it seems to be a known one with Cypress, I have tried all the suggestions including upgrading Cypress to the latest version (^10.11.0) but none have helped.
I have tried planing around with my tsconfig.json but have not been able to make a difference. Here is that file:
{
"include": ["./*", "src", "test", "types", "scripts"],
"exclude": ["cypress" /* "./cypress.config.ts" */],
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"module": "esnext",
"jsx": "react-jsx",
"moduleResolution": "node",
"target": "es2019",
"baseUrl": ".",
"rootDir": ".",
"isolatedModules": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"strict": true,
"allowJs": true,
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true,
"noEmit": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"strictPropertyInitialization": false,
"paths": {
"~/*": ["./src/*"],
"#test": ["./test"],
"#test/*": ["./test/*"]
}
},
"ts-node": {
"compilerOptions": {
"module": "commonjs"
}
}
}
The command I am running to launch cypress is just npx cypress open. Would love some help as it's unclear what is causing this issue!

Fixed it with Below Method
Delete node_module Folder
Delete package-lock.json·
Run npm cache clean --force Command Twice
Run npm i·

How to make eslint resolve paths mapped in jsconfig

In my nextjs project I have mapped path in jsconfig.json to make easy absolute imports
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"#/*": ["./*"]
},
"target": "es6",
"module": "commonjs",
"experimentalDecorators": true
}
}
My import paths look like this
import { VIEW } from '#/src/shared/constants';
My eslintrc.js has settings specified as
module.exports = {
... ,
settings: {
"import/resolver": {
alias: {
extensions: [".js"],
map: ["#", "."]
}
}
}
}
I am still getting the error saying can't resolve "#/what/ever/my/path/is"
How do I make eslint realize the jsconfig path

I was using babel-eslint as my parser in eslintrc. While searching, I realized I need to add babel-plugin-module-resolver in babelrc to resolve the modules. In this file we can define our mapped paths which are there in our jsconfig.
Hence adding the following plugin in the babelrc file compiled my code successfully.
[
"module-resolver",
{
"alias": {
"#": "./"
}
}
]

According to the docs for eslint-import-resolver-alias, the map property should be an array of arrays, so try this:
module.exports = {
... ,
settings: {
"import/resolver": {
alias: {
extensions: [".js"],
map: [ ["#", "."] ]
}
}
}
}
Also, double-check that you actually have eslint-import-resolver-alias installed - it's easy to forget!

How to import a self-made module in create-react-app?

I'm using create-react-app in my ReactJS app with TypeScript, and I would like to import a TypeScript/JavaScript module that I created in another project.
The module consists of a file mymodule.js, in which the code looks approximately like this:
var mymodule;
(function (mymodule) {
var MyClass = /** #class */ (function () {
function MyClass() {
}
MyClass.myMethod = function () {
// code
};
return MyClass;
}());
mymodule.MyClass = MyClass;
})(mymodule || (mymodule = {}));
Then there is the type definition file mymodule.d.ts, which looks like this:
declare module mymodule {
class MyClass {
private static myMethod;
}
}
In my create-react-app project, I placed these two files in the folder /src/vendor, and I want to use the module like this:
import { MyClass } from '../vendor/mymodule';
...
However, Visual Studio Code (i.e. the TypeScript compiler) says
File '.../vendor/mymodule.d.ts' is not a module. ts(2306)
When I run the project, the variables from the module (e.g. the class MyClass) are undefined.
This might be the reason for the error: The library is generated using module: "AMD", but create-react-app seems to enforce module: "esnext".
Edit: Here's the tsconfig.json of the create-react-app project:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"jsx": "react",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true
},
"include": [
"src"
]
}

You can't import the file due to the fact that you are not exporting the module. In order for module loading to work, you should have an export at the bottom of your myModule class file.
export {
mymodule
}

How to include imported class in bundle, when not directly used

I'm writing my own JSX pragma and it does work pretty well except now when tying to introduce typescript JSX will not work for me. My class is being tree-shaken out or something, unless it is actively being used within a module, eg in a log statement:
/** #jsx V.create */
/** #jsxFrag V.Fragment */
import V, { render } from "#V"; // `#V` is in a webpack resolve.alias
render(document.getElementById("app"), <h1>hi</h1>);
external "V":1 Uncaught ReferenceError: V is not defined
But,
/** #jsx V.create */
/** #jsxFrag V.Fragment */
import V, { render } from "#V"; // `#V` is in a webpack resolve.alias
console.log({ V })
render(document.getElementById("app"), <h1>hi</h1>);
^^ Works!
Relevant webpack object:
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
tsconfig.json
{
"include": ["src/**/*"],
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "commonjs",
"target": "esnext",
"jsx": "react",
"declaration": true,
"sourceMap": true
},
"baseUrl": "src",
"paths": {
"#V": ["js/V/index.ts"]
}
}
How can I ensure Webpack/Typescript will not remove this import?

You need to disable tree shacking for the module V.
You can use sideEffects array to disable tree shaking
Here the documentation of WebPack
In your package.json file
{
"name": "your-project",
"sideEffects": [
"./src/some-side-effectful-file.js"
]
}

Typescript shared path, unable to export const

I'm working on a project where the front-end and the back-end reside in the same directory and both use TypeScript.
I am using a shared path to store some interfaces and constants between the two projects.
But, when I try to export a constant from any file in /shared, I get a :
Error: Cannot find module '#shared/test'
server-config.ts:
"compilerOptions": {
"baseUrl": "./src/server/",
"sourceMap": false,
"module": "commonjs",
"moduleResolution": "node",
"target": "ES2017",
"types": ["node"],
"outDir": "./dist/",
"allowJs": true,
"typeRoots": [
"node_modules/#types"
],
"paths": {
"#shared/*": ["../shared/*"]
},
/shared/test.ts:
// If I remove the following line, no compile error, even finds TheTest
export const TEST = 'test';
export class TheTest {
}
import
// << Module not found (only if I import TEST)
import { TEST, TheTest } from '#shared/test';
export function Foo() {
console.log(TEST);
}