Friday 5 March 2021

Export error with babel-plugin-relay and create-react-app

I am trying to export the babel-plugin-relay/macro module in a file (to make my relay functions easier to import), however it is throwing an error. I am using create-react-app without ejecting or changing any config.

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);
import graphql from "babel-plugin-relay/macro"

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

export { graphql }

The only way I can make this work is by importing babel-plugin-relay/macro into the files I want to use it.

//it works perfect when importing into the files that consume it directly
import graphql from "babel-plugin-relay/macro"

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

const query = graphql`<my_query>`

I am trying to achieve an index file I can import from with all my relay things, so it stays nice and clean in my apps.

//it works perfect when importing into the files that consume it directly
import { graphql, RelayEnvironment, preloadQuery } from "my-relay-folder"

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

const query = graphql`<my_query>`


from Export error with babel-plugin-relay and create-react-app

No comments:

Post a Comment