electron, react, webpack "Uncaught SyntaxError: Unexpected reserved word"

Question

Can anyone suggest why this error might be coming up? thanks!

The electron (Chromium) developer console gives this error: "Uncaught SyntaxError: Unexpected reserved word" and refers to appentrypoint.js

clicking on appentrypoint.js in the console shows that it looks like this:

(function (exports, require, module, __filename, __dirname, process, global) { import React from 'react';

window.React = React;

export default function appEntryPoint(mountNode) {

  React.render(<img src='http://tinyurl.com/lkevsb9' />, mountNode);

}

});

the actual source file for appentrypoint.js looks like this:

import React from 'react';
window.React = React;

export default function appEntryPoint(mountNode) {
  React.render(<img src='http://tinyurl.com/lkevsb9' />, mountNode);
}

The HTML file looks like this:

<!DOCTYPE html>
<html>
<body >
<div id="root" class='section'>
</div>
    <script src="http://localhost:3000/dist/bundle.js"></script>
      <script type="text/javascript">
      (function () {
        var mountNode = document.getElementById('root');
        var appEntryPoint = require('./appentrypoint.js');
        appEntryPoint(mountNode);
      })();
      </script>
</body>
</html>

webpack.config.base looks like this:

var path = require('path');

module.exports = {
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['babel-loader'],
      exclude: /node_modules/
    }]
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    libraryTarget: 'commonjs2'
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
  },
  plugins: [
  ],
  externals: [
    // put your node 3rd party libraries which can't be built with webpack here (mysql, mongodb, and so on..)
  ]
};

and webpack.config.development looks like this:

/* eslint strict: 0 */
'use strict';

var webpack = require('webpack');
var webpackTargetElectronRenderer = require('webpack-target-electron-renderer');
var baseConfig = require('./webpack.config.base');


var config = Object.create(baseConfig);

config.debug = true;

config.devtool = 'cheap-module-eval-source-map';

config.entry = [
  'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr',
  './app/appentrypoint'
];

config.output.publicPath = 'http://localhost:3000/dist/';

config.module.loaders.push({
  test: /^((?!\.module).)*\.css$/,
  loaders: [
    'style-loader',
    'css-loader'
  ]
}, {
  test: /\.module\.css$/,
  loaders: [
    'style-loader',
    'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!'
  ]
});


config.plugins.push(
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin(),
  new webpack.DefinePlugin({ "global.GENTLY": false }),
  new webpack.DefinePlugin({
    '__DEV__': true,
    'process.env': {
      'NODE_ENV': JSON.stringify('development')
    }
  })
);

config.target = webpackTargetElectronRenderer(config);

module.exports = config;

Have you tried resolving an alias? http://stackoverflow.com/a/27512914/314447 — SaphuA, Dec 10 '15 at 09:51
@limelights I understand that browserify and webpack allow usage of require — Duke Dougal, Dec 10 '15 at 10:03
Are you using Babel 5.0 or 6.0? If you're using 6.0, do you have the proper presets installed? That first snippet looks like it's not being transpiled from ES6 to ES5 properly, as it still has the "default" keyword in there. — markerikson, Dec 10 '15 at 15:58

score 0 · Answer 1 · answered Dec 11 '15 at 04:03

Browsers don't natively have module systems, so your <script> tag containing require('./appentrypoint.js') will not run without being included in the bundle.

Assuming the rest of your webpack configuration is correct, (at a quick glance, it looks good) you can resolve this issue by first removing that second <script> block from your HTML file. Your HTML file should then look like:

<!DOCTYPE html>
<html>
<body >
  <div id="root" class='section'></div>
  <script src="http://localhost:3000/dist/bundle.js"></script>
</body>
</html>

Now you need to fix appentrypoint.js, like so:

import React from 'react';

// if using ES6, best practice would be to switch "var" with "const" here
var mountNode = document.getElementById('root');

React.render(<img src='http://tinyurl.com/lkevsb9' />, mountNode);

The main change here is that you're defining your mount node in the root of your app, and then immediately telling React.render() to render your component on that node. Also, you should have no need for window.React = React;.

This should work, but if you're running the latest version of React you may see something like "Warning: React.render is deprecated." This is because the Facebook devs decided to separate out DOM-related tools from React into a completely separate library, React-DOM. So, for future reference, you would npm install react-dom --save and your root would actually look like this:

import React from 'react';
import ReactDOM from 'react-dom';

const mountNode = document.getElementById('root');

ReactDOM.render(<img src='http://tinyurl.com/lkevsb9' />, mountNode);

In React 0.15.0 and beyond, React.render() will not be a function, so best to get in the habit of using their new API sooner than later.

electron, react, webpack "Uncaught SyntaxError: Unexpected reserved word"

1 Answers1