Скачать или смотреть How to Properly Import External JavaScript Files in a React Project

Learn the correct way to include external JavaScript files in your React project and avoid common errors that may arise during the process.
---
This video is based on the question https://stackoverflow.com/q/65011452/ asked by the user 'myTest532 myTest532' ( https://stackoverflow.com/u/11068392/ ) and on the answer https://stackoverflow.com/a/65011605/ provided by the user 'MaCadiz' ( https://stackoverflow.com/u/13541849/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: React import external javascript returning error

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Properly Import External JavaScript Files in a React Project

If you're new to React and are trying to integrate external JavaScript files into your project, you may run into some hurdles. Whether you're attempting to add a third-party library or your own custom scripts, understanding how to correctly include these files is essential to avoid errors. One common issue developers face is related to MIME types and path errors that arise from improper integration of JavaScript files into a React app. Let’s break down these problems and explore the best solutions to resolve them.

The Problem: Errors When Importing JavaScript

Consider the following scenario: you added a JavaScript library to your index.html file, as shown below:

[[See Video to Reveal this Text or Code Snippet]]

Upon opening your project in a browser, you noticed warnings and errors in the console:

Warning: The script from “http://localhost:3000/src/assets/js/scripts-init/demo.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

Error: Uncaught SyntaxError: expected expression, got '<' demo.js

Understanding the Errors

These errors often occur because of how React and its build tools (like Webpack) handle file paths. When you try to load a script from the src directory directly, React's build tools may not serve it as a valid JavaScript file, resulting in a warning about the MIME type and a syntax error where the browser attempts to interpret an HTML document instead of JavaScript.

The Solution: Correctly Integrating the JavaScript File

Step 1: Move Your JavaScript File to the Public Folder

The best approach to include static files like JavaScript in a React application is to place them in the public directory. Here’s how you can structure your project:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Reference the JavaScript File Correctly

After moving your JavaScript file to the public directory, you can reference it in your index.html using a relative path. Instead of trying to access the script from the src directory, the path would now look like this:

[[See Video to Reveal this Text or Code Snippet]]

Why This Works

Moving the file to the public folder ensures that it gets served correctly by React’s development server. When you reference the file as shown, the server knows where to find it, and you won’t encounter MIME type warnings or syntax errors. This is because the files placed in the public directory do not go through the transpilation process that occurs in the src directory.

Conclusion

Integrating external JavaScript into your React project doesn’t have to be complex. By moving your files to the public directory and referencing them correctly, you can avoid common pitfalls and seamlessly include the functionality provided by scripts like your demo.js. Remember, understanding how React handles file paths and builds can save you significant troubleshooting time in your development journey.

When in doubt about file inclusion in React, consider using the public folder for better results and fewer headaches.