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

Author: Vladimir Pouzanov

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

@@ -14,30 +14,27 @@ describe(`gatsby-plugin-typescript`, () => {
     expect(resolvableExtensions()).toMatchSnapshot()
   })
 
-  it(`modifies webpack config`, async () => {
-    const stage = ``
-    const program = {
-      directory: `.`,
-      browserslist: [],
-    }
+  it(`modifies webpack config`, () => {
+    const babelConfig = { "plugins":[``] }
     const config = {
       loader: jest.fn(),
     }
 
-    await modifyWebpackConfig({ program, config, stage }, { 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: {
@@ -60,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,4 +1,3 @@
-const genBabelConfig = require(`gatsby/dist/utils/babel-config`)
 const { transpileModule } = require(`typescript`)
 
 const test = /\.tsx?$/
@@ -10,12 +9,10 @@ const compilerDefaults = {
 
 module.exports.resolvableExtensions = () => [`.ts`, `.tsx`]
 
-module.exports.modifyWebpackConfig = async (
-  { program, config, stage },
+module.exports.modifyWebpackConfig = (
+  { config, babelConfig },
   { compilerOptions, transpileOnly = true }
 ) => {
-  const babelConfig = await genBabelConfig(program, stage)
-
   // CommonJS to keep Webpack happy.
   const copts = Object.assign({}, compilerDefaults, compilerOptions, {
     module: `commonjs`,

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

@@ -17,9 +17,9 @@ const validationWhitelist = Joi.object({
   responsiveLoader: Joi.any(),
 })
 
-export default (async function ValidateWebpackConfig(program, 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`, { program, config, stage })
+  await apiRunnerNode(`modifyWebpackConfig`, { program, config, babelConfig, stage })
 
   // console.log(JSON.stringify(config, null, 4))
 

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

@@ -555,7 +555,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(program, config, suppliedStage)
+  const validatedConfig = await webpackModifyValidate(program, config, babelConfig, suppliedStage)
 
   return validatedConfig
 }