Develop Reference

Could not find a declaration file for module 'react/jsx-runtime'

I am using material-ui in react with typescript template. All of my code is working fine but I am getting this error on multiple lines (not an error warning but with red line as my code renders)
Could not find a declaration file for module 'react/jsx-runtime'. 'C:/Users/dell/Desktop/Web current Projects/typescript/card/node_modules/react/jsx-runtime.js' implicitly has an 'any' type.
If the 'react' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react`ts(7016)

As per #NearHuscarl's comment, a quick fix is to create your own declaration module for react/jsx-runtime. You can do this by opening the react-app-env.d.ts file (created by default when you use create-react-app), found in your project's root directory. Then add the following script to it:
declare module "react/jsx-runtime" {
export default any;
}
The create-react-app team don't believe this is an issue for create-react-app to solve, and suggest it's a problem with typescript version 4. So alternatively you can downgrade your typescript version until the typescript team provide a fix in a later version.

Try restarting vscode and see if it got fixed

When you have this error, it is usually because you installed a library and you didn't install the types of that library.
To fix this error, you need to install #types/library-name using your package manager (npm or yarn).

Came across this when trying to use create-react-app with typescript.
What solved it for me was changing the following file:
react-app-env.d.ts
/// <reference types="react-scripts" />
declare module 'react/jsx-runtime' {
const content: string;
export default content;
}

use yarn for manage package.
run this command
yarn install

How to use PDF.js (pdfjs-dist) with Svelte

I am working on a svelte application that is using TypeScript. I wanted to implement PDF viewer like pdf.js. I really like this project, so I found an NPM package for it here. I installed the package and tried to import 'pdfjs-dist', I got an error which says:
Could not find a declaration file for module 'pdfjs-dist'. './node_modules/pdfjs-dist/build/pdf.js' implicitly has an 'any' type.
Try npm install #types/pdfjs-dist if it exists or add a new declaration (.d.ts) file containing declare module 'pdfjs-dist';
I tried to install #types/pdfjs-dist, and went well but still facing that error. I don't know why. I also got this repo but wasn't helpful for what I was looking for.
My Imports
<script type = "ts" >
import pdfjs from 'pdfjs-dist';
import pdfjsWorkerEntry from "pdfjs-dist/build/pdf.worker.entry";
</script>

This is because https://github.com/mozilla/pdf.js/ isn't built in Typescript so there are no typings for it. This shouldn't be a problem if you allow it in your typescript project.
--allowJs works for me https://www.typescriptlang.org/tsconfig#allowJs

TypeError Reflect.defineMetadata is not a function, pure TS project

I've been trying to save some metadata about methods + classes using reflect-metadata, similarly to this package.
I'm using Typescript with both experimentalDecorators and emitDecoratorMetadata set to true. I have installed reflect-metadata via npm and am importing it at the top. I also have access to types and I can see details about the method Reflect.defineMetadata().
tsc compiles fine without any errors but at runtime I'm always hitting:
TypeError at Object.defineMetadata (PATH\node_modules\reflect-metadata\Reflect.js:228:23)
Also, when importing reflect-metadata using: import 'core-js/es7/reflect'; .defineMetadata is truly not a function available under the typings, only defineProperty seems to be a thing.
The full context of my code can be found here.

Using Vue Design System in Nuxt is throwing errors about export in system.js

I am trying to get the components imported into a Nuxt project, following the steps here:
https://github.com/viljamis/vue-design-system/wiki/getting-started#using-design-system-as-an-npm-module
Nuxt does not have a main.js (everything is plugin based), so what I have done is create a "plugin" and then do the import code in there like so (Nuxt recommends this for other libraries too and works fine):
vue-design-system.js
import Vue from 'vue'
import system from 'fp-design-system'
import 'fp-design-system/dist/system/system.css'
Vue.use(system)
Then in my config I do (removed other code in config):
nuxt.config.js
module.exports = {
css: [
{ src: 'fp-design-system/dist/system/system.css', lang: 'css' }
],
plugins: [
{ src: '~plugins/vue-design-system', ssr: true }
]
}
When I run npm run dev in my theme, it builds, but I get a warning:
WARNING Compiled with 1 warnings warning in
./plugins/vue-design-system.js 7:8-14 "export 'default' (imported as
'system') was not found in 'fp-design-system'
Seems to have an issue with the generated system.js regarding the export (the command npm run build:system).
In my page on screen I get the following error when trying to use a component in the design system:
NuxtServerError Cannot find module
'fp-design-system/src/elements/TextStyle' from
'/Users/paranoidandroid/Documents/websites/Nuxt-SSR'
If I hard refresh the page, I then get another message:
NuxtServerError render function or template not defined in component:
anonymous
Any idea what's happening here? It would be really great to get this working somehow.
At this current time, I'm not sure if it's a Nuxt issue or a Vue Design System issue. I think the latter, just because the Nuxt setup I have right now is very bare-bones...so it's not something else causing this.
Thanks.
Repository on GitHub:
Here is the repo for my "theme", but in order to get this going, you will need to create a design system separate from this with the same name and follow the steps to use the design system as a local (file) NPM module.
https://github.com/michaelpumo/Nuxt-SSR
console.log of system (from the JS import statement)

As for your first error (""export 'default' (imported as 'system') was not found in 'fp-design-system'"), the UMD built JS from vue-design-system does not export a "default" object. But you can simply workaround the issue by importing it as:
import * as system from 'fp-design-system'
instead of:
import system from 'fp-design-system'
Then another issue comes quickly as you noticed in your comments: "window is not defined", due again to the UMD built JS that expects window to be globally available, instead of the usual trick to use this (which equals window in a browser). Therefore as it is, the build is not comptible with SSR.
You could however slightly rework the built JS by replacing the first occurrence of window by this, but I am not sure if the result will still work.
Most probably you should better keep this module for client rendering only.

It seems Vue is looking for the ES6 pattern for importing module, which you should use for external javascript modules/files.
in ES6 it is
export default myModule
in ES5 it was
module.exports = myModule
Hope it will help.

Import Browserify package into Ember-Cli project

I've installed the following library via bower: https://github.com/kaimallea/isMobile/blob/master/isMobile.js
And imported it into my ember-cli project via in ember-cli-build.js:
app.import('bower_components/isMobile/isMobile.min.js');
While it's available via window, I also want to use it directly in Fastboot mode in node.
You can see in the source of the library, that it actually exports itself for Browserify via module.exports = instantiate();, so I tried to import it via
import isMobile from '../bower_components/isMobile/isMobile.min.js';, but that throws
Error: Could not find module "frontend/bower_components/isMobile/isMobile.min.js" imported from "frontend/helpers/is-mobile-test"
I think I'm just missing something obvious.

The mentioned library seems to be available as a node module as well. You can declare it as a fastboot dependency and execute it as mentioned in their docs when the app runs in fastboot mode