After npm init and installation of react, react-dom, bootstrap and react-bootstrap packages, I can't import any component from react-bootstrap library, as import Button from 'react-bootstrap/Button'; produce TypeError: Error resolving module specifier: react-bootstrap/Button.
I get rid of that error by changing the path to import Button from './node_modules/react-bootstrap/Button' - it's correct path, but when I try to render anything it doesn't change the div in target .php file, there's not any error in the console, so I lost. I use Babel babel-cli#6 babel-preset-react-app#3 preprocessor for JSX translation.
Here is preprocessed index.js:
import Button from 'react-bootstrap/Button'
class ProfilePage extends React.Component {
render() {
return (
<div>
<p>blah blah blah blah blah</p>
</div>
);
}
}
ReactDOM.render(<ProfilePage/>, document.getElementById('app'))
and index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
</head>
<body>
<div id="app">inner html
</div>
<script
src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js"
crossorigin
/>
<script>var Alert = ReactBootstrap.Alert;</script>
<script type="module" src="./index.js"></script> <!-- processed index.js -->
</body >
Output is: inner html.
Without react-bootstrap import it works perfectly, bootstrap also, but of course I'm not able to use react-bootstrap components. What am I missing?
I think your import syntax is just off. Instead of
import Button from 'react-bootstrap/Button'
Try
import { Button } from 'react-bootstrap’
Or
import { Button } from 'react-bootstrap/Button'
if the above doesn’t work.
Related
jQuery v3.5.1 standard build works, the slim build does not, what are the missing dependencies for Draggable to work with the jQuery slim build?
Reproduction code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Work -->
<!-- <script src="https://code.jquery.com/jquery-3.5.1.js"></script> -->
<!-- Does not work -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<span id="draggable">Drag me around</span>
<script>
$('#draggable').draggable()
</script>
</body>
</html>
Error in console:
I've tried the following imports to include potential dependencies, but didn't succeed:
import $ from 'jquery/dist/jquery.slim.js'
import 'jquery/src/manipulation/_evalUrl.js'
import 'jquery/src/deprecated/ajax-event-alias.js'
import 'jquery/src/effects.js'
import 'jquery/src/effects/Tween.js'
import 'jquery/src/effects/animatedSelector.js'
import 'jquery-ui/ui/widgets/draggable.js'
And surprisingly, the minified jQuery didn't work either:
import $ from 'jquery/dist/jquery.min.js'
import 'jquery-ui/ui/widgets/draggable.js'
Only the normal build worked:
import $ from 'jquery/dist/jquery.js'
import 'jquery-ui/ui/widgets/draggable.js'
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
I'm attempting to load my second React component into my HTML page but I'm getting the following error:
Uncaught Error: Target container is not a DOM element.
I've attempted other solutions, but I haven't been successful. I started with create-react-app and I did everything the same way as the first component since that's loading up correctly but the second one isn't.
Root file:
SRC file:
My LiteInfo.js file:
import React from 'react';
const LiteInfo = function() {
return (
<div className="LiteInfo">
<h1>Hello</h1>;
</div>
);
}
export default LiteInfo;
and I'm trying to load it in the same way as App.js in index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import LiteInfo from './LiteInfo';
import 'bootstrap/dist/css/bootstrap.css';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
console.log(document.getElementById('root'));
ReactDOM.render(<LiteInfo />, document.getElementById('liteInfo'));
console.log(LiteInfo);
registerServiceWorker();
Using console.log shows info, but the error is coming from ReactDOM.render(<LiteInfo />, document.getElementById('liteIndo'));
And lastly, my HTML file which is found in public):
<!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">
<title>React App</title>
</head>
<body>
<div id="navbar"></div>
<div id="liteInfo"></div>
<div id="root">
</div>
</body>
</html>
Anyone know what I'm doing wrong?
EDIT
I'm making a simple flask app, using react for the front-end stuff. Right now I'm experimenting with importing React components from other files, without success. This is the error I'm getting:
Uncaught ReferenceError: require is not defined
This is my html file:
<html>
<head>
<meta charset="UTF-8">
<title>Index page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.16/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<div class="columns">
<div class="column">
some stuff
</div>
<div class="column">
<div id="index"></div>
</div>
</div>
<script type="text/babel" src="static/js/index.js"></script>
</body>
</html>
and my index.js:
import FormComponent from './FormComponent.js';
var MainClass = React.createClass({
render:function(){
return (
<div>
<div>this is the main component</div>
<div><FormComponent /></div>
</div>
);
}
});
ReactDOM.render(<MainClass />, document.getElementById('index'));
and finally the FormCommponent.js, which is in the same folder:
var FormComponent = React.createClass({
render: function() {
return (
<div>this is an imported component</div>
);
}
});
module.exports = FormComponent;
Does anyone know what am I doing wrong?
I'm not using any package managers.
EDIT
Solved the problem by using browserify, as mentioned below.
Thanks for the help
You need to use something like Rollup, Webpack, or Browserify. This statement import FormComponent from './FormComponent.js'; doesn't mean anything on the client. No browser natively supports it so you need something like the tools mentioned above to turn it into something the browser can actually use.
Without them you just have to load the files in your index.html.
Maybe if you try to include components like the first but declare like text/javascript should run.
I hope this solves your problem