Getting React Developer Tools to Work with Webpack

Question

I followed this tutorial to expose React as global in Webpack. The Expose module is installed & I added the module loader in config webpack.config.js file. However, its not working & React Developer Tools are still not accessible.

Here is my webpack.config.js file, the first loader is expose-react:

var path = require ('path'),
    webpack = require ('webpack'),
    htmlWebpackPlugin = require ('html-webpack-plugin');

const PATHS = {
    app : path.join (__dirname, 'app'),
    build : path.join (__dirname, 'build')
};

module.exports = {
    entry : {
        main : PATHS.app + '/Main.jsx'
    },
    output : {
        path : PATHS.build,
        filename : 'dressAphrodite.js'
    },
    module : {
        loaders : [
            {
                test : require.resolve ('react'),
                loader : 'expose?React'
            },
            {
                test : /\.css$/,
                loaders : ['style', 'css'],
                include : PATHS.app
            },
            {
                test : /\.js?$/,
                loader : 'babel-loader',
                include : PATHS.app
            },
            {
                test : /\.jsx?$/,
                loader : 'babel-loader',
                include : PATHS.app
            }
        ]
    },
    debug : true,
    devtool : 'source-map',
    devServer : {
        contentBase : './app',
        progress : true,
        stats : 'errors-only',
    },
    plugins : [
        new htmlWebpackPlugin ({
            title : 'Dress',
            hash : true
        })
    ]
};

And just for info for which dependencies are installed, here is my package.json file:

{
  "name": "dress",
  "version": "1.0.0",
  "description": "",
  "main": "./main.jsx",
  "dependencies": {
    "i": "^0.3.3",
    "npm": "^3.5.2",
    "react": "^0.14.3",
    "react-dom": "^0.14.3"
  },
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "css-loader": "^0.23.1",
    "expose-loader": "^0.7.1",
    "html-webpack-plugin": "^1.7.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC"
}

And here is the .babelrc file content :

{
  'presets' : [
    'es2015',
    'react'
   ]
}

Answer 1

There is actually a solution for this, you have to start webpack with --inline option on more here, so the server will be located in localhost:8080 instead of localhost:8080/webpack-dev-server, and hot reloading will still work and you'll be able to see your react dev tools :D

Answer 2

I have the same problem. However, the devtools FAQ currently states "Currently iframes and Chrome apps/extensions are not inspectable", and webpack runs in an iframe.

Answer 3

Since React 0.12 you don't need to expose React as global anymore.

Important: if you are opening directly your html file without using a server, in other words, if you are using file:// URLs you need to allow the extension to access these kind of URLs: To do that go to settings>extensions, look for React Developer Tools and check the box saying "Allow access to file URLs".

When bundling React files written with jsx syntax you need to transform the file to pure javascript. To do that you need to use babel-preset-react which you already have installed but you are not using in your webpack.config.js.

You also don't need to import webpack in your webpack.config.js and the test property in the objects inside the loaders array is a regular expression, so /.jsx?$/ is enough to match js or jsx files.

Here is a working example of how to output a bundle of your React files (I removed the html-webpack-plugin so you need to write your own page)

webpack.config.js

var path = require ('path');

var PATHS = {
    app : path.join (__dirname, 'app'),
    build : path.join (__dirname, 'build')
};

module.exports = {
    entry : {
        main : PATHS.app + '/main.js'
    },
    output : {
        path : PATHS.build,
        filename : 'bundle.js'
    },
    module : {
        loaders : [
            {
                test : /\.jsx?$/,
                loader : 'babel',
                query: {
                    presets: ['react']
                }
            }
        ]
    }
};

main.js

var React = require('react');
var ReactDOM = require('react-dom');
var Component = require('./component.js');

ReactDOM.render(
  <Component />,
  document.getElementById('test')
);

component.js

var React = require('react');

var Test = React.createClass({
  diplayName: "Test",

  render: function () {
    return (
      <div>Test</div>
    );
  }

});

module.exports = Test;

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>


  </head>
  <body>
    <div id="test"></div>

    <script src="bundle.js"></script>
  </body>
</html>