Question

我是TypeScript的新手，以为我可以从ReactJS网站上下载产品列表演示。到目前为止，我已经了解了

external "React":1 Uncaught ReferenceError: React is not defined
    at Object.react (external "React":1)
    at __webpack_require__ (bootstrap:19)
    at Object../src/client/app/index.tsx (index.tsx:1)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

并且我不太确定为什么，如果我将其作为外部对象包含在webpack.config.js中，则可以正常工作，但是我想将其与其他src捆绑在一起，以准备好无法访问的Intranet应用程序进入大的坏世界。

任何帮助将不胜感激。

我正在导入import * as React from 'react';

webpack不会抛出错误

INDEX.TSX

import * as React from 'react';
var ReactDOM = require('react-dom');

import FilterableProductTable from './components/FilterableProductTable';
import Basket from './components/Basket';

ReactDOM.render(
	<div>
		<FilterableProductTable />
		<Basket />
	</div>,
	document.getElementById('app')
);

Answer 1

我也一直遇到这个问题。在搜索错误大约一天后，我偶然发现了该页面。

遵循octavioccl在评论中提供的链接-（http://www.typescriptlang.org/docs/handbook/react-&-webpack.html）。

我发誓我已经阅读了十二次左右，并且在将项目转换为TypeScript时大致尝试了一下。无论如何，什么帮助了我本节的内容：

“我们还需要一个页面来显示我们的Hello组件。在项目的根目录下创建一个文件index.html，其内容如下：”

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    </head>
    <body>
        <div id="example"></div>

        <!-- Dependencies -->
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

        <!-- Main -->
        <script src="./dist/bundle.js"></script>
    </body>
</html>

“注意，我们正在从node_modules中包含文件。React和React-DOM的npm软件包包括独立的.js文件，您可以将它们包含在网页中，并且我们直接引用它们以使事情进展得更快。可以将这些文件复制到另一个目录，也可以将它们托管在内容分发网络（CDN）上。Facebook可以提供CDN托管的React版本...”

我将Dependancies添加到了index.html文件中，并对该问题进行了排序。

希望这对遇到这个问题的人有所帮助。

捆绑时未定义React

1 个答案: