MacroError: The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros. This indicates that you don't have the babel plugin "babel-plugin-macros" configured correctly. Please see the documentation for how to configure babel-plugin-macros properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md


Hello Guys, Does anyone has a solution on how to solve this issue?

**App.test.tsx**

```
import React from "react";
import { RelayEnvironmentProvider } from "react-relay";
import App from "./App";
import { createMockEnvironment } from "relay-test-utils";
import TestRenderer from "react-test-renderer"; // ES6

test("Loading State", () => {
const environment = createMockEnvironment();

const MyTestRender = () => {
return (



);
};
const renderer = TestRenderer.create();

// Here we just verify that the spinner is rendered
expect(
renderer.root.find((node) => node.props["data-testid"] === "spinner")
).toBeDefined();
});
```

**App.tsx**
```
import React from "react";
import "./App.css";
import graphql from "babel-plugin-relay/macro";
import { useLazyLoadQuery } from "react-relay";
import type { AppQuery as AppQueryType } from "./__generated__/AppQuery.graphql";
import LoadingSpinner from "./LoadingSpinner";

const AppQuery = graphql`
query AppQuery {
continents {
code
name
}
}
`;

function App() {
const data = useLazyLoadQuery(AppQuery, {});
const continents = data.continents;

return (
}>

export default App;

```

**Package,json**

```JSON
{
"name": "poc-graphql-relay",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1",
"@types/node": "^16.7.13",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"graphql-tag": "^2.12.6",
"jest-transform-graphql": "^2.1.0",
"msw": "^2.2.13",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-modal": "^3.16.1",
"react-scripts": "5.0.1",
"ts-jest": "^29.1.2",
"ts-node": "^10.9.2",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "relay-compiler --validate && react-scripts build",
"test": "jest",
"eject": "react-scripts eject",
"relay": "relay-compiler"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/preset-env": "^7.24.4",
"@babel/preset-react": "^7.24.1",
"@types/react-relay": "16.0.6",
"@types/react-test-renderer": "^18.0.7",
"@types/relay-runtime": "14.1.23",
"@types/relay-test-utils": "^14.1.4",
"babel-jest": "^29.7.0",
"babel-plugin-macros": "^3.1.0",
"babel-plugin-relay": "^16.2.0",
"graphql": "^16.8.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.7.0",
"react-relay": "^16.2.0",
"react-test-renderer": "^18.2.0",
"relay-compiler": "^16.2.0",
"relay-runtime": "^16.2.0",
"relay-test-utils": "^16.2.0"
}
}

```

**react-app-env.d.ts**
```
///

declare module "babel-plugin-relay/macro" {
export { graphql as default } from "react-relay";
}
```

**.babelrc**
```
{
"plugins": [["relay", { "artifactDirectory": "./src/__generated__" }]]
}
```