Develop Reference

[ERR_MODULE_NOT_FOUND]: Cannot find package imported

I would like to change import from ../../../db/index.js to db/index.js
I have already added this setting in my jsconfig.json but I still got this error.
{
"compilerOptions": {
"module": "commonjs",
"baseUrl": "src"
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}

Finally found the right answer after trying different kinds of approaches.
Eslint import resolver and babel import resolver seem to be not working.
Add the ff:
package.json
"imports": {
"#root/*": {
"default": "./src/*"
}
},
If you want to access that import directy via ctr+click/left click create jsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"baseUrl": "./src",
"paths": {
"#root/*": ["./*"]
}
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}
Usage in your index.js:
import level1 from '#root/level1/index.js';
instead of:
import level1 from './level1/index.js';
https://marian-caikovski.medium.com/4-ways-to-avoid-double-dots-in-module-specifiers-f5b6086cd9d1

These are two very different things:
import { something } from '../../something' - local import (file you've created)
import { something } from 'something' - import from a package (e.g. installed with yarn add something
If you'd like to clean up your imports and be able to do something like:
import { something } from '#components/something' then you need additional plugins/setup. It's worth looking into babel-plugin-root-import for example.
There might be other plugins/tools to do that but I've never had the need do do that so I don't know.

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·

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);
}

Importing RxJS through System.js in typescript

I'm trying to import RxJS 5 into a typescript app using System.js as the module type. It's almost there, but when I do
import * as Rx from "path/to/rxjs/Rx";
the Rx object doesn't contain the module contents of Rx directly, but has a property named 'default' that DOES contain the module contents:
Rx.Observable.of(1,2,3) ... //does not work, Rx.Observable is undefined
Rx.default.Observable.of(1,2,3) ... //DOES work, and contains the module contents as expected
My tsconfig looks like this:
{
"compilerOptions": {
"module": "system",
"allowSyntheticDefaultImports" : true,
"allowJs" : true,
"noImplicitAny": true,
"removeComments": false,
"preserveConstEnums": true,
"baseUrl" : "./",
"sourceMap": true,
"target": "es6",
"lib" : ["dom","es6","dom.iterable","scripthost","es2015","es2016"],
"strict": true,
"forceConsistentCasingInFileNames": true,
"outFile" : "./js/out.js"
},
"files": [
"main.ts"
]
}
And my invocation of system.js looks like this:
System.config({
"baseURL" : "/",
packages: {
'../node_modules/rxjs': {
defaultExtension: 'js',
}
}
});
System.import("./js/out.js")
.then(() => {
console.log("js loaded");
System.import("main");
})
.catch((err)=> {
console.error("Error: " + err);
});
I suspect that this is a configuration variable I need to pass to system.js, but the documentation on cross-module system imports isn't the most helpful to a newbie. I've already tried setting the package type of ../node_modules/rxjs to 'cjs' and it has the same result.
As an aside: 5 different module systems (AT LEAST!) for Javascript is sorta crazy. And I thought the Java Jigsaw brouhaha was bad.

You are importing all exports of path/to/rxjs/Rx in to a new object, Rx.
import * as Rx from "path/to/rxjs/Rx";
To instead import the module's default export, use this:
import Rx from "path/to/rxjs/Rx";

how could I define a global module by typescript and not add to compiled file?

If a have a global module in a.ts:
export = class A(){
}
I want to import this module into a lot of .ts file, but when I do this, the module A will be compile to every file that I import module A.
So how can I define a global module, when I import it, this module will not be add to the compiled file.
my tsconfig.json :
{
"compilerOptions": {
"module": "amd",
"target": "es5",
"sourceMap": false,
"outFile": "index.js",
"moduleResolution": "classic",
"baseUrl": "./",
"paths": {
"jQuery": ["types/jquery.d.ts"],
}
},
"exclude": [
"node_modules"
]
}