React issues with Electron


#1

Having some issues with Electron. I routinely get the following error:

Error: Cannot find module './components/NovaApp' from 'C:\..\Electron\Apps\Nova\app'

The file is in the correct place. My NovaApp component file is .jsx. It ‘seems’ that if I switch to ‘.js’, the app will start working again.

Why might this be?

I’m thinking this is being caused by a setup issue is I’m rather new to watchify/browserify/babel and the like.

For reference, my package.json looks like:

{
  "name": "nova",
  "version": "1.0.0",
  "description": "...",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron index.js",
    "watch": "watchify app/app.jsx -t babelify -o public/js/bundle.js --debug --verbose"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.5.2",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.2.0",
    "material-ui": "^0.15.4",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-tap-event-plugin": "^1.0.0"
  }
}

and a .babelrc file:

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-react-jsx"]
}

#2

So I’ve been it may be an issue with “precompiling” the .jsx files. I’m rather new to some of the build systems in the JS ecosystem and have found very little information (most of which is conflicting) on how to get React working in Electron.

Does anyone know how to get React, .jsx files, and Electron to play nicely?

I would have thought that with the popularity of React this would of been rather straightforward.

Thanks in advance!


#3

The easiest way is to use electron-compile instead of setting up a custom build pipeline: https://github.com/electron/electron-compile

Hope that helps! :smiley:


#4

Thanks, I looked it over.

What i’m really looking for is a high level guide to setting up React + Electron, as well as any needed dependencies. My searches have shown results with people using things like Babelify, Watchify, Browserify, multiple Webpack configurations, various Babel setups…etc.

This is making it confusing to know what’s required and whats not.


#5

This is a super bare-bones boilerplate for a simple Electron + React app: https://github.com/mnquintana/electron-compile-universe

Basically, as far as dependencies go, all you need is electron-prebuilt-compile, babel-preset-react, and React, and the .compilerc file in the root of that repo. (Minus es2016-node5 if you don’t add that as a Babel plugin)

We developed electron-compile for solving exactly the kind of frustration you’re running into – you don’t need to set up Babelify, Browserify, or Webpack, or any kind of build step at all if you use it! :smiley:


#6

Great, ill look it over.

I took some quick courses to get up to speed Babel and Webpack, and got things working pretty quickly once I knew the basics.