I'm working on an express application and I'm having trouble with wildcard imports, such as import * as E from 'fp-ts/Either';
Error message:
Error \[ERR\_MODULE\_NOT\_FOUND\]: Cannot find module '/home/adam/code/rbsports/server/node\_modules/fp-ts/Either' imported from /home/adam/code/rbsports/server/dist/controllers/bracket.js
Did you mean to import fp-ts/lib/Either.js?
Are wildcard imports not supported for a node 14 app targeting es2020?
my tsconfig.json
{
"compilerOptions": {
"module": "es2020",
"target": "es2020",
"lib": ["es2020"],
"baseUrl": "src",
"esModuleInterop": true,
"outDir": "dist",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true
}
}
and im running the app with node --experimental-specifier-resolution=node . in the folder with package.json
relevant parts of package.json
{
...
"type": "module",
"main": "dist/app.js"
...
}
followed this stack overflow post and this github repo
This may be an issue with how you are importing. I think Either lives in fp-ts/lib/Either and you’re importing from fp-ts/Either
Edit: the error message you posted says this as well I’ve just noticed
Related
How can I use the get-port package from a VS Code extension? I was able to use get-port in a standalone typescript sample project here, but when I try to use the same tsconfig.json with a VS Code extension I get the following error in the developer extension host log file:
[2022-04-19 15:42:18.314] [exthost] [error] Activating extension undefined_publisher.vscode-test-getport failed due to an error:
[2022-04-19 15:42:18.314] [exthost] [error] Error [ERR_REQUIRE_ESM]: require() of ES Module /home/hakon/test/vscode/vscode-test-getport/out/extension.js from /usr/share/code/resources/app/out/vs/loader.js not supported.
Instead change the require of extension.js in /usr/share/code/resources/app/out/vs/loader.js to a dynamic import() which is available in all CommonJS modules.
at Function.<anonymous> (node:electron/js2c/asar_bundle:5:13331)
at Function.<anonymous> (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:104:32156)
The code can be found in the tsconfig branch here. The above failure happens when I execute the command "View Port" which the extension contributes.
The code uses the following tsconfig.json:
{
"compilerOptions": {
"module": "es6",
"target": "es6",
"outDir": "out",
"moduleResolution": "node",
"lib": [
"ES2020"
],
"sourceMap": true,
"rootDir": "src",
"strict": true
}
}
I first tried the original tsconfig.json that comes with the yo code generated "Hello world" template (see the main branch):
{
"compilerOptions": {
"module": "commonjs",
"target": "ES2020",
"outDir": "out",
"lib": [
"ES2020"
],
"sourceMap": true,
"rootDir": "src",
"strict": true
}
}
which fails at activation (not when executing the "Show Port" command as the first example above did):
Activating extension 'undefined_publisher.vscode-test-getport' failed: require() of ES Module /home/hakon/test/vscode/vscode-test-getport/out/extension.js from /usr/share/code/resources/app/out/vs/loader.js not supported.
Instead change the require of extension.js in /usr/share/code/resources/app/out/vs/loader.js to a dynamic import() which is available in all CommonJS modules..
Any idea how I can fix this?
So we have a ReactTs project and we implemented shortcuts to things like our utils folder, So instead of calling the relative path everytime we use it in a module we just call #utils. We did this by adding path in our tsconfig.json.
This feature looks so handy and clean we decided to do the same on our Nodejs Typescript application. But when we compile the project and run the compliled js project it returns an error that seems #utils is not found. is there a way over this? How can we tell to compile the #utils to the declared relative path?
tsconfig file:
{
"compilerOptions": {
"module": "commonjs",
"outDir": "./build",
"strict": true,
"baseUrl": "./",
"paths": {
"#interface": [
"interface/index.ts"
],
"#utils":[
"src/utils/index.ts"
]
},
"types": [
"node_modules/#types"
],
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
Project directory:
So to solve this I implemented this npm: https://www.npmjs.com/package/module-alias.
I have a TypeScript React project organized as follows:
tsconfig.json
package.json
yarn.lock
lerna.json
node_modules/
packages/
ui-library/
package.json
tsconfig.json
typings.d.ts
src/
fonts/
myfont.ttf
components/
GlobalStyle.tsx
lib/ <-- `tsc` builds to here
web-app/
package.json
src/
components/
The web-app imports the ui-library as a commonjs module in its package.json. This is managed through Yarn Workspaces, hence node_modules being at the root instead of each folder. At one point, the web-app imports GlobalStyle from the ui-lib, which is where the issue occurs.
Error: Cannot find module '../fonts/myfont.ttf'
Require stack:
- /Users/me/sources/myproject/packages/ui-library/lib/styles/GlobalStyle.js...
Here is the original import statement from ui-library/src/GlobalStyle.tsx that causes the issue:
import myFont from "../fonts/myfont.ttf";
const GlobalStyle = () => (
<style global jsx>{`
#font-face {
font-family: "My font family";
src: url(${myFont}) format("truetype");
}
...</style>);
The issue is the require statement in the emitted GlobalStyle.js code, built when I run tsc in the ui-lib folder:
const MYFONT_ttf_1 = __importDefault(require("./myfont.ttf"));
I googled this issue online, and I found you had to add typings for compiling .ttf and other abnormal imports. So I created a typings.d.ts file with this declaration:
declare module "*.ttf" {
const value: string;
export default value;
}
And I included it on ui-library/tsconfig.json as follows:
{
"extends": "../../tsconfig.json",
"exclude": ["lib"],
"include": ["src"],
"files": ["./typings.d.ts"],
"compilerOptions": {
"baseUrl": "src",
"outDir": "lib",
"declaration": true,
"declarationMap": true,
"noEmit": false
}
}
The tsconfig above extends the root tsconfig:
{
"files": ["./typings.d.ts"],
"compilerOptions": {
"module": "commonjs",
"target": "es2019",
"lib": ["dom", "es2019"],
"strict": true,
"jsx": "react",
"moduleResolution": "node",
"isolatedModules": true,
"esModuleInterop": true,
"noUnusedLocals": false,
"forceConsistentCasingInFileNames": true,
"strictNullChecks": true,
"sourceMap": true,
"noEmit": true,
"declaration": false
},
"exclude": ["node_modules"]
}
We are using TypeScript 3.8. Let me know if there is any additional info to provide. My hunch is that I am either using the wrong module/target, or fundamentally misunderstanding some aspect of this.
More Details
I should note the reason we are using CommonJS modules is because ts-node can only work with that. We pull in ts-node when we are doing our gatsby build, following the gist here in gatsby-config.js:
require("ts-node").register();
// Use a TypeScript version of gatsby-config.js.
module.exports = require("./gatsby-config.ts");
Maybe it's an impossible problem to solve, to get fonts imported through ts-node which is a server side environment? Confused on what the right approach is to export a module with fonts. Willing to get rid of ts-node, and leave the Gatsby config files as js.. but mostly just want to be able to import my fonts.
I solved this by just copying the fonts as part of build steps. Basically, fonts have their own pipeline. There may be better ways, but this works well enough.
Global Angular CLI: 7.3.8
Node v10.15.3
NPM 6.4.1
macos
I'm getting this error on npm start
ERROR in
./node_modules/#angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js
Module not found: Error: Can't resolve 'core-js/es7/reflect' in
'/Users/XXX/projects/XXX/node_modules/#angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./src/polyfills.ts Module not found: Error: Can't resolve
'core-js/es7/reflect' in '/Users/XXX/projects/XXX/src'
To solve this issue I've added the following paths to compilerOptions in tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"paths": {
"core-js/es7/reflect": [
"node_modules/core-js/proposals/reflect-metadata",
],
"core-js/es6/*": ["node_modules/core-js/es"]
},
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
]
}
}
After Migrated to new Angular version, 'core-js/es6' or 'core-js/es7' Will not work.
You have to simply replace import 'core-js/es/'
For ex. import 'core-js/es6/symbol' to import 'core-js/es/symbol'
This will work properly.
just remove the number at the end of 'es' in the path, like 'core-js/es/reflect'. It worked for me.
I just copy all from my oldest project src/polyfills to the new imported. That's help ;) .
Getting this error in "#angular/cli": "~10.1.5" project:
Cannot find module 'core-js/es7/reflect' or its corresponding type declarations.ts(2307)
Solution:
import * as Reflect from 'core-js/es';
I had a problem this morning that was driving me crazy. I'll explain the issue and then I'll provide my answer below (so that others who come across this can get to a solution sooner).
It is very easy to duplicate the issue by just issuing these commands:
tsd query react --action install
mkdir src
echo "import React = require('react');" > src/foo.ts
I also included the following tsconfig.json file in src:
{
"version": "1.6.2",
"compilerOptions": {
"outDir": "./tsdir",
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"isolatedModules": false,
"jsx": "react",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declaration": true,
"noImplicitAny": false,
"removeComments": true,
"noLib": false,
"preserveConstEnums": true,
"suppressImplicitAnyIndexErrors": true
},
"files": [
"foo.ts"
]
}
If I try to compile this by simply running the tsc (version 1.6.2) command inside src, I get:
foo.ts(1,24): error TS2307: Cannot find module 'react'.
What I find baffling here is that I've installed the react bindings with tsd but when I run tsc, I get this error. It looks like I've done everything right, so why the error?
So what I eventually figured out was that I need to explicitly include the typings file in my list of "files", i.e.,
{
"version": "1.6.2",
"compilerOptions": {
...
},
"files": [
"foo.ts",
"../typings/react/react.d.ts"
]
}
In other words, I had to include the typings files explicitly in the "files". I don't really know why. I thought tsc was smart enough to look for them itself.
If there is a better solution that doesn't involve having to list all the .d.ts files explicitly in "files", I'm all ears. But I just wanted to point out that this is at least a workaround.