添加对现有 web 页面（旧版）的反应 - 导入不起作用

Question

I have imported react dev to a webpage (legacy HTML+JQuery) as follows:

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script type="module" src="dist/Menu.js"></script>

and I'm trying to use the Menu component, which has the following code:

    import menuData from "./menuData";
    import MenuItem from "./MenuItem";
    
    export const Menu = () => {
        return (
            <p>Some code..</p>
)
    };
    
    let domContainer = document.querySelector('#main_menu');
    ReactDOM.render(<Menu />, domContainer);

In my legacy app, before importing I had to transpile the JSX to JS using: npx babel --watch src --out-dir dist --presets react-app/prod ,

And in my legacy app, in addition to the imports (above), I wrote the following element:

<div id="main_menu"></div>

but my legacy app shows an 404 Error for my imports:

404 https://mywebpage.com/dist/menuData
404 https://mywebpage.com/dist/MenuItem

Any idea what I'm missing? How I can start using React components (with imports of another components) in my legacy HTML+JQuery app?

Answer 1

Do the imported paths really exist on your site? Open a browser and go to

https://mywebpage.com/dist/menuData

If they don't resolve to plain .js source code - which it sounds like they don't - they won't work. You probably need to add the file extension, since it sounds like your server isn't doing it:

import menuData from "./menuData.js";
import MenuItem from "./MenuItem.js";

such that going to

https://mywebpage.com/dist/menuData.js

shows you the JS file.

But an even better option you might also consider would be to bundle the code together during a build process, so that only one .js file has to be served to the client. As an app grows larger and larger, if the client has to request 20 or 30 or more modules from your server, that can be a significant performance hit if you aren't using HTTP/2. Consider a module bundler like Webpack. You may be able to turn your HTML into

<script src="dist/bundle.js"></script>

by bundling all of your modules (and React, and any other libraries you happen to be using here) together into a single file.