Require in UI code


#1

I have a React app that was written for the browser. All of my code is broken up into modules using require( ./relative/path/ ) and browserify to bundle everything up for the browser. I’m new to using Electron, but I have gotten the impression that I could use require() in the render process, eliminating the need to pre-process with browserify. But I think I have misunderstood something, because none of my relative-path require() statements are working (Uncaught Error: Cannot find module './relative/path'). Can someone help me understand how to use require in my UI code?


#2

Is the file you’re trying to require exporting anything; e.g. module.exports = function () {}? If that isn’t the problem posting an example of real code that is not working as expected will make it easier for others to help find the issue.


#3
'use strict';

var DesktopApp = require('./components/myApp');
var React = require('react');
 
React.render(React.createElement(DesktopApp, null), document.getElementById('main'));

This is the contents of the only file included with the <script> tag in my index.html.

I get the error for require( './components/myApp'); ( and every other component ). And yes, every file uses module.exports. This application already works in the browser, using browserify. In fact, the app works fine with electron if I bundle everything with Browserify; I was just under the understanding that that wouldn’t be necessary.

Thanks


#4

Is anything in your app patching/overriding the built-in nodejs require? Can you get it to work using the quick start app and a simple module like module.exports = function () { return 0 } that doesn’t bring in outside dependencies?


#5

no, nothing clobbering require. I’ll try the quick start app now. I should have added, initially that I’m using electron-prebuilt. I am inferring though, from your responses, that this should work, then?


#6

Yeah absolutely should work. A broken require would be a pretty big deal.


#7

js/a_module.js:

module.exports = function(){
  console.log( '\n\n\nWTF\n\n\n' );
};

js/app.js:

require( './a_module' )();

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
    <script src='js/app.js'></script>
  </body>
</html>

result:

Uncaught Error: Cannot find module './a_module'

I know I’m going to feel silly, but what am I doing wrong?


#8

ok, if I change the path in require to require( './js/a_module' ), it works, which makes sense… Ok, so the problem is that, with browserify, “Relative paths are always resolved with respect to the invoking file’s location.” and I was expecting node’s require to resolve the same way.

Thanks john, for suggesting I use the quick start app, it made it much easier to narrow down the issue.

– SOLVED –

For anyone else who runs into a similar scenario as myself: I changed all of my relative paths to normal requires ( e.g. ./component/a_component to app/component/a_component ) and used the symlink approach described in the browserify handbook, putting a symlink in node_modules that points to my js directory ( node_modules/app -> src/js ) and voilà! now I have a code-base that can be run in the browser using browserify or run in electron, as-is.