Plunker Uncaught ReferenceError: React 未定义答案

【问题标题】：Plunker Uncaught ReferenceError: React is not definedPlunker Uncaught ReferenceError: React 未定义
【发布时间】：2017-11-20 12:27:46
【问题描述】：

我正在使用 Plunker 来生成我的 React 示例。

Plunker 提供的“查找和外部库”包含 React 库。

https://plnkr.co/edit/U3soXYgU2ek8j2IA22WE?p=preview

index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="react@*" data-semver="16.1.1" src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/cjs/react.development.js"></script>
    <script data-require="react@*" data-semver="16.1.1" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/cjs/react-dom.development.js"></script>
    <script data-require="react-jsx@*" data-semver="0.13.1" src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
    <script data-require="react-jsx@*" data-semver="0.13.1" src="cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="app"></div>
    <script src="script.js"></script>
  </body>

</html>

script.jsx

class App extends React.Component {
  render(){
    return (<h1>Hello World!</h1>)
  }
}

ReactDOM.render(
  <App/>, 
  document.getElementById("app")
);

在控制台中，它会抛出以下异常

Uncaught ReferenceError: React is not defined
    at VM26837 script.js:32
(anonymous) @ script.js:32

但是，如果我尝试了其他 react 库，例如 unpkg.com 提供的库，则此示例有效。

<script src="https://unpkg.com/react@16.0.0-alpha.13/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.0.0-alpha.13/umd/react-dom.production.min.js"></script>

【问题讨论】：

那么，如何导入模块呢？我可以从“react”导入 React 吗？
从“反应”中导入反应。它也抛出异常。需求未定义。
React v16 库对我不起作用。这个有效：
感谢 Troglo。我还发现旧版本可以正常工作，但最新版本不行。

标签： reactjs cloudflare plunker

【解决方案1】：

您的代码中缺少type="text/jsx"。将type="text/jsx" 作为<script type="text/jsx" src="script.jsx"></script> 添加到您的脚本中并尝试。并使用umd build 进行开发。请参阅下面的工作代码

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="app"></div>
    <script type="text/jsx" src="script.jsx"></script>
  </body>

</html>

cjs(commonjs2)： 用户将在build tool 中使用此格式，它会从捆绑文件中排除node_modules 文件夹中的所有模块。

umd: 用户将使用此格式directly in browser，所有第 3 方包将被捆绑在其中。

【讨论】：

已根据您的建议进行测试。它仍然抛出“Uncaught ReferenceError: process is not defined”的异常
@BenCheng - 查看更新后的答案。希望对您有所帮助！
和以前一样的异常
cjs和umd有什么区别？柱塞提供的默认库是cjs。