{"id":2842,"date":"2020-04-01T19:20:38","date_gmt":"2020-04-01T18:20:38","guid":{"rendered":"https:\/\/www.dpscomputing.com\/blog\/?p=2842"},"modified":"2021-03-01T21:25:18","modified_gmt":"2021-03-01T21:25:18","slug":"getting-started-with-isomorphic-react-at-pluralsight","status":"publish","type":"post","link":"https:\/\/www.dpscomputing.com\/blog\/2020\/04\/01\/getting-started-with-isomorphic-react-at-pluralsight\/","title":{"rendered":"Getting Started with Isomorphic React at Pluralsight"},"content":{"rendered":"\n

Isomorphic React, for many reasons, is gaining traction with many developers. Not least for the SEO benefits – or should we say that massive SEO pitfalls of *NOT* using isomorphic React. Blank pages for Googlebot anyone? <\/p>\n\n\n\n

Anyway, a great course available for this very topic, that covers Isomorphic React in a concise fashion<\/a> is Dan Sterns course over at Pluralsight. <\/p>\n\n\n\n

I myself have also started looking at this course – and for anyone else who has started recently, they may have hit a snag with the demo. <\/p>\n\n\n\n

Dan provides a starting template for the course – only issue is, that the template falls over with an error after you’ve followed the initial instructions to npm install, npm post install and npm start in the second module ‘Course Introduction’. <\/p>\n\n\n\n

A few people have been discussing this on the Isomorphic React course discussion page<\/a> and a few people have tried to help, but it appears Dan hasn’t had a chance to provide an update yet – probably because he’s uber busy with a load of other things at the moment as many of us are! <\/p>\n\n\n\n

Unfortunately, there’s a couple of pieces of the answer missing to get up and running and some helpful steps along the way that are spread out so I’m writing this article to put the solution in one place. Don’t worry, I will of course also be submitting a pull request to Daniel to help get this fixed in the git repo also. <\/p>\n\n\n\n

The Issue with the Isomorphic React Template<\/h2>\n\n\n\n

So, you followed all the instructions, you’re raring to go and boom!<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

So what does this mean? Short answer, the app isn’t running. <\/p>\n\n\n\n

Slightly longer answer (just about!): Uglify can’t understand the pretty new ES6 syntax that we’re all using (or should be using!) by now. <\/p>\n\n\n\n

Full error stack included below:<\/p>\n\n\n\n

PS C:\\Pluralsight\\Isomorphic-React\\> npm start\n\n> isomorphic-react@1.0.0 start C:\\Pluralsight\\Isomorphic-React\\isomorphic-react\n> npm run start-prod\n\n\n> isomorphic-react@1.0.0 start-prod C:\\Pluralsight\\Isomorphic-React\\\n> npm run build && cross-env NODE_ENV=production babel-node server --useServerRender=true --useLiveData=false\n\n\n> isomorphic-react@1.0.0 build C:\\Pluralsight\\Isomorphic-React\\\n> cross-env webpack --config .\/webpack.config.prod.babel.js\n\nC:\\Pluralsight\\Isomorphic-React\\node_modules\\@babel\\core\\lib\\config\\config-descriptors.js:178\n    throw new Error(`Plugin\/Preset files are not allowed to export objects, only functions. In ${filepath}`);\n    ^\n\nError: Plugin\/Preset files are not allowed to export objects, only functions. In C:\\Pluralsight\\Isomorphic-React\\node_modules\\babel-preset-es2015\\lib\\index.js      \n    at createDescriptor (C:\\Pluralsight\\Isomorphic-React\\node_modules\\@babel\\core\\lib\\config\\config-descriptors.js:178:11)\n    at C:\\Pluralsight\\Isomorphic-React\\node_modules\\@babel\\core\\lib\\config\\config-descriptors.js:109:50\n    at Array.map (<anonymous>)\n    at createDescriptors (C:\\Pluralsight\\Isomorphic-React\\node_modules\\@babel\\core\\lib\\config\\config-descriptors.js:109:29)\n    at createPresetDescriptors (C:\\Pluralsight\\Isomorphic-React\\node_modules\\@babel\\core\\lib\\config\\config-descriptors.js:101:10)\n    at presets (C:\\Pluralsight\\Isomorphic-React\\node_modules\\@babel\\core\\lib\\config\\config-descriptors.js:47:19)\n    at mergeChainOpts (C:\\Pluralsight\\Isomorphic-React\\node_modules\\@babel\\core\\lib\\config\\config-chain.js:320:26)\n    at C:\\Pluralsight\\Isomorphic-React\\node_modules\\@babel\\core\\lib\\config\\config-chain.js:283:7\n    at buildRootChain (C:\\Pluralsight\\Isomorphic-React\\node_modules\\@babel\\core\\lib\\config\\config-chain.js:120:22)\n    at loadPrivatePartialConfig (C:\\Pluralsight\\Isomorphic-React\\node_modules\\@babel\\core\\lib\\config\\partial.js:85:55)\nnpm ERR! code ELIFECYCLE\nnpm ERR! errno 1\nnpm ERR! isomorphic-react@1.0.0 build: `cross-env webpack --config .\/webpack.config.prod.babel.js`\nnpm ERR! Exit status 1\nnpm ERR!\nnpm ERR! Failed at the isomorphic-react@1.0.0 build script.\nnpm ERR! This is probably not a problem with npm. There is likely additional logging output above.\n\nnpm ERR! A complete log of this run can be found in:\nnpm ERR!     C:\\Users\\DPS Computing\\AppData\\Roaming\\npm-cache\\_logs\\2020-03-31T15_35_22_069Z-debug.log\nnpm ERR! code ELIFECYCLE\nnpm ERR! errno 1\nnpm ERR! isomorphic-react@1.0.0 start-prod: `npm run build && cross-env NODE_ENV=production babel-node server --useServerRender=true --useLiveData=false`\nnpm ERR! Exit status 1\nnpm ERR!\nnpm ERR! Failed at the isomorphic-react@1.0.0 start-prod script.\nnpm ERR! This is probably not a problem with npm. There is likely additional logging output above.\nnpm ERR! A complete log of this run can be found in:\nnpm ERR!     C:\\Users\\DPS Computing\\AppData\\Roaming\\npm-cache\\_logs\\2020-03-31T15_35_22_139Z-debug.log\nnpm ERR! code ELIFECYCLE\nnpm ERR! errno 1\nnpm ERR! isomorphic-react@1.0.0 start: `npm run start-prod`\nnpm ERR! Exit status 1\nnpm ERR!\nnpm ERR! Failed at the isomorphic-react@1.0.0 start script.\nnpm ERR! This is probably not a problem with npm. There is likely additional logging output above.\n\nnpm ERR! A complete log of this run can be found in:\nnpm ERR!     C:\\Users\\DPS Computing\\AppData\\Roaming\\npm-cache\\_logs\\2020-03-31T15_35_22_237Z-debug.log<\/code><\/pre>\n\n\n\n
Fixing Isomorphic React Template<\/h2>\n\n\n\n
The two main areas that need updating are the depdencies and the webpack configuration.  I’ll detail the specific steps below.  <\/p>\n\n\n\n
There’s obviously more than one way to skin a cat – or, in this case, fix a programming template, but we’ve tried and tested this way and all seems fine up to now (we’ll provide updates here if we discover any issues or come up with a more optimum fix).  <\/p>\n\n\n\n
The main steps are to teach Uglify ES6 (via the very handy uglifyjs-webpack-plugin), upgrade webpack – including adding the recommended webpack command line interface and then substituting the webpack config and including some nice new config features that are part of Webpack 4.  <\/p>\n\n\n\n
Step 1 – Upgrade Webpack<\/h2>\n\n\n\n
We’re going to take advantage of some new features of Webpack (such as the optimisation configuration) and this requires an upgrade to Webpack 4.x<\/p>\n\n\n\n
You can:<\/p>\n\n\n\n
Run:<\/p>\n\n\n\n
npm update webpack<\/pre>\n\n\n\n
Or Change the package.json file directly and run:<\/p>\n\n\n\n
npm install<\/pre>\n\n\n\n
Or you can run:<\/p>\n\n\n\n
npm uninstall webpack\nnpm install webpack<\/pre>\n\n\n\n
To install the latest version (currently 4.42.1).  <\/p>\n\n\n\n
Step 2 – Add The Webpack CLI<\/h2>\n\n\n\n
This isn’t included in the original template – but is a recommended part of Webpack 4.x so we ought to add it.  <\/p>\n\n\n\n
You can do this by running the following command in Powershell:<\/p>\n\n\n\n
npm install webpack-cli<\/pre>\n\n\n\n
If you get giddy and forget this step, you will get a reminder when we start later that the command line interface is missing and you ought to add it:<\/p>\n\n\n\n
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:\n - webpack-cli (https:\/\/github.com\/webpack\/webpack-cli)\n   The original webpack full-featured CLI.\nWe will use \"npm\" to install the CLI via \"npm install -D\".\nDo you want to install 'webpack-cli' (yes\/no):<\/code><\/pre>\n\n\n\n
Enter ‘yes’ here at the prompt and the default webpack-cli will be installed:<\/p>\n\n\n\n
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...\nnpm WARN webpack-dev-middleware@1.12.2 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.\nnpm WARN isomorphic-react@1.0.0 No repository field.\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\\fsevents):\nnpm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {\"os\":\"darwin\",\"arch\":\"any\"} (current: {\"os\":\"win32\",\"arch\":\"x64\"})\n\n+ webpack-cli@3.3.11\nadded 38 packages from 24 contributors and audited 870908 packages in 22.005s\n\n1 package is looking for funding\n  run `npm fund` for details<\/code><\/pre>\n\n\n\n
Step 3 – Install UglifyJS Webpack Plugin<\/h2>\n\n\n\n
Remember when we said we have to teach Uglify JS ES6?  Don’t worry, it’s not like homeschooling!  The UglifyJS Webpack Plugin will do the heavy lifting for us!<\/p>\n\n\n\n
This isn’t part of the template project so we just need to npm install the latest version:<\/p>\n\n\n\n
npm install uglifyjs-webpack-plugin<\/pre>\n\n\n\n
That’ll whirl away as usual and install in the background.  <\/p>\n\n\n\n
Step 4 – Updating the Webpack Config<\/h2>\n\n\n\n
Now onto the final step – updating the webpack config.  <\/p>\n\n\n\n
One of the key differences is what we’ll need to include our new UglifyJS Webpack plugin that we installed in the previous step:<\/p>\n\n\n\n
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');<\/code><\/pre>\n\n\n\n
This should be included at the top along with the path and webpack dependencies.  <\/p>\n\n\n\n
Then we add a mode:<\/p>\n\n\n\n