diff --git a/packages/babel-preset-gatsby/src/__tests__/index.js b/packages/babel-preset-gatsby/src/__tests__/index.js index 69e9715c2a43b..dcf3dd837b351 100644 --- a/packages/babel-preset-gatsby/src/__tests__/index.js +++ b/packages/babel-preset-gatsby/src/__tests__/index.js @@ -50,4 +50,24 @@ describe(`babel-preset-gatsby`, () => { }), ]) }) + + it(`Allows to configure react importSource`, () => { + const { presets } = preset(null, { + reactImportSource: `@emotion/react`, + reactRuntime: `automatic`, + }) + + expect(presets[1]).toEqual([ + expect.stringContaining(path.join(`@babel`, `preset-react`)), + expect.objectContaining({ + importSource: `@emotion/react`, + }), + ]) + }) + + it(`Fails to configure react importSource if source is classic`, () => { + expect(() => preset(null, { reactImportSource: `@emotion/react` })).toThrow( + `@babel/preset-react\` requires reactRuntime \`automatic\` in order to use \`importSource\`.` + ) + }) }) diff --git a/packages/babel-preset-gatsby/src/index.js b/packages/babel-preset-gatsby/src/index.js index e87620ff21a04..f8336d09bfe53 100644 --- a/packages/babel-preset-gatsby/src/index.js +++ b/packages/babel-preset-gatsby/src/index.js @@ -30,7 +30,7 @@ export function loadCachedConfig() { } export default function preset(_, options = {}) { - let { targets = null } = options + let { targets = null, reactImportSource = null } = options const stage = options.stage || `test` const pluginBabelConfig = loadCachedConfig() @@ -54,6 +54,12 @@ export default function preset(_, options = {}) { } } + if (reactImportSource && options.reactRuntime !== `automatic`) { + throw Error( + `\`@babel/preset-react\` requires reactRuntime \`automatic\` in order to use \`importSource\`.` + ) + } + return { presets: [ [ @@ -87,6 +93,7 @@ export default function preset(_, options = {}) { : `React.createElement`, development: stage === `develop`, runtime: options.reactRuntime || `classic`, + ...(reactImportSource && { importSource: reactImportSource }), }, ], ],