CODEWITHSUNDEEP
javascriptreactjsreact-dom
Marc Rasmussen
Marc Rasmussen

Reputation: 20555

react script not being loaded

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.com/[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

Upvotes: 4

Views: 4245

Answers (3)

Jatin Parmar
Jatin Parmar

Reputation: 2900

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 component 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.com/babel-standalone@6/babel.min.js"></script>
<!-- babel is required in order to parse JSX -->

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- import react.js -->

<script src="https://unpkg.com/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

Upvotes: 1

Callum McClean
Callum McClean

Reputation: 101

As you are using babel standalone with React, you need to configure the babel preset that you want to compile 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.

Upvotes: 1

Michalis Garganourakis
Michalis Garganourakis

Reputation: 2930

I 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'));

Upvotes: 3

Related Questions