i am creating a weather app in react which shows the weather forcast in a graph using the api but i am getting an error plotly is undefined although i have pasted cdn of plotly in my index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
plot.js
import React, { Component } from 'react'
export class Plot extends Component {
drawPlot = () => {
Plotly.newPlot('plot',[{
x:this.props.xData,
y:this.props.yData,
type: this.props.type
}],
Because it is undefined in your global scope, try to console Plotly object outside of the component.
If you're using Webpack for bundling try to install Plotly as an NPM package.
Then import it to your project with ES6 import
It is undefined in the global scope, install plotly by npm.
npm install plotly.js
And import it in your as
import Plotly from 'plotly.js';
GitHub Reference
Install "plotly.js-dist" package from npm npm install plotly.js-dist and than import Plotly from "plotly.js-dist"; in Plot.js component
Related
I am trying to display a simple form using react but I get the error "Target container is not a DOM element" despite the fact that the root element is definitely a DOM element as I have check using console.
edit : Importing form 'react-dom' and using 'render' works fine but I cannot seem to get it work other wise
Here is the form component
import React from 'react';
export default function StudentForm()
{
return (
<form>
//some stuff
</form>
)
}
My index file
import ReactDOM from 'react-dom/client';
import './index.css';
import StudentForm from './App';
const root = document.getElementById('root');
ReactDOM.createRoot(<StudentForm/>,root);
Here is my index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I guess you don't have a element with id root in your index.html, please add the following tag in your index.html,
<div id="root" />
try this:
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<StudentForm />
</React.StrictMode>
)
You need to add your main or index script to HTML.
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
I want to use a 3rd library only for my homepage in a React application. The problem is : the library is developed with Jquery : www.npmjs.com/package/fullview
I need to import : Jquery, js file and css file.
so far, I haven't found any way to import this type of library into a functionnal component. Only class components.
Can I import these files directly in index.html with or i need to import them in my component with import ... from "..."
Thank you !
You can add jquery CDN in your public/index.html like this:
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
crossorigin="anonymous"
></script>
</body>
</html>
no need to import jquery in component or something else now jquery is avalible golobally.
On going through multiple DOCs I get to know that index.html file is the entry point for a React application and all the components we load overrides this file. But if I am making changes to the index.html file that is not reflected in the web page. I am working on integrating Zoom SDKs which needs to include script tags inside the index.html or else JQuery errors are thrown to the console.
Contents of my public/index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.0/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.0/css/react-select.css" />
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="https://source.zoom.us/1.7.2/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/jquery.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/lodash.min.js"></script>
<script src="https://source.zoom.us/zoom-meeting-1.7.2.min.js"></script>
</body>
</html>
My index.js configuration:
import React from 'react';
import ReactDOM from 'react-dom';
import {
Redirect,
HashRouter as Router,
Route,
Switch
} from 'react-router-dom';
import { Provider } from 'react-redux';
import { setStore } from './store/base';
import configureStore from './store/configureStore';
import './App.scss';
import MeetingRoom from './containers/MeetingRoom/MeetingRoom';
export const store = configureStore({});
setStore(store);
const routes = (
<Provider store={store}>
<Router>
<Switch>
<Route component={MeetingRoom} path='/m/:mid/' />
</Switch>
</Router>
</Provider>
);
ReactDOM.render(routes, document.getElementById('root'));
If I am changing the text inside <noscript> tag i.e You need to enable JavaScript to run this app. to some other string but it is not getting reflected in the web page. So how my index.html is getting loaded I cannot figure out. Is there any other information I need to provide for getting the solution?
The HTML noscript element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser. Add some string inside div element to see on the webpage
I think I have a problem with a script that doesn't load (or load too early).
I try to implement Stripe library for paiement. For that, I have to include a script before using Stripe functions in my code.
I added the given script src="https://js.stripe.com/v3/", in my public folder, in index.html in the header as follow:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script src="https://js.stripe.com/v3/"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I created an empty app, with only call of Stripe. here is App.js :
import React from 'react';
import './App.css';
import {Button} from 'react-bootstrap'
class App extends React.Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
var stripe = Stripe('pk_test_XXXXXXXXXXXX');
// I will use stripe variable later. But for now I have an error with previous line
}
render() {
return(
<div>
<Button
className= "btn-xlBook"
variant="primary"
onClick={this.handleClick}>
OK
</Button>
</div>
)
}
}
export default App
But when I make a yarn start, I have the error 'Stripe' is not defined no-undef.
I don't understand, I call the script in the header, but the behavior is as if the script wasn't loaded yet.
Do you know how to solve it ? I I add a script in the header of index.html, it should load before the app, isn't it ?
You don't import Stripe anywhere. Like you do with Button for example. Check out React Stripe Elements for one example of how to use Stripe in React.
Use npm package of stripe instead and import it. Add the import statement and use the wrapper in your index.js
import {StripeProvider} from 'react-stripe-elements';
<StripeProvider apiKey="pk_test_12345">
<MyStoreCheckout />
</StripeProvider>
and then in your console install the package:
npm install --save react-stripe-elements
or
yarn add react-stripe-elements
In the server side it renders fine, but when it gets to the client side the react part of html vanishes and I get this error:
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) <noscript data-reacti
(server) <div data-reactid=".z
this is my client code before compression:
import {Router, RouterContext, browserHistory} from "react-router";
import React from "react";
import ReactDOM from "react-dom";
const innerHTML = document.getElementById('react-routes').innerHTML;
const routes = JSON.parse(innerHTML);
console.log(routes);
// ReactDOM.render(<RouterContext {...routes} />, document.getElementById('react-app'));
ReactDOM.render(<Router>{routes.routes}</Router>, document.getElementById('react-app'));
// Router.run(routes, Router.HistoryLocation, function (Handler) {
// React.render(<Handler/>, document.getElementById('app'));
// });
I've tryed this three methods the two firsts gives the same error and the third says that Router.run is not a function. (the third was what I had working a few version ago)
the HTML generated by the server is this:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="react-app"><div data-reactid=".1rbyhm4ruo0" data-react-checksum="-854297298"><span data-reactid=".1rbyhm4ruo0.0">Hello </span><span data-reactid=".1rbyhm4ruo0.1">BLBALBLABA LUIZ</span><div data-reactid=".1rbyhm4ruo0.2"><input type="text" value="Login" data-reactid=".1rbyhm4ruo0.2.0"><span data-reactid=".1rbyhm4ruo0.2.1">Hello </span><span data-reactid=".1rbyhm4ruo0.2.2">Login</span></div></div></div>
<script id="react-routes" type="application/json">{"routes":[{"name":"public","path":"/","childRoutes":[{"name":"login","path":"/login"}]},{"name":"login","path":"/login"}],"params":{},"location":{"pathname":"/login","search":"","hash":"","state":null,"action":"POP","key":"zc9mx1","query":{},"$searchBase":{"search":"","searchBase":""}},"components":[null,null],"history":{},"router":{"__v2_compatible__":true},"matchContext":{"history":{},"transitionManager":{},"router":{"__v2_compatible__":true}}}</script>
<script src="https://cdn.socket.io/socket.io-1.1.0.js"></script>
<script src="/public/js/bundle.js"></script>
</body></html>
and after the client runs it becames this:
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="react-app"><noscript data-reactid=".zhdkkenpq8"></noscript></div>
<script id="react-routes" type="application/json">{"routes":[{"name":"public","path":"/","childRoutes":[{"name":"login","path":"/login"}]},{"name":"login","path":"/login"}],"params":{},"location":{"pathname":"/login","search":"","hash":"","state":null,"action":"POP","key":"qbhof0","query":{},"$searchBase":{"search":"","searchBase":""}},"components":[null,null],"history":{},"router":{"__v2_compatible__":true},"matchContext":{"history":{},"transitionManager":{},"router":{"__v2_compatible__":true}}}</script>
<script src="https://cdn.socket.io/socket.io-1.1.0.js"></script>
<script src="/public/js/bundle.js"></script>
</body></html>
I'm using the same method to renderToString() in the server.
Thanks
My problem was actually in gulp while browserifying the project.
As I'm creating dynamic routes to react-router, I don't have all the react classes being imported while gulp is running and it don't add the right packages to my bundle.js.
I want to make it fully dynamic, I'll keep on working on a better solution for this problem, but for the time being I could make it run by bundling *.react.js.