CODEWITHSUNDEEP
reactjstypescriptwebpack
DrogoNevets
DrogoNevets

Reputation: 1575

React is not defined when bundling

I am new to TypeScript and thought I would tray the product List demo from ReactJS website with it. I have got so far, but currently getting 

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

and I am not too sure why, if I include it as an external in my webpack.config.js it works fine, but I am wanting to bundle it with the rest of the src ready for intranet applications that dont have access to the big bad world.

Any help would be appreciated.

I am importing thus import * as React from 'react';

webpack throws no errors

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')
);

Upvotes: 3

Views: 2328

Answers (1)

Cactusman07
Cactusman07

Reputation: 991

I've been having this issue too. After googling the error for a day or so, I stumbled across this page.

Following the link provided by octavioccl in the comments - (http://www.typescriptlang.org/docs/handbook/react-&-webpack.html).

I swear I've read this page a dozen or so times, and roughly tried following it while I've been converting my project across to TypeScript. Anyways, what helped me what this section here:

"We’ll also need a page to display our Hello component. Create a file at the root of proj named index.html with the following contents:"

<!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>

"Notice that we’re including files from within node_modules. React and React-DOM’s npm packages include standalone .js files that you can include in a web page, and we’re referencing them directly to get things moving faster. Feel free to copy these files to another directory, or alternatively, host them on a content delivery network (CDN). Facebook makes CDN-hosted versions of React available..."

I added the Dependancies to my index.html file and it sorted this issue.

Hopefully that helps someone else who stumbles across this.

Upvotes: 2

Related Questions