open-source-labs / Reactime

Developer tool for time travel debugging and performance monitoring in React applications.
https://www.reacti.me
MIT License
2.17k stars 200 forks source link

within electron app: 'No React application found. Please install our npm package in your app.' #214

Closed charleshetier closed 4 years ago

charleshetier commented 4 years ago

I am trying to use this awesome extension within an electron app. It seems that the extension is successfully added to the devtools (I can see the "reactime" tab), but I can see nothing but the message "No React application found. Please install our npm package in your app."

The renderer process is launching my react application this way (tsx, transpiled and bundled with webpack with a simple ts-loader):

import ReactDom from 'react-dom';
import React from 'react';
import { ConfigSelection } from './config-selection';
import { RecoilRoot } from 'recoil';

const App = () => (
    <RecoilRoot>
        <ConfigSelection/>
    </RecoilRoot>
)

ReactDom.render(<App/>, document.getElementById('root'));

I am using the version 3.1.1 from the github release (https://github.com/open-source-labs/reactime/releases), I have read in the description that the npm package was not needed since 3.0 version.

I have however tried the npm package (npm i reactime -D)

import ReactDom from 'react-dom';
import React from 'react';
import { ConfigSelection } from './config-selection';
import { RecoilRoot } from 'recoil';
import reactime from 'reactime';

const App = () => (
    <RecoilRoot>
        <ConfigSelection/>
    </RecoilRoot>
)

const rootElement = document.getElementById('root');
ReactDom.render(<App/>, rootElement);
reactime(rootElement);

Same message in devtools and an error occured on the renderer process:

acorn.mjs:2921 Uncaught (in promise) SyntaxError: Unexpected token (1:9) at Object../node_modules/reactime/node_modules/acorn/dist/acorn.mjs.pp$4.raise (acorn.mjs:2921) at Object../node_modules/reactime/node_modules/acorn/dist/acorn.mjs.pp.unexpected (acorn.mjs:692) at Object../node_modules/reactime/node_modules/acorn/dist/acorn.mjs.pp$3.parseIdent (acorn.mjs:2872) at Object../node_modules/reactime/node_modules/acorn/dist/acorn.mjs.pp$1.parseFunction (acorn.mjs:1269) at Object../node_modules/reactime/node_modules/acorn/dist/acorn.mjs.pp$1.parseFunctionStatement (acorn.mjs:986) at Object../node_modules/reactime/node_modules/acorn/dist/acorn.mjs.pp$1.parseStatement (acorn.mjs:833) at Object../node_modules/reactime/node_modules/acorn/dist/acorn.mjs.pp$1.parseTopLevel (acorn.mjs:749) at Object.parse (acorn.mjs:549) at Function.parse (acorn.mjs:572) at ./node_modules/reactime/astParser.js.module.exports (astParser.js:11)

Did I miss something? Or maybe the extension is not compatible with electronjs?

Thanks a lot

crperezt commented 4 years ago

Yes, npm package is no longer needed, that message needs to get updated. Do you have the React DevTools extension installed? That's required for Reactime 4.0+.

charleshetier commented 4 years ago

@crperezt Awesome, thank you so much it worked! (at least the devtool displays something :-)). I may have missed the information somewhere, but if not, maybe it could be useful to mention the react devtool dependancy to avoid being spammed by people like me :-).