I am trying to import elements from react semantic ui like this after installing via npm.
import React, { Component } from "react";
import "./App.css";
import { Button } from "semantic-ui-react";
class App extends Component {
render() {
return <Button>hi</Button>;
}
}
export default App;
But i get this error.
I guess the app was already running when you installed semantic-ui package, therefore, the appropriate file were not loaded.
Keep in mind to restart your app after installing every package or simply stop it before installing.
There are two possible scenarios for this error:
1.Hot module reload not working: Sometimes the npm does not automatically reload the pages, so re-starting the app would solve this problem.
2.Yarn / NPM mismatch: Some packages (especially semantic-ui) throws error when there is a mismatch with package-json and yarn.lock. It is recommended to stick with yarn package manager if you are using yarn.
Hope this helps :)
Related
I have referred this documentation to add google-signin in my react native app, followed all the steps mentioned but could not get the result as specified in the documentation. I have imported the following statement
import { GoogleSignin, GoogleSigninButton, statusCodes } from 'react-native-google-signin';
But Whenever I add this statement in my login file it gives me following error.
i think you need make some changed in your file path shown in error message
F:\ReactProjects\SearchApp\node_modules\react-native-google-signin\src\GoogleSignin.android.js
make sure you import following two lines correctly
import React, { Component } from 'react';
import PropTypes from 'prop-types';
install this and your problem goes away "npm install --save prop-types"
Well, recently I've started using the React.js library, and now I'm trying to use it with Firebase Hosting, with the TypeScript language. But, every time I try to write some code using tsx it just doesn't work, for example:
import * as React from "react"; //red underline under "react"
import "./App.css";
import logo from "./logo.svg";
class App extends React.Component {
render() {
return <h1>Hello</h1>; //red underline under <h1> and </h1>
}
}
export default App;
that way I just can't write any jsx code here, because it always appears the issue:
test.tsx(1,1): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists
Can somebody please help me with this?
How did you create your react application? If you used create-react-app you'll need to use react-scripts-ts as your --scripts-version flag. This should install the #types packages along side React's dependencies, eliminating your problem.
Also, it should get you started with an App.tsx file as the one provided in your snippet is not a valid typescript react component (i.e. the your render() method is not public).
Happy hacking!
I solved this issue by reloading VSCode.
ctrl+shift+P > Developer: Reload Window
I often get this message even at the beginning when I run my code:
"You attempted to import ______which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/." Did not have this problem before.
What I don't understand if why it happens even when files etc are within src directory? And I have not moved anything. All attempts at doing a React JS project is a fail, as a result.
I considered the issue could be the installation of ESLINT or webconfig as guessed by someone. I am in the very beginning of my code when I get this error message. This happens from all the create-react-app work I do.
This is the code in my App.js
import React, { Component } from 'react';
import Layout from './components/Layout/Layout';
import BurgerBuilder from '/containers/BurgerBuilder/BurgerBuilder';
class App extends Component {
render() {
return (
BurgerBuilder
);
}
}
export default App;
This problem apparently occurs if React is an older version (15 in this case when it should be React 16).
guys!
Did anybody got
"Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead."
while using React 15.5.3 "react-transition-group/CSSTransitionGroup" add-on.
It looks like this addon uses old PropTypes.
Do somebody know how to avoid this Warning for this add-on?
It has been deprecated After React version 15.5. Hence you need to install it separately.,
Install: npm install prop-types
import React from 'react';
import PropTypes from 'prop-types';
class Component extends React.Component {
render() {
return <div>{this.props.text}</div>;
}
}
Component.propTypes = {
text: PropTypes.string.isRequired,
};
Edit: You need to get updated package for add-on compatible with react latest updates. It the package is yet not updated, you can make changes to them ypurself.
This bug fixed automatically when I updated "react-transition-group" to latest version. It looks that the npm package now works on PropTypes from 'prop-types'.
I have problem with writing in TypeScript & ReactJS. I have no idea how to import external libraries and use them properly in the code.
I'm trying to use react-autosuggest in my project so I'm:
Installing react-autosuggest with npm install --save react-autosuggest
Installing typing for this library with typings install --global --save dt~react-autosuggest
going to file where I want to use this and trying to import that and use
Here I have problem, because I still have problems with importing it.
When I'm trying to import it with import * as autosuggest from 'react-autosuggest' I'm getting error
error TS2497: Module ''react-autosuggest'' resolves to a non-module entity and cannot be imported using this construct.
When I'm importing with import Autosuggest from 'react-autosuggest' another error appears:
error TS1192: Module ''react-autosuggest'' has no default export.
Could you guide me how to do it?
To fix your import use require:
import AutoSuggest = require("react-autosuggest");
new AutoSuggest();
The export of the module is done with the export = syntax. Refer to this SO for details on why you need to import this with require: https://stackoverflow.com/a/29598404/5324369