Run typescript sources through full babel transpiling pipeline (#3369)

* Run typescript sources through full babel transpiling pipeline

* Pass the babel config around to simplify the pipelines that need to use babel

* Bubble up errors from webpack run

Author: farcaller

packages/gatsby-plugin-typescript/src/__tests__/gatsby-node.js

@@ -15,24 +15,26 @@ describe(`gatsby-plugin-typescript`, () => {
   })
 
   it(`modifies webpack config`, () => {
+    const babelConfig = { "plugins":[``] }
     const config = {
       loader: jest.fn(),
     }
 
-    modifyWebpackConfig({ config }, { compilerOptions: {} })
+    modifyWebpackConfig({ config, babelConfig }, { compilerOptions: {} })
 
     expect(config.loader).toHaveBeenCalledTimes(1)
     const lastCall = config.loader.mock.calls.pop()
     expect(lastCall).toMatchSnapshot()
   })
 
   it(`passes the configuration to the ts-loader plugin`, () => {
+    const babelConfig = { "plugins":[``] }
     const config = {
       loader: jest.fn(),
     }
     const options = { compilerOptions: { foo: `bar` }, transpileOnly: false }
 
-    modifyWebpackConfig({ config }, options)
+    modifyWebpackConfig({ config, babelConfig }, options)
 
     const expectedOptions = {
       compilerOptions: {
@@ -55,10 +57,11 @@ describe(`gatsby-plugin-typescript`, () => {
   })
 
   it(`uses default configuration for the ts-loader plugin when no config is provided`, () => {
+    const babelConfig = { "plugins":[``] }
     const config = {
       loader: jest.fn(),
     }
-    modifyWebpackConfig({ config }, { compilerOptions: {} })
+    modifyWebpackConfig({ config, babelConfig }, { compilerOptions: {} })
 
     const expectedOptions = {
       compilerOptions: {

packages/gatsby-plugin-typescript/src/gatsby-node.js

@@ -1,5 +1,4 @@
 const { transpileModule } = require(`typescript`)
-const path = require(`path`)
 
 const test = /\.tsx?$/
 const compilerDefaults = {
@@ -11,7 +10,7 @@ const compilerDefaults = {
 module.exports.resolvableExtensions = () => [`.ts`, `.tsx`]
 
 module.exports.modifyWebpackConfig = (
-  { config },
+  { config, babelConfig },
   { compilerOptions, transpileOnly = true }
 ) => {
   // CommonJS to keep Webpack happy.
@@ -23,16 +22,10 @@ module.exports.modifyWebpackConfig = (
   // error (i.e., not build) at something or other.
   const opts = { compilerOptions: copts, transpileOnly }
 
-  // Load gatsby babel plugin to extract graphql query
-  const extractQueryPlugin = path.resolve(
-    __dirname,
-    `../gatsby/dist/utils/babel-plugin-extract-graphql.js`
-  )
-
   config.loader(`typescript`, {
     test,
     loaders: [
-      `babel?${JSON.stringify({ plugins: [extractQueryPlugin] })}`,
+      `babel?${JSON.stringify(babelConfig)}`,
       `ts-loader?${JSON.stringify(opts)}`,
     ],
   })

packages/gatsby/src/commands/build-javascript.js

@@ -11,7 +11,20 @@ module.exports = async program => {
     `build-javascript`
   )
 
-  return new Promise(resolve => {
-    webpack(compilerConfig.resolve()).run(() => resolve())
+  return new Promise((resolve, reject) => {
+    webpack(compilerConfig.resolve()).run((err, stats) => {
+      if (err) {
+        reject(err)
+        return
+      }
+
+      const jsonStats = stats.toJson()
+      if (jsonStats.errors && jsonStats.errors.length > 0) {
+        reject(jsonStats.errors[0])
+        return
+      }
+
+      resolve()
+    })
   })
 }

packages/gatsby/src/utils/webpack-modify-validate.js

@@ -17,9 +17,9 @@ const validationWhitelist = Joi.object({
   responsiveLoader: Joi.any(),
 })
 
-export default (async function ValidateWebpackConfig(config, stage) {
+export default (async function ValidateWebpackConfig(program, config, babelConfig, stage) {
   // We don't care about the return as plugins just mutate the config directly.
-  await apiRunnerNode(`modifyWebpackConfig`, { config, stage })
+  await apiRunnerNode(`modifyWebpackConfig`, { program, config, babelConfig, stage })
 
   // console.log(JSON.stringify(config, null, 4))
 

packages/gatsby/src/utils/webpack.config.js

@@ -49,13 +49,12 @@ module.exports = async (
   webpackPort = 1500,
   pages = []
 ) => {
-  const babelStage = suppliedStage
   const directoryPath = withBasePath(directory)
 
   // We combine develop & develop-html stages for purposes of generating the
   // webpack config.
   const stage = suppliedStage
-  const babelConfig = await genBabelConfig(program, babelStage)
+  const babelConfig = await genBabelConfig(program, suppliedStage)
 
   function processEnv(stage, defaultNodeEnv) {
     debug(`Building env for "${stage}"`)
@@ -568,7 +567,7 @@ module.exports = async (
 
   // Use the suppliedStage again to let plugins distinguish between
   // server rendering the html.js and the frontend development config.
-  const validatedConfig = await webpackModifyValidate(config, suppliedStage)
+  const validatedConfig = await webpackModifyValidate(program, config, babelConfig, suppliedStage)
 
   return validatedConfig
 }