2

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.

diwao11
  • 151
  • 2
  • 15

2 Answers2

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.

diwao11
  • 151
  • 2
  • 15
  • The app is rendered in an iframe when route under `/webpack-dev-server/` by removing it, live reload is not available anymore. – Mayas May 22 '16 at 20:59
2

Is your app rendering in an iframe?

According to the react-devtools docs

Currently iframes and Chrome apps/extensions are not inspectable.

Ted A.
  • 2,264
  • 17
  • 22