We Keep Coding

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.

require() of ES module index.js not supported

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?

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": {
"#/*": ["./*"]
}
}
}

Data URI imports in typescript

In plain JS we can use import statements with data uri, e.g.:
import { number, fn } from 'data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgY29uc3QgZm4gPSAoKSA9PiAiSGVsbG8gd29ybGQiOw==';
Or dynamically:
import('data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgY29uc3QgZm4gPSAoKSA9PiAiSGVsbG8gd29ybGQiOw==')
.then(module => console.log(module));
However, putting the same code in a typescript file gets us a "Cannot find module" error.
My tsconfig.json is as follows:
{
"compilerOptions": {
"module": "esnext",
"lib": [
"esnext",
"es6",
"dom"
],
"moduleResolution": "node",
"outDir": "./build",
"noImplicitAny": false,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"target": "es6",
"jsx": "react"
},
"include": [
"src/**/*", "../addon/build/background.js"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
Typescript docs on module resolution have no mention of data:... from what I see. Is there a way to get this to work in typescript?

See Wildcard module declarations in the Typescript handbook.
You could do something like this:
// types.d.ts
declare module "data:text/javascript;*" {
export const number: number;
export function fn(): string;
}
// index.ts
/// <reference path="types.d.ts"/>
import { number, fn } from 'data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgY29uc3QgZm4gPSAoKSA9PiAiSGVsbG8gd29ybGQiOw==';
This tells Typescript that an import matching the data:text/javascript; prefix will expose a number property (as a number type) and an fn property (which returns a string). Adjust the module declaration to fit your importer semantics as appropriate.

Type lost when exporting object on baseDir import

I have a file named constants.ts which contains constants related to my React TypeScript application.
The file looks like this:
// The error for when errors are bad.
const BAD_ERROR_ERROR = "Something happened that shouldn't have. Please contact an admin";
const Constants = {
APIResponses: {
accounts: {
login: {
account_not_verified: {
message: "You need to verify your email",
problemFields: ["email"]
},
bad_login: {
message: "Your email or password is incorrect",
problemFields: ["email", "password"]
},
default: {
message: BAD_ERROR_ERROR,
problemFields: ["email", "passwords"]
}
}
}
}
};
export default Constants;
I then import it in a TSX file like this:
import Constants from "constants";
and reference a key like this:
const { status } = json;
const resp = Constants.APIResponses.accounts.login[status.message];
However, when I attempt to use it, I get this error:
Property 'APIResponses' does not exist on type 'typeof import("constants")'. TS2339
69 |
70 | const { status } = json;
> 71 | const resp = Constants.APIResponses.accounts.login[status.message];
This error only occurs when importing it from my baseDir as "constants", when importing as ../../constants, it works fine. (That's the work around I'm going with right now)
Here's the things I've tried that haven't worked:
Explicitly defining a type for Constants in constants.ts
Renaming it to constants.js
Casting the type on the default export
Not exporting it as default
Here's the hacky fixes I found that work, but are hacky and undesirable:
Importing it relatively (../../constants) (current)
Casting it to an any type ((Constants as any).APIResponses...)
Here's my tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"rootDir": "./src",
"baseUrl": "./src"
},
"include": [
"src"
]
}