Webpack: Using Bundle.js, "React is not defined"

Question

I've used Webpack to bundle all my npm modules. Here's my webpack.config.js:

"use strict";

module.exports = {
    entry: './main.js',
    output: { path: __dirname, filename: 'bundle.js' },

    module: {
        loaders: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {test: /\.json$/, loader: "json"},
        ]
    },
};

Here's the main.js I refer to. As you can see, I try to import React, React-dom, fixed-data-table, chartjs, jquery and visjs.

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table';
import Chart from 'chartjs';
import jquery from 'jquery';
import vis from 'vis';

All is good, and I remoce the react, chartjs, jquery etc. src from my index.html and just refer to the newly created bundle.js altogether.

In my functional .js file where content is derived from, and my react classes are, I add the following to the beginning(where I assume the error stems from)

import React from './bundle';
import ReactDOM from './bundle';
import {Table, Column, Cell} from './bundle';
import Chart from './bundle';
import vis from './bundle';

This results in my browser dev tools giving me the error: Uncaught Referenceerror: React is not defined.

Where did I go wrong in the bundling process? I'm assuming the bundling went fine since there were no errors. But how do I import, for example, React in another .js file properly?

Here's my package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.3.17",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-runtime": "^6.3.19",
    "chartjs": "^0.3.24",
    "webpack": "^1.12.9"
  },
  "dependencies": {
    "chartjs": "^0.3.24",
    "fixed-data-table": "^0.6.0",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "vis": "^4.17.0"
  }
}

What does your package.json look like? Double check you've actually installed the react dependencies. — user4164128
– user4164128, Commented Dec 27, 2016 at 10:49

Sing · Accepted Answer · 2016-12-28 03:28:40Z

3

Webpack will start from './main.js' and read import statement to determine the modules need to bundle.

webpack concept

Update:

Since the library already in bundle.js, your files should look like this :

Index.html(do not include any library already import in .js file you write)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

main.js :

import React from 'react';
....

edited Dec 28, 2016 at 3:28

answered Dec 27, 2016 at 10:50

Sing

4,0623 gold badges32 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

cbll Over a year ago

Sorry if I explained myself poorly; I already added the bundle.js in my index.html, and then removed the "old" sources(like react, react-dom, visjs and chartjs), as these should now be in the bundle.js instead.

Sing Over a year ago

in this case you don't need any import.

cbll Over a year ago

Not if I make another .js file where I create reactclasses? Right now this file says "missing import statement" when I call react, so something definitely went wrong in the process then. Perhaps my approach with the Main.js is wrong..? Just importing them there? Should it be different?

Sing Over a year ago

Do not remove your source like node_modules/react, and import it in every new js file is the correct way.

cbll Over a year ago

node_modules have not been touched, they are still there. But isn't the idea that you can bundle all your node_modules into one JS file, and then import from there?

|

lukkasz · Accepted Answer · 2016-12-27 11:14:40Z

3

You can't import from 'bundle.js', because it is compiled to ES5 and ES5 don't support modules (imports and exports).

Properly way to import React to another js is via import

import React from 'react'

You can find more info about Modules at: https://www.sitepoint.com/understanding-es6-modules/

edited Dec 27, 2016 at 11:14

answered Dec 27, 2016 at 10:57

lukkasz

1339 bronze badges

3 Comments

cbll Over a year ago

So in my react file, I should just do import React from 'react' and it should work..? Isn't that what I already tried - i'm not too sure :) If I can't bundle everything with webpack and use it from there, what's the point exactly?

lukkasz Over a year ago

I think that you didn't include bundle.js properly. Could you provide link to repo?

cbll Over a year ago

I can't show the repo unfortunately. I simply replaced the way I imported react previously and then referred to the bundle.js in the html head. As <script src="bundle.js"></script>

Collectives™ on Stack Overflow

Webpack: Using Bundle.js, "React is not defined"

2 Answers 2

10 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

3 Comments

Related