Реагирование не определяется при сборке
Я новичок в 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, готовой для приложений интрасети, которые не имеют доступа к большому плохому миру.
Любая помощь будет оценена по достоинству.
Я импортирую таким образом 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')
);@LucaFabbri При использовании TypeScript import * as React from 'react' - это правильный путь.
У меня сейчас точно такая же проблема. Я нашел этот ссылка, который может вам помочь, он сказал, что необходимо создать новый index.html, добавив зависимости реакции. Если я найду лучший ответ, я дам тебе знать
Я сделал проект React, основанный на пример ts-loader "vanilla", и React получил все необходимое, поэтому я не думаю, что есть какое-то универсальное требование использовать React в качестве внешнего. Можете ли вы опубликовать репозиторий вашего проекта, который не работает?
@MattMcCutchen, знаете ли вы, есть ли разница, если он использовал awesome-typescript-loader вместо ts-loader?
@octavioccl Я не думаю, что должна быть разница. Опубликуйте репозиторий, в котором воспроизводится проблема, и я посмотрю.
Ответы 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. Пакеты npm React и React-DOM включают автономные файлы .js, которые вы можете включить на веб-страницу, и мы ссылаемся на них напрямую, чтобы все двигалось быстрее. Не стесняйтесь копировать эти файлы в другой каталог или, в качестве альтернативы, разместить их в сети доставки контента (CDN). Facebook делает доступными версии React, размещенные на CDN ... "
Я добавил зависимости в свой файл index.html, и он решил эту проблему.
Надеюсь, это поможет кому-то другому, кто наткнется на это.
Поделитесь конфигурацией вашего веб-пакета. Кроме того, вам не нужно использовать
import * as React. Просто позвонитеimport React from 'react'