React脚本未加载

huangapple
go评论112阅读模式
英文:

react script not being loaded

问题

我有以下脚本：

app.js

  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  3. import {Stage, Sprite} from '@inlet/react-pixi';
  5. const App = () => (
  6.     <Stage>
  7.         <Sprite image="assets/baseBike.png" x={100} y={100}/>
  8.     </Stage>
  9. );
  11. ReactDOM.render(<App/>, document.body);

以及以下内容：

index.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Hello World</title>
  6. </head>
  7. <body>
  8. <div id="stageContainer">
  10. </div>
  11. <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
  12. <script src="node_modules/pixi.js/dist/pixi.min.js"></script>
  13. <script src="app.js" type="text/babel"></script>
  14. </body>
  15. </html>

现在，当我运行时，控制台中没有错误，但没有任何内容被渲染。我也无法找到我的脚本是否真的被加载。

如果我删除 type="text/babel"，然后会抛出错误：

  1. Cannot use import statement outside a module

有人能告诉我可能遗漏了什么吗？

更新 Babel

所以我注意到我缺少了 Babel，但在添加它后，我得到以下错误：

  1. require is not defined
英文:

I have the following script:

app.js

  1. import React from &#39;react&#39;
  2. import ReactDOM from &#39;react-dom&#39;
  3. import {Stage, Sprite} from &#39;@inlet/react-pixi&#39;;
  5. const App = () =&gt; (
  6.     &lt;Stage&gt;
  7.         &lt;Sprite image=&quot;assets/baseBike.png&quot; x={100} y={100}/&gt;
  8.     &lt;/Stage&gt;
  9. );
  11. ReactDOM.render(&lt;App/&gt;, document.body);

And the following

index.html

  1.     &lt;!doctype html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4.     &lt;meta charset=&quot;utf-8&quot;&gt;
  5.     &lt;title&gt;Hello World&lt;/title&gt;
  6. &lt;/head&gt;
  7. &lt;body&gt;
  8. &lt;div id=&quot;stageContainer&quot;&gt;
  10. &lt;/div&gt;
  11. &lt;script src=&quot;https://unpkg.com/babel-standalone@6.26.0/babel.min.js&quot;&gt;&lt;/script&gt;
  12. &lt;script src=&quot;node_modules/pixi.js/dist/pixi.min.js&quot;&gt;&lt;/script&gt;
  13. &lt;script src=&quot;app.js&quot; type=&quot;text/babel&quot;&gt;&lt;/script&gt;
  14. &lt;/body&gt;
  15. &lt;/html&gt;

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=&quot;text/babel&quot; then it throws me an error:

  1. 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:

  1.  require is not defined

答案1

得分: 3

因为你在 ReactDOM.render 中使用了 document.body，所以你意外删除了 app.js 脚本。

尝试使用一个 div 作为你的挂载点，看看是否解决了你的问题。

例如：

  1. ReactDOM.render(<App />, document.getElementById('stageContainer'));
英文:

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.

  1. ReactDOM.render(&lt;App /&gt;, document.getElementById(&#39;stageContainer&#39;));

答案2

得分: 1

由于您正在使用独立的 Babel 与 React，您需要配置您要用来编译脚本的 Babel 预设。

您可能需要类似这样的配置：

  1. <script>
  2.     Babel.registerPreset('myPreset', {
  3.         presets: [[Babel.availablePresets['es2015-loose'], { modules: false }], [Babel.availablePresets['react']]],
  4.         plugins: [[Babel.availablePlugins['transform-modules-umd']]],
  5.     });
  6. </script>
  8. <script type="text/babel" src="app.js" data-presets="myPreset"></script>

请注意，脚本标签上的 data-presets 属性告诉 Babel 使用您定义的预设。

英文:

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:

  1. 	&lt;script&gt;
  2. 		Babel.registerPreset(&#39;myPreset&#39;, {
  3. 			presets: [[Babel.availablePresets[&#39;es2015-loose&#39;], { modules: false }], [Babel.availablePresets[&#39;react&#39;]]],
  4. 			plugins: [[Babel.availablePlugins[&#39;transform-modules-umd&#39;]]],
  5. 		});
  6. 	&lt;/script&gt;
  8. 	&lt;script type=&quot;text/babel&quot; src=&quot;app.js&quot; data-presets=&quot;myPreset&quot;&gt;&lt;/script&gt;

Note that the data-presets property on the script tag tells babel to use your defined preset.

答案3

得分: 1

使用ReactJS与浏览器一起使用Babel时，您不需要使用import语句。以下是我创建的在浏览器中运行的简单应用程序示例（请注意，我没有使用create-react-app）：

  1. // app.js
  2. const App = () => {
  3.   return <h1>Test App</h1>;
  4. };
  5. ReactDOM.render(<App />, document.getElementById('root'));

您可以在index.html中使用此组件：

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Hello World</title>
  6.   </head>
  7.   <body>
  8.     <!-- 一些HTML内容 -->
  9.     <div id="root"></div>
  10.     <!-- 一些其他HTML内容 -->
  12.     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  13.     <!-- 需要babel来解析JSX -->
  15.     <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  16.     <!-- 导入React.js -->
  18.     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  19.     <!-- 导入react-dom.js -->
  21.     <script type="text/babel" src="/app.js"></script>
  22.     <!-- 导入您的JS文件并添加type="text/babel"，否则Babel无法解析它 -->
  23.   </body>
  24. </html>

我已经测试过了，对我有效，希望对您有帮助。

英文:

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

  1. const App = () =&gt;{
  2. return &lt;h1&gt;Test App&lt;/h1&gt;
  3.  };
  4. ReactDOM.render(&lt;App/&gt;, document.getElementById(&#39;root&#39;));

you can use this component in index.html as

  1. &lt;!doctype html&gt;
  2.    &lt;html&gt;
  3.      &lt;head&gt;
  4.         &lt;meta charset=&quot;utf-8&quot;&gt;
  5.           &lt;title&gt;Hello World&lt;/title&gt;
  6.       &lt;/head&gt;
  8.    &lt;body&gt;
  9. &lt;!-- some HTML --&gt;
  10. &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
  11. &lt;!-- some other HTML --&gt;
  13. &lt;script src=&quot;https://unpkg.com/babel-standalone@6/babel.min.js&quot;&gt;&lt;/script&gt;
  14. &lt;!-- babel is required in order to parse JSX --&gt;
  16. &lt;script src=&quot;https://unpkg.com/react@16/umd/react.development.js&quot;&gt;&lt;/script&gt;
  17. &lt;!-- import react.js --&gt;
  19. &lt;script src=&quot;https://unpkg.com/react-dom@16/umd/react-dom.development.js&quot;&gt; &lt;/script&gt;
  20. &lt;!-- import react-dom.js --&gt;
  22. &lt;script type=&quot;text/babel&quot; src=&quot;/app.js&quot;&gt;&lt;/script&gt;
  23. &lt;!-- import your JS and add - type=&quot;text/babel&quot; - otherwise babel wont parse it --&gt;
  24.   &lt;/body&gt;
  25. &lt;/html&gt;

i have tested it and its worked for me ,hope it will help you

huangapple
  • 本文由 发表于 2020年1月6日 17:59:58
  • 转载请务必保留本文链接：https://go.coder-hub.com/59610017.html
  • javascript
  • react-dom
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定