I am using a create-react-app scaffoldin tool, and I want to upload and track some components into bit.dev.
the problem comes when I try to follow the following tutorial:
https://docs.bit.dev/docs/tutorials/bit-react-tutorial
When I try to import the React compiler, and I run this
bit import bit.envs/compilers/react --override
The process hangs forever with this statement:
/ ensuring package dependencies
Since I can not compile locally I recieve compile errors remotely on bit.dev ... any ideas why it is not importing the react compiler?
this is because you tried to import the compiler with the wrong flag.
To import a compiler, you need to run bit import like this:
bit import bit.envs/compilers/react --compiler
You can see all the optional flags here:
https://docs.bit.dev/docs/apis/cli-all#import
or running bit import -h.
Related
Maybe this question has already been asked, but I wasn't able to find anything regarding the matter.
I'm currently trying to build a simple website using firebase in combination with React. I'm using vscode as my IDE. While the process of building the site itself is going quite well, I'm still having some issues getting used to vscode's code suggestions.
'use strict';
import ReactDOM from 'react-dom';
let element = <h1>Hello world test</h1>;
ReactDOM.render(
element,
document.querySelector('#root')
);
In my file app.jsx I'm calling the method ReactDOM.render(...). Here is where my issue comes into play. When I specifically import the class ReactDOM (import ReactDOM from 'react-dom';), my code suggestions work as expected. All available methods with their arguments are suggested, etc. Unfortunatly though, my browser does not like those import statements and throws an error. I am aware that I can use tools like webpack or browserify to solve this issue, but since the ReactDOM-class is available without the import anyways, I don't really see the imminent need to use those tools.
I was just wondering whether I could configrue vscode to just suggest these classes and their methods without explicitly importing them. Thanks for the help!
(In case this was unclear, here's what I want to happen, but without importing ReactDOM:
I am switching to React from SwiftUI, where I am expecting auto import of components which should be default in VSCode, According to my research. Unfortunately when I type the components, VSCode is not suggesting me the components. I have to manually type the component name also manually import the components, which is very slow and require too much effort.
How can I get auto completion of components and auto import in VSCode 1.57.0?
I had exactly the same issue with version 1.57.
Adding "security.workspace.trust.enabled": false to settings.json resolved the issue for me.
You can use a vscode extension.
I recommend to use Reactjs code snippets extension.
I am trying to get ReactJs compatible with IE 10 and have added the following import statements before any other import.
import '#babel/polyfill';
import 'core-js/es6/map';
import 'core-js/es6/set';
The import is done in the index file of my app, App.tsx.
However I am still getting the following error and am unable to resolve it.
SCRIPT5009: 'Set' is undefined
How can I resolve this issue?
I also run in this same issue. To solve this, you need some additional node packages in order to perform polyfills.
Please, 1st install the npm package "core-js". After that, add
import 'core-js/es/set'
import 'core-js/es/map'
If still running into issues, install this other package react-app-polyfill and add the following additional import:
import 'react-app-polyfill/ie9'
These imports must be in the root index file of your project. Hope this helps.
What's the proper way to use TypeScript and React together, now that they have extracted the PropTypes in a separate project with version 15.5?
Everything runs fine after upgrading from 15.4 to 15.5, except that now I get a this warning in the console: "Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead." How do I make it disappear?
I have tried doing the following steps, but it doesn't remove the console warning.
Add the prop-types and #types/prop-types packages.
Import PropTypes everywhere that I import React, import * as PropTypes from "proptypes". Also tried with require("prop-types").
Turn off noUnusedLocals, to avoid that the compiler complains about PropTypes not being used.
But. Since I'm using TypeScript, the compiler is verifying the PropTypes at compile time, so I don't need to do the same at run time, and thus I shouldn't get the warning at all, right? I am hoping that maybe I can add or change a setting somewhere in the build configuration, that would make React compile without PropTypes.
I had the same issue because I was importing React as:
import * as React from 'react'
After I changed it to:
import React from 'react'
everywhere in my project the warning disappeared.
There is no need for prop-types package.
P.S. I use babel and have "allowSyntheticDefaultImports": true in tsconfig.json.
Figured it out: It's mobx-react-devtools that is causing the warning. The issue has been reported and fixed, but apparently not yet released.
https://github.com/mobxjs/mobx-react-devtools/issues/59
For example, to import the test utils:
import ReactTestUtils from 'react-addons-test-utils'
It works, but there is no such module as 'react-addons-test-utils' under node_modules.
And a cursory look at React source code under node_modules reveals that 'react-addons-test-utils' does not exist. In the module root directory there are only react.js and addons.js.
How does this work? What am I missing with my understanding of NPM?
It shouldn't work. Sounds like you may have installed the dependency somewhere globally. I am certain it shouldn't work without the actually package.
BTW, react source code does not actually use react-addons-test-utils:
https://github.com/facebook/react/search?utf8=%E2%9C%93&q=react-addons-test-utils