require() of ES module index.js not supported - javascript

I am using the below code in order to import a library (p-limit):
import pLimit, { LimitFunction } from 'p-limit';
const limit = pLimit(20);
let limitConcurrency: LimitFunction
import('p-limit').then((pLimit) => {
limitConcurrency = pLimit.default(20);
});
however, every time I want to compile my code, I get the following error:
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\User\Documents\GitHub\server\node_modules\p-limit\index.js from C:\Users\User\Documents\GitHub\server\src\controllers\CardsController.ts not supported.
Instead change the require of index.js in C:\Users\User\Documents\GitHub\server\src\controllers\CardsController.ts to a dynamic import() which is available in all CommonJS modules.
My tsconfig.json looks like this:
{
"compilerOptions": {
"target": "es6",
"module": "CommonJS",
"moduleResolution": "node",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"lib": ["ES2021"],
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true
},
"include": ["./src/**/*", "types.tsx"],
"exclude": [
"./plugins/**/*",
"./typings/**/*",
"./built/**/*"
]
}
How can I solve this?

Related

type script, runtime error while trying to import localForage

i am getting this error after trying to import "localForge":
Uncaught TypeError: Error resolving module specifier “localforage”. Relative module specifiers must start with “./”, “../” or “/”.
My tsconfig:
{ "compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"strict": false,
"noImplicitReturns": true,
"noImplicitAny": true,
"module": "es6",
"moduleResolution": "node",
"target": "es5",
"allowJs": true,
"allowSyntheticDefaultImports": true
},
"include": [
"./src/**/*"
]}
import: import * as localForage from "localforage";
also i have tried:
import { default as localForage } from "localforage";,
import localForage from "localforage";
Using node modules in the browser does not work right out of the box.
Have a look at browserify for example.

tsConfig paths not resolved with react typescript

I started a new react application (where I need to include typescript) following this instruction:
npx create-react-app my-app --template typescript
then I copied an old folder structure where I just used js to this project. So I ended up with something like this:
also with that command it generated for me a tsconfig file where I added some alias paths to /components, /services and /utils
This is my tsConfig file:
{
"compilerOptions": {
"target": "es5",
"baseUrl": "./src",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"strictNullChecks": false,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"paths": {
"#components/*": ["./components/*"],
"#utils/*": ["./utils/*"],
"#services/*": ["./services/*"]
}
},
"include": ["src"]
}
then when I try to import my components in the app.tsx as this:
import PokeTable from "#components/pokeTable/pokeTable";
function App() {
return (
<div className="App">
<PokeTable></PokeTable>
</div>
);
}
export default App;
I get the following errors:
Compiled with problems:
ERROR in ./src/App.tsx 4:0-56
Module not found: Error: Can't resolve '#components/pokeTable/pokeTable' in 'C:\Users\Utilizador\Desktop\pokemonproject\src'
Tried to change the paths and also recreated a new ts application using the typescript template, anyone knows why this occurs and what can I do to solve this?
Thank you all!

Cannot export Interface in Typescirpt - the requested module does not provide an export named Settings

I am trying to export/import an interface in Typescript but I am getting this error, I am not sure what I am doing wrong here
Uncaught SyntaxError: The requested module '/src/types/settings.ts' does not provide an export named 'Settings'
In my types/settings.ts I have this
export interface Settings {
activeUser: number
}
And I import it like this
import { Settings } from '#/types/settings'
And here is my tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"baseUrl": "./src/",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"paths": {
"#/*": ["src/*"],
},
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"isolatedModules": false
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
I am using Vue/Vite with Typescript
It is weird that npm run build will work fine, but npm run dev will throw SyntaxError.
I was forced to use import type { ... which in consequence also required same touch for Ref from vue.
Workaround was posted on GitHub for Vite issue 731
Entries in paths are resolved relative to baseUrl. Try this:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/*": ["src/*"]
}
}
}
… or this:
{
"compilerOptions": {
"baseUrl": "./src/",
"paths": {
"#/*": ["./*"]
}
}
}

Why typescript recognizes imported variables as of type any?

I have the following 2 files:
File src/helpers.ts:
const someHelperArray = ['value1', 'value2'] as const
module.exports = {
someHelperArray
}
File src/car.ts:
const {
someHelperArray
} = require('./helpers')
In the file car.ts when I hover over the someHelperArray I get this typescript type resolution: const someHelperArray: any instead of literal type I expected ('value1' | 'value2'). Essentially typescript doesn't recognize the types of imported variables from another file. I tried changing tsconfig.json settings but nothing helped. How to can I get typescript to recognize types imported from other files?
This is my tsconfig.ts:
{
"compilerOptions": {
"lib": ["dom", "es6", "scripthost", "esnext"],
"moduleResolution": "node",
"baseUrl": "src",
"watch": true,
"allowJs": true,
"esModuleInterop": true,
"module": "commonjs",
"sourceMap": true,
"inlineSources": true,
"allowSyntheticDefaultImports": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitAny": true,
"strictNullChecks": true,
"resolveJsonModule": true,
"experimentalDecorators": true
},
"exclude": ["node_modules", "**/*.spec.ts", "ts-out/**/*", "babel-out/**/*"]
}
A CommonJS module (with require) is not statically analyzable, which means the content of module is unknown before run time. Indeed, you could write any kind of dynamic code to assign it (i.e: Object.assign). So if you need to retain the types between modules you have to write them as ES6 modules because these are statically analyzable. Note that it is supported in latest versions of Node.js only.
If you wanted to keep using CommonJS modules in the source code, you could also have one file src/helpers.js:
const someHelperArray = ['value1', 'value2'];
module.exports = {
someHelperArray
}
And one src/helpers.d.ts like this:
export const someHelperArray: ['value1', 'value2'];

import / require always return empty object

On the server, I try to import npm pkg colors after I installed it.
I tried every way but always got an empty object while import it:
import * as colors from 'colors/safe';
import colors from 'colors/safe';
const colors = require('colors/safe');
The output of console.debug(colors) is always {}
Enviroments on server: Meteor + typescript. The tsconfig.json settings are:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"lib": [
"dom",
"es2015",
],
"module": "commonjs",
"moduleResolution": "node",
"target": "es6",
"skipLibCheck": true,
"stripInternal": true
},
"exclude": [
"node_modules"
]
}
What's wrong with this?
import colors from 'colors';
colors.enabled = true; // This is important
console.log(colors.green('I am green'));
Try this

Categories