Develop Reference

Error [ERR_REQUIRE_ESM]: require() of ES Module not supported : file-url

I'm getting this strange error:
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/raphy/Raphy-Template/node_modules/file-url/index.js from /home/raphy/Raphy-Template/dist/src/main/main.js not supported.
Instead change the require of index.js in /home/raphy/Raphy-Template/dist/src/main/main.js to a dynamic import() which is available in all CommonJS modules
And I do not understand why this happens:
node: v16.15.0 ,
typescript": "^4.5.4 ,
O.S: Ubuntu 20.04 Desktop
This is tsconfig.json :
{
"compilerOptions": {
"typeRoots": ["./node_modules/#types"],
"target": "es2021",
"module": "commonjs",
"lib": ["es2021"],
"outDir": "dist",
//"jsx": "react",
"jsx": "react-jsx",
"baseUrl": "./src",
"paths": {
"#sections/*": ["app/sections/*"],
"#app/*": ["app/*"]
},
"strict": true,
"sourceMap": true,
"skipLibCheck": true,
"noImplicitAny": false,
"noImplicitThis": false,
"moduleResolution": "node",
"esModuleInterop": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"allowJs": true
},
"include": ["src/**/*"],
"exclude": [
"src/index.js",
"dist",
]
}
And in main.ts I import file-url in this way:
import fileUrl from 'file-url'
Where I'm already importing many other packages in the same way without any problems:
For example: import validUrl from 'valid-url';
does not give any error
But in the compiled file /dist/src/main.js : I see :
const file_url_1 = __importDefault(require("file-url"));
How to solve the problem?

Cannot find module 'module.css' or its corresponding type declarations

Don't know why typescript suddenly not recogize my code, it show
Cannot find module './hookStyle/useMemostyle.module.css' or its corresponding type declarations
It happen when i move style to another folder
Here is typescript config
{
"compilerOptions": {
"lib": [
"ESNext",
"dom"
],
"outDir": "lib",
"removeComments": true,
"target": "ES6",
"baseUrl": "src",
"esModuleInterop": true,
"moduleResolution": "node",
"sourceMap": true,
"sourceRoot": "/",
"alwaysStrict": true,
"allowUnreachableCode": false,
"noImplicitAny": true,
"strictNullChecks": true,
"noImplicitReturns": true,
"noUncheckedIndexedAccess": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"allowJs": true,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"./**/*.ts"
],
"exclude": [
"node_modules/**/*"
]
}
It not effect the code, it still working but why typescript show that error? How can i fix it?

To import custom file types, you must use TypeScript's declare module syntax to let it know that it's ok to import. To do this, simply create a globals.d.ts (declaration file) wherever your other code's root directory is and then add in this code:
declare module '*.css';
You may also need to add the path to "globals.d.ts" into the "include" property in your tsconfig.json file if this still does not work (Thanks to #Ash Archin for this advice).

Disable Typescript's noImplicitAny only for .js files?

I want to keep noImplicitAny for .ts/.tsx files, but disable it for .js files. I don't want to disable the checkJs option because I still want it to check .js files.
Is this possible?
Here's my base tsconfig.json:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"allowJs": true,
"checkJs": true,
"noEmit": true,
"noEmitHelpers": true,
"strict": true,
"isolatedModules": true,
"esModuleInterop": true,
"skipLibCheck": true,
"baseUrl": "./",
"noImplicitAny": true,
"noImplicitOverride": true,
"strictNullChecks": true,
"useUnknownInCatchVariables": true,
"resolveJsonModule": false,
"types": ["node"],
"experimentalDecorators": true,
"noErrorTruncation": true,
"composite": true
},
"include": [
"."
],
"exclude": [
"./node_modules",
"./build"
]
}

Unfortunately, this is not something you can achieve like that.
One way you could achieve that would be to have two tsconfig file.
So basically, the main tsconfig.json would do everything except checkJs and the second one (let's call it tsconfig.typeCheckJs.json) would add the checkJs, notImplicitAny and noEmit.
For example
// tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"allowJs": true,
"checkJs": false,
"strict": true,
"isolatedModules": true,
"esModuleInterop": true,
"skipLibCheck": true,
"baseUrl": "./",
"noImplicitAny": true,
"noImplicitOverride": true,
"strictNullChecks": true,
"useUnknownInCatchVariables": true,
"resolveJsonModule": false,
"types": ["node"],
"experimentalDecorators": true,
"noErrorTruncation": true,
"composite": true
},
"include": [
"."
],
"exclude": [
"./node_modules",
"./build"
]
}
and another one
// tsconfig.typeCheckJs.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"allowJs": true,
"checkJs": true,
"noEmit": true,
"noEmitHelpers": true,
"strict": true,
"isolatedModules": true,
"esModuleInterop": true,
"skipLibCheck": true,
"baseUrl": "./",
"noImplicitAny": false,
"noImplicitOverride": true,
"strictNullChecks": true,
"useUnknownInCatchVariables": true,
"resolveJsonModule": false,
"types": ["node"],
"experimentalDecorators": true,
"noErrorTruncation": true,
"composite": true
},
"include": [
"."
],
"exclude": [
"./node_modules",
"./build"
]
}
then, you need to update your scripts to something like this:
// package.json
scripts: {
"build": "./node_modules/.bin/tsc --project tsconfig.typeCheckJs.json && ./node_modules/.bin/tsc"
}
Hope that it is clear, otherwise do not hesitate to ask for clarifications.

Can´t get typedefs for "classnames"

I want to use the javascript package called "classnames", but no matter what I do, I cant install the typedefs for it.
I already tried "npm i --save-dev #types/classnames", but there is still this error.
Thanks!
My tsconfig:
{
"compilerOptions": {
"target": "ESNEXT",
"module": "esnext",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}

Why a TypeScript project generated with Create React App can find modules and an Express one doesn't?

I use WebStorm, I created a React project and an Express project with a build-in wizard. I manually added TypeScript to the latter.
Here's my tsconfig.json for React:
{
"compilerOptions": {
"target": "es2017",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
And here's one for express:
{
"compilerOptions": {
"sourceMap": true,
"outDir": "output",
"esModuleInterop": true,
"noImplicitAny": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"strict": true,
"isolatedModules": true,
"module": "esnext",
"target": "es2017",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"allowJS" : true
},
"exclude": [
"node_modules"
],
"include": [
"source/**/*"
]
}
For the express project I needed to set "type": "module" in package.json.
The problem: when I use import in the React project I don't need to add the extension .js to file names, but in the Express project it's necessary, otherwise I'm getting ERR_MODULE_NOT_FOUND.
import {serviceRouter} from "./ServiceRouter";
vs
import {serviceRouter} from "./ServiceRouter.js";

When using ES6 modules ("type": "module"), extensions are mandatory, see https://nodejs.org/api/esm.html#esm_mandatory_file_extensions