Working on my first React project and kinda new to JS, I am struggling with a very basic issue. I wonder what is the best practice to debug this?

I did create my app with create-react-app and I don't succeed loading an external script. Surprisingly I didn't find any help online or in the doc so far, rather any mention of this being an issue.

At the bottom of public/index.html, if I write:

<script>
  console.log('Hello World!');
</script>

=> the console display 'Hello World!', normal, all good!

But if instead I do:

<script type="text/babel" src="../src/js/helloworld.js"></script>

and the helloworld.js file just contains console.log('Hello World!');

=> the console doesn't display anything!

Apparently, type must be "text/babel" or I get a syntax error.

What am I doing wrong ?

My folder structure is:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── js
        └── helloworld.js

Working on my first React project and kinda new to JS, I am struggling with a very basic issue. I wonder what is the best practice to debug this?

I did create my app with create-react-app and I don't succeed loading an external script. Surprisingly I didn't find any help online or in the doc so far, rather any mention of this being an issue.

At the bottom of public/index.html, if I write:

<script>
  console.log('Hello World!');
</script>

=> the console display 'Hello World!', normal, all good!

But if instead I do:

<script type="text/babel" src="../src/js/helloworld.js"></script>

and the helloworld.js file just contains console.log('Hello World!');

=> the console doesn't display anything!

Apparently, type must be "text/babel" or I get a syntax error.

What am I doing wrong ?

My folder structure is:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── js
        └── helloworld.js

• javascript
• reactjs

• It might seem a little more plicated with create-react-app. See that post: github issue – Kevin Amiranoff Commented May 24, 2018 at 22:51
• did you import helloworld.js into index.js? – logos_164 Commented May 24, 2018 at 22:55
• No I didn’t. It seems I have to import it as a node module so I am going to look into that – Yannick Commented May 24, 2018 at 22:58

3 Answers 3

You could also make it work if you move your helloworld.js file inside of the public folder, as the server using by create-react-app serves all the assets in the public folder but does not serve src. Here is the documentation

in your index.html

  <script type="text/javascript" src="js/helloworld.js"></script>

in your project put the js folder inside of public public/js/helloworld.js

The type should be text/javascript as it let your browser know how to interpret the file. The syntax error, you are getting is due to the fact that create-react-app renders the index.html if the file is not found, and then your browser sees html instead of javascript, hence the error : Uncaught SyntaxError: Unexpected token <

Also create-react-app hides a lot of plexity for you and it is going to be difficult to understand all of what happens behind the scene. If you want to go through the plete tooling system in place you could run npm run eject (but read the docs first :) as it can't be reversed.

The boilerplate (create-react-app) you used to create your project utilizes the node.js development environment, so you should stick to that development workflow - by creating node modules.

So you need to convert helloworld.js to a node module:

exports.helloWorld = function() {
    console.log('Hello World!');
};

Then use it in other modules of your application (i.e. index.js):

import { helloWorld } from './js/helloWorld';

helloWorld(); // or call from within a React.js ponent

You should read about how node.js modules work.

If you check your Network tab in your debugger, it might actually load for you. But you're not seeing the effect on your screen because that's not how create-react-app works. It's not serving you a blank index page, it's set up to serve a div that it injects your React app into. You're not finding this on the internet because it's just not how this tool works. Read the docs and learn how it's intended to work and you'll be very happy you did. :)