How to stop VS Code importing react methods from Minified React? - javascript

At some point, my VS Code has started to import react hooks from react/cjs/react.production.min, not from react.
This annoys me because it only causes errors when I'm developing on my localhost:3000 even with simple hooks such as useState, useEffect, etc.. Is there a way to configure VS Code to import React materials from 'react'? I am tired of manually fixing import statements.
The first pic is the error page I get on Next JS, and the second pic is showing how VS Code automatically imports useState from Minified React. The line above it is the ones I manually fixed.

maybe you can try to install the Auto Import
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport
or simple reinstall your vscode maybe the fastest way to resolve it

Following Rivers answer "Auto Import - ES6, TS, JSX, TSX" worked for me since I don't use Typescript.
https://marketplace.visualstudio.com/items?itemName=NuclleaR.vscode-extension-auto-import

Apparently, out of nowhere, VS Code started to do the same on my computer -- not suggesting imports from react package. I tried to install Auto Import but it didn't fix the issue. Thinking about it, I recalled the problem started after the IDE suggested using the Workspace's TypeScript version instead of VS Code's. To fix the issue I did the following:
Open the Command Palette
With Cmd+Shift+P or Ctrl+Shift+P, depending on your OS, and enter "typescript". This will bring up a few suggestions.
Change the TypeScript Version
Press the arrow down (↓) until you reach the TypeScript: Select TypeScript Version... option.
This will bring up another modal to select which version you want to use. In my case, I had the Use Workspace Version option selected. Changing it back to Use VS Code's Version did the trick.
I'm not sure exactly why this was happening -- perhaps there are some settings attached to the editor version -- but trying to import things like useState or anything from react package started to work again.

Related

React native creating .tsx project by default

npx react-native init AwesomeProject
Create .tsx project by default. I need to create .js project.
Do you know the solution?
react native is shifting more and more to typescript to make dev easier - please also see the official blog and last posts
You can though easily get it back to js by changing the tsx to js and deleting the additional typescript content, normally takes less than 5 mins.

How do I import Pixi.js into a TypeScript project?

I'm new to Pixi.js but I have some past experience with TypeScript. I'm really struggling to import Pixi.js into my project.
I got a small Pixi.js project running using a CDN import of Pixi and vanilla JavaScript, and now I'm trying to get that same project running on TypeScript. I think one of my options would be to use the CDN import of Pixi and then import the type definitions for Pixi, but I read in several places that the later versions of Pixi are already written in TypeScript, so I don't think it's a good option for me to use a JavaScript version of the library and then import my own TypeScript definitions.
I tried using npm install pixi.js and then import * as PIXI from "pixi.js"; but that gives me this TypeScript error:
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
and it also gives me this browser error when I force it to compile anyway:
Uncaught TypeError: Failed to resolve module specifier "pixi.js". Relative references must start with either "/", "./", or "../".
This error makes sense to me, because clearly telling the browser to find pixi.js will result in no file being found, since it's a Node.js module.
I tried changing import * as PIXI from "pixi.js"; to import PIXI from "pixi.js"; to get rid of the "only use default import" error, but that just gives me a "pixi.js has no default export" error, which seems to be in direct contrast with the error I was getting before, saying that it only has a default export...
And even if I manage to get rid of the TypeScript errors, I still can't wrap my head around how this would function properly anyway since the browser has no idea what "pixi.js" is when it's referring to a Node module that doesn't even exist inside the browser...
So all of this leads me to my question of how do I get a Pixi.js program running with TypeScript? I've looked up tutorials many times but every single one includes something like Webpack, Browserify, etc. I would not like to use any bundlers/other dependencies at all, I simply want to write TypeScript code, compile it, and have it give me some .js files that I can pop directly into a .html file and run in my browser. Is this possible?
My findings thus far have been that what I'm looking for is (somehow) not possible. I've found that my options are either to import the vanilla JavaScript version of Pixi and just go without type information (and do some hacky workarounds to get TypeScript to not think PIXI is undefined), or use a bundler like Webpack. Neither of those are ideal, and I have to think there's another option...
It would depend on your setup, but you could try something like this:
import { Sprite } from '#pixi/sprite';
new Sprite()
or you could try importing all as PIXI like this
import * as PIXI from 'pixi.js';
new PIXI.Sprite()
You must have figured this out but still I want this answer to be here for other to see.
This is my demo project on github that you can clone and use. It has typescript and pixi.js installed. THIS PROJECT USES VITE instead of webpack which is very complicated.
pxts :pixi.js setup library
Some of things you must keep in mind
Pixi.js version 6 has typescript types bundled along.
Most of the examples on line are old and out of date
Latest pixi version is v 7.x for which there is no community support yet.
link for version 6.5.8 docs
While working with version 6.x you have to install Assets separately where as in Version 7.x its bundled in.
OLD AND OUT OF DATE TUTORIALS ONLINE is the main reason for confusion. Do check which version you have got installed.

Vue website complains that JavaScript isn't enabled after Vuetify is added

So this is abit of a tough one for me as this is a new learning curve and I'm not entirely sure how to debug it.
I'm following a tutorial listed Here but I made to to where we add navigation to the main page and started up the app to see how it looks and noticed a blank page. I copied the tutorial code eventually and double checked my javascript settings and ensured it is on. I started a new project and it worked fine showing the base template but after adding Vuetify, the page turned blank with
We're sorry but meal-prep doesn't work properly without
JavaScript enabled. Please enable it to continue.
in the console.
I know questions like this are not allowed but I'm not quite sure what else to look for.
If someone could point me in the right position or needs to see any specific file, ill add it.
Thanks
Going in order of #skirtle questions,
I created the project by using vue create in my terminal.
I started the app after that and it showed the default Vue home page. I then stopped the server then installed Vuetify by using vue add vuetify. After this however is when my problem starts. I started up the app again and the default vue home page is just a blank page and the html in the dev console is as follows.
There were no changes made besides installing this plugin.
My versions are as follows
Vue - vue#2.6.10
Vue CLI - #vue/cli 4.0.5
Vuetify - vuetify#2.1.6
I'm getting a warning in my VSCode terminal, which states
warning in ./src/plugins/vuetify.js
"export 'default' (imported as 'Vuetify') was not found in 'vuetify'
And in my web console
Uncaught TypeError: Cannot read property 'extend' of undefined
at Module.srcMixinsThemeableIndexTs (vuetify.js?ce5b:33332)
at webpack_require (vuetify.js?ce5b:30)
at Module.srcComponentsVAppVAppTs (vuetify.js?ce5b:380)
at webpack_require (vuetify.js?ce5b:30)
at Module.srcComponentsVAppIndexTs (vuetify.js?ce5b:465)
at webpack_require (vuetify.js?ce5b:30)
at Module.srcComponentsIndexTs (vuetify.js?ce5b:28810)
at webpack_require (vuetify.js?ce5b:30)
at Module.srcIndexTs (vuetify.js?ce5b:30337)
at webpack_require (vuetify.js?ce5b:30)
I hope this gives a better insight to my problem.
I was able to reproduce the same problem with Vue CLI 3.8.4.
It would seem that you're running into an incompatible combination of options. I don't exactly know where the fault lies but the tutorial you are using encourages a lot of custom configuration options, which makes it more likely you'll fall through a crack. It also makes it much more difficult to give an answer as the answer to some extent depends on exactly what combination of options you choose.
Nevertheless there does seem to be a bug somewhere here, though I'm unclear exactly which bit it buggy. My guess would be the Vuetify CLI plugin.
This bug report seems somewhat related:
https://github.com/vuetifyjs/vuetify/issues/9184
The simplest way to fix it seemed to be to edit the file vue.config.js and remove the line:
transpileDependencies: ["vuetify"]
However, that's no good if you actually do want to transpile Vuetify.
This is where it gets really complicated and it depends a lot on exactly what settings you want.
In the file src/plugins/vuetify.js you should find two lines like this:
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
That won't work with transpiling.
There are a few possible ways to go here but try changing them to:
import Vuetify from "vuetify/lib";
If you start the server you may see another error:
Failed to resolve loader: sass-loader
You may need to install it.
There are some instructions for how to solve that problem in the Vuetify installation guide:
https://vuetifyjs.com/en/getting-started/quick-start#webpack-installation
However, rather than trying to do all of this manually, you will likely find it easier to go back to the CLI and create a project with a different combination of options. Without spending hours and hours trying all the different permutations I can't say for sure exactly what does and doesn't work but from a quick experiment it seemed that enabling CSS Pre-processors during the project creation makes the sass-loader error go away.
It happened the same to me and I realized that I had only download it in the CLI complements but forgot to add it.
To do so write in the terminal:
vue add vuetify

Importing NPM Module

I have just forked a github project, made some changes and added it to my project. The problem is, I can't figure out how to import it into my project
I tried this import statement:
import Editor from 'editorjs-react'
But it didn't work. Truth be told, I have no idea what I am supposed to try (this is the first time that I have ever created an npm package).
Here is the project: https://www.npmjs.com/package/editorjs-react
Any ideas/suggestions of how to get this to work?

IntelliSense not working in React Native stylesheet after first item

I am using VSCode (1.34.0) + Flow (Flow Language Support: 1.1.1, Flow Language Client: 0.2.1) (switched to Typescript but still having the same error) Typescript 3.4.5 on my React Native project.
When I start typing a style property, it completes the first property with no problem, then when I start typing the second style property, it doesn't complete:
What am I doing wrong?
UPDATE: My (relevant) enabled extensions are:
Babel JavaScript 0.0.22,
Flow Language Support: 1.1.1,
Flow Language Client: 0.2.1,
npm Intellisense 1.3.0,
Prettier - Code formatter 1.8.1,
React Native Tools 0.9.3.
Weird. I have no idea why. I totally forgot about this issue after installing many plugins and Vscode updates.
I don't know what was causing it but now on TypeScript 3.5.2/Vscode 1.36.1 with many plugins disabled, it works perfectly now.
Hi There I faced the same problem what I did is I
just installed a vs code plugin named
IntelliSense for CSS class names in HTML
and it solved the problem for me now it's working
The perfect link is here
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

Categories