Gatsby: [1.0] gatsby-ssr.js JS is not running through webpack/babel

[mericsson]

When using ES6 features that require webpack like import in gatsby-ssr.js then running gatsby develop dies a quick death.

(function (exports, require, module, __filename, __dirname) { import React from 'react'
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/mericsson/dev/gatsby-using-redux/.cache/api-runner-ssr.js:2:15)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)

[mericsson]

Opening this issue as the earlier PR 1125 was not correct in its fix.

Some more info on the issue in PR 1081.

fyi @scottyeck

[0x80]

It would be really nice to have a solution to this, since it also applies to locally defined / developed plugins. It feels cumbersome having to run a babel watch task on a part of your site code to integrate it with the rest during development.

[mericsson]

@KyleAMathews fwiw this can be repro'ed in examples/redux with npm run develop and loading http://localhost:8000. I looked over this comment again to see if I could figure it out, but no luck.

To me, this seems like a big issue... not being able to develop efficiently with any code requiring babel referenced by gatsby-ssr.

[KyleAMathews]

I agree this is a problem! Just someone needs to step up to fix it :-) It's not something that's affecting me atm and I have a list of TODOs about a mile long so please anyone who cares about this don't wait for me.

The fix is pretty simple. Change our develop.js script to do a static webpack build using https://github.com/markdalgleish/static-site-generator-webpack-plugin like we do for production HTML builds. This will make production + develop work the same.

[0x80]

@KyleAMathews Could it be sufficient to simply add a babel-register to the gatsby cli so that all code is going through babel? It would make the code more consistent since then we also have import statements and non v4 ES features to use in the server code.

[0x80]

I do like the idea of making production + develop work the same though. I find it a bit confusing that they differ a lot.

[KyleAMathews]

Fixed by https://github.com/gatsbyjs/gatsby/pull/1254 thanks @craig-mulligan!