I have the following script:
app.js
import React from 'react'
import ReactDOM from 'react-dom'
import {Stage, Sprite} from '@inlet/react-pixi';
const App = () => (
<Stage>
<Sprite image="assets/baseBike.png" x={100} y={100}/>
</Stage>
);
ReactDOM.render(<App/>, document.body);
And the following
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<div id="stageContainer">
</div>
<script src="/[email protected]/babel.min.js"></script>
<script src="node_modules/pixi.js/dist/pixi.min.js"></script>
<script src="app.js" type="text/babel"></script>
</body>
</html>
Now when I run this there is no error in the console but nothing is being rendered. I am also unable to find that my script is actually loaded.
if i remove the type="text/babel" then it throws me an error:
Cannot use import statement outside a module
Can anyone tell me what I might be missing?
Update babel
So I noticed that I was missing babel however after adding it I get the following error:
require is not defined
I have the following script:
app.js
import React from 'react'
import ReactDOM from 'react-dom'
import {Stage, Sprite} from '@inlet/react-pixi';
const App = () => (
<Stage>
<Sprite image="assets/baseBike.png" x={100} y={100}/>
</Stage>
);
ReactDOM.render(<App/>, document.body);
And the following
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<div id="stageContainer">
</div>
<script src="https://unpkg./[email protected]/babel.min.js"></script>
<script src="node_modules/pixi.js/dist/pixi.min.js"></script>
<script src="app.js" type="text/babel"></script>
</body>
</html>
Now when I run this there is no error in the console but nothing is being rendered. I am also unable to find that my script is actually loaded.
if i remove the type="text/babel" then it throws me an error:
Cannot use import statement outside a module
Can anyone tell me what I might be missing?
Update babel
So I noticed that I was missing babel however after adding it I get the following error:
require is not defined
- you need to use bable to convert jsx to normal javascript,which is not included in your source code index.html – Jatin Parmar Commented Jan 6, 2020 at 10:03
- @JatinParmar ive updated my post – Marc Rasmussen Commented Jan 6, 2020 at 10:08
- can you provide some codepen ? i am not getting how you are using react – Jatin Parmar Commented Jan 6, 2020 at 10:10
- @JatinParmar ive upated my question – Marc Rasmussen Commented Jan 6, 2020 at 10:15
- @JatinParmar also not sure i can add a fiddle as i can't import node modules and its the import that is the issue right now – Marc Rasmussen Commented Jan 6, 2020 at 10:26
3 Answers
Reset to default 3I think because you are using document.body on your ReactDOM.render, you accidentally delete the app.js script.
Try to use a div as your mount point to see if that resolves your issue.
e.g.
ReactDOM.render(<App />, document.getElementById('stageContainer'));
when using reactjs with browser using babel you dont need to use import ,here is how i have created simple app that run with browser (note that i am not using create-react-app ): app.js
const App = () =>{
return <h1>Test App</h1>
};
ReactDOM.render(<App/>, document.getElementById('root'));
you can use this ponent in index.html as
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<!-- some HTML -->
<div id="root"></div>
<!-- some other HTML -->
<script src="https://unpkg./babel-standalone@6/babel.min.js"></script>
<!-- babel is required in order to parse JSX -->
<script src="https://unpkg./react@16/umd/react.development.js"></script>
<!-- import react.js -->
<script src="https://unpkg./react-dom@16/umd/react-dom.development.js"> </script>
<!-- import react-dom.js -->
<script type="text/babel" src="/app.js"></script>
<!-- import your JS and add - type="text/babel" - otherwise babel wont parse it -->
</body>
</html>
i have tested it and its worked for me ,hope it will help you
As you are using babel standalone with React, you need to configure the babel preset that you want to pile your scripts.
You probably need something like this:
<script>
Babel.registerPreset('myPreset', {
presets: [[Babel.availablePresets['es2015-loose'], { modules: false }], [Babel.availablePresets['react']]],
plugins: [[Babel.availablePlugins['transform-modules-umd']]],
});
</script>
<script type="text/babel" src="app.js" data-presets="myPreset"></script>
Note that the data-presets property on the script tag tells babel to use your defined preset.