CODEWITHSUNDEEP
javascriptreactjsgoogle-chrome-devtoolswebpack-dev-server
diwao11
diwao11

Reputation: 151

React Chrome Tab Extension Not Working with WebPack Dev Server

enter image description hereMy React Chrome extension does not appear on my React web app, even though I've got it reading all the components, rendering it all correctly. Everything is coming out as an iframe (screenshot attached).

Here is my webpack.config.js file. 

var path = require('path');
var webpack = require('webpack');

    module.exports = {
    entry: './main.js', 
    output: {path: __dirname, filename: 'bundle.js'}, 
    module: {
        loaders: [
            {
                test: /\.jsx?$/, 
                loader: 'babel-loader', 
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            }, 
            {
                test: /\.css$/, 
                loader: 'style!css' 
            }, 
            {
                test: require.resolve('react'),
                loader: 'expose?React'  
            }
        ]
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ], 
    watch: true

    };

My version of React, I believe 0.14.7, react-dom is 0.14.0. I also tried manipulating the main.js file which is the entry point.

I have 

if (typeof window !== 'undefined') {
    window.React = React;
}

Could use any suggestions or help.

Upvotes: 2

Views: 1530

Answers (2)

diwao11
diwao11

Reputation: 151

After some digging... wow it's super dumb. Instead of going to http://localhost:8080/webpack-dev-server/ , I went to just localhost:8080 and then I saw my React tab.

Upvotes: 6

Ted A.
Ted A.

Reputation: 2302

Is your app rendering in an iframe?

According to the react-devtools docs

Currently iframes and Chrome apps/extensions are not inspectable.

Upvotes: 2

Related Questions