React Chrome Tab Extension Not Working with WebPack Dev Server

Question

My 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.

diwao11 · Accepted Answer · 2016-03-17 20:59:00Z

6

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.

answered Mar 17, 2016 at 20:59

diwao11

1512 silver badges16 bronze badges

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

1 Comment

Mayas Over a year ago

The app is rendered in an iframe when route under /webpack-dev-server/ by removing it, live reload is not available anymore.

Ted A. · Accepted Answer · 2016-03-17 20:48:11Z

2

Is your app rendering in an iframe?

According to the react-devtools docs

Currently iframes and Chrome apps/extensions are not inspectable.

edited Mar 17, 2016 at 20:48

answered Mar 17, 2016 at 20:45

Ted A.

2,30217 silver badges22 bronze badges

3 Comments

diwao11 Over a year ago

It did not change.

Ted A. Over a year ago

Are you rendering your app in an iframe? React-devtools says it can't communicate with an app inside an iframe

diwao11 Over a year ago

I am not rendering my app in in iframe. That's why I'm perplexed. My index.html <body> <div id="root"> </div> <script src="bundle.js"></script> </body>

Collectives™ on Stack Overflow

React Chrome Tab Extension Not Working with WebPack Dev Server

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related