Hey there! As someone who’s been in your shoes as a React/JS newbie, let’s break down what’s causing your script loading issue, fix it step by step, and cover some debugging habits that’ll save you tons of time later.

What’s Going Wrong Here? #

Your problem boils down to misunderstanding how Create-React-App (CRA) handles file structure and bundling:

1. Incorrect Path & Bundling Model: The src folder is for code that gets processed and bundled by Webpack. When you try to reference ../src/js/helloworld.js from public/index.html, the browser can’t resolve this path—after CRA builds your app, src files are turned into optimized chunks, not kept in their original folder structure.
2. Why type="text/babel" Is Needed: If your helloworld.js uses ES6+ syntax (like const, arrow functions), browsers can’t run it natively without transpilation. Inline scripts in index.html run directly in the browser’s context—no Babel/Webpack processing. Adding type="text/babel" forces transpilation, but this isn’t the right workflow for CRA projects.

Fixes to Try #

Option 1: Import the Script as a Module (Recommended) #

CRA is built around ES modules, so the proper way to include your script is to import it into your React code:

• Open src/index.js (or any component where you want the script to run)
• Add this line at the top:

  import './js/helloworld.js';
  

When you start your app with npm start, Webpack will bundle this script into your app’s code, and you’ll see the console.log output as expected. No type="text/babel" needed—Webpack handles transpilation automatically.

Option 2: Use Static Assets in the public Folder (For Non-Module Scripts) #

If you need to load the script directly from index.html (e.g., for a third-party library that doesn’t support modules), move the script to the public folder:

1. Create a js folder inside public (so public/js/helloworld.js)
2. Update your index.html script tag with the %PUBLIC_URL% placeholder (CRA uses this to point to the public folder correctly):

   <script src="%PUBLIC_URL%/js/helloworld.js"></script>
   

This ensures the browser finds the script no matter where you deploy your app.

Debugging Best Practices for CRA/New JS Projects #

• Check the Network Tab: Open DevTools (F12) → go to the Network tab. Reload the page and look for helloworld.js. If it shows a 404 error, your path is wrong.
• Read Terminal Errors: When you run npm start, CRA prints clear error messages in your terminal for import/syntax issues—always check this first.
• Use Source Maps: CRA enables source maps by default. In DevTools’ Sources tab, find your original src files under webpack:///src/—this lets you debug your actual code instead of minified bundled files.
• Memorize Folder Roles:
  • src: All React components, modules, and code that needs bundling/transpilation.
  • public: Static assets (images, fonts, scripts) the browser can access directly—never reference src files from here.
• Test with Minimal Code: When troubleshooting, strip your script down to basics (like your console.log) to rule out syntax or dependency issues.

内容的提问来源于stack exchange，提问作者Yannick