Babel error when exporting babel-plugin-relay/macro

[charklewis]

Describe the bug

I am trying to import babel-plugin-relay/macro into a file, that I can then re-export. The purpose of this is to have a index.js that contains a few things I can organise and import more easily into my project.

import graphql from "babel-plugin-relay/macro"

export { usePreloadedQuery } from "react-relay/hooks"
export { preloadQuery } from "./preloadQuery"
export { RelayEnvironment } from "./RelayEnvironment"

// etc 

export { graphql }

And in my project I can then import all of my Relay setup/functions as

import { graphql, RelayEnvironment, preloadQuery } from "my-relay-folder"

const query = graphql`<my_query>`

const App = () => {
  //my app stuff
}

export { App } 

I am finding I am getting an error when attempting to do this. During testing, the error only occurs when I am importing and exploring this package in the same file. It does not occur if I just import the package.

I have a stack overflow for this bug - https://stackoverflow.com/questions/66406429/export-error-with-babel-plugin-relay-and-create-react-app. It did have a bounty on it however it didn't receive any answers.

Did you try recovering your dependencies?

Yes, this did not solve the issue.

Which terms did you search for in User Guide?

Yes, there is a page here but it does not cover importing/exporting.

https://create-react-app.dev/docs/adding-relay/

Environment

Environment Info:

  current version of create-react-app: 4.0.3
  running from /Users/<my_computer>/.npm/_npx/33061/lib/node_modules/create-react-app

  System:
    OS: macOS 11.2.3
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Binaries:
    Node: 14.15.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Edge: Not Found
    Firefox: 86.0.1
    Safari: 14.0.3
  npmPackages:
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1 
    react-scripts: ^4.0.3 => 4.0.3 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

Import and export babel-plugin-relay/macro in the same file.

Expected behavior

I would be able to import and export ``babel-plugin-relay/macro` in the same file, as I can with all of my other files / dependancies.

Actual behavior

Babel seems to be crashing with the following error:

Module parse failed: Export 'graphql' is not defined (7:9)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| export { preloadQuery } from "./preloadQuery";
| export { RelayEnvironment } from "./RelayEnvironment";
> export { graphql };
| 
| const currentExports = __react_refresh_utils__.getModuleExports(module.id);

Reproducible demo

I have created a SandBox however there is a slightly different error on there - https://codesandbox.io/s/create-react-app-forked-wpgot?fontsize=14&hidenavigation=1&theme=dark