Relay: Error: The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros

[mindaugasnakrosis]

Trying to use babel-plugin-relay/macro with custom-react-scripts

Rendering Test component into index page:

import {QueryRenderer} from 'react-relay';
import graphql from 'babel-plugin-relay/macro';

const Test = () => <QueryRenderer
   environment={environment}
   query={graphql'
    ...
  '}
  render={() => {
    return <div>test</div>;
  }}
/>

Throws:

Uncaught Error: 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

Even though I configured my .babelrc:

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ],
  "plugins": [
    "relay",
    "macros"
  ]
}

Repository I am using trying setup relay on: https://github.com/gothinkster/react-mobx-realworld-example-app

Package.json devDeps:

  "devDependencies": {
    "babel-plugin-relay": "^2.0.0-rc.2",
    "babel-plugin-macros": "^2.5.0",
    "custom-react-scripts": "0.2.0",
    "relay-compiler": "^2.0.0"
  }

[sibelius]

Make sure you have the same version of relay dependencies

[mindaugasnakrosis]

@sibelius changing to "babel-plugin-relay": "^2.0.0" did not help.
react-relay and and relay-compiler are both 2.0.0.

[sibelius]

have you tried following this guide https://facebook.github.io/create-react-app/docs/adding-relay#docsNav

can you try to use babel 7 as well?

check our babel config https://github.com/entria/entria-fullstack/blob/master/packages/babel/index.js#L18

[sibelius]

repro here on codesandbox https://codesandbox.io/s/0vnk5jv00

[sibelius]

I made this repo that is based on CRA 2 with relay and babel plugin macros

https://github.com/sibelius/create-react-app-relay-modern

I think your custom-react-scripts does not have the latest version of babel-plugin-macros and this is causing troubles

[mindaugasnakrosis]

@sibelius huge thanks for the repo. Seems to be a problem with custom-react-scripts.

[w10036w]

@sibelius

repro here on codesandbox https://codesandbox.io/s/0vnk5jv00

The repo you give is showing the exact error reported.
I am here since I am facing the same issue when I am using penv.macro

[sibelius]

the error is on codesandbox itself https://github.com/codesandbox/codesandbox-client/issues/1604

[j0lv3r4]

I found this issue while trying to fix the exact same problem in a completely different context (A Next.js app).

I was able to fix my problem adding a .babelrc file with this:

{
    "presets": ["next/babel"],
    "plugins": ["preval", "macros"]
}

Not sure if it'll help y'all, but leaving it here anyway.

[adam-hanna]

If it adds to the discussion, I'm also experiencing this error but only with ts-jest. My app runs fine on its own.

// apps/core/jest.config.js
module.exports = {
  name: 'core',
  preset: '../../jest.config.js',
  transform: {
    '^.+\\.[tj]sx?$': 'ts-jest',
    '^(?!.*\\\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
  coverageDirectory: '../../coverage/apps/core',
  snapshotSerializers: ['jest-emotion'],
  testEnvironment: 'jsdom',
  globals: {
    'ts-jest': {
      babelConfig: "apps/core/babel.config.js"
    }
  }
}

// apps/core/babel.config.js
module.exports = {
  "presets": [
    "next/babel",
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "preval",
    [ "relay", { "artifactDirectory": "./__generated__" } ],
    "macros",
  ]
}

[georgewilde]

@adam-hanna I am also getting this error with ts-jest despite adding a .babelrc file as suggested by @j0lv3r4

[ianfabs]

I am also experiencing the same issue with ts-jest and next.js. adding preval and macros to babelrc did not resolve my issue

[wholenews]

I was getting the same error with next.js and @j0lv3r4's fix didn't help. However it worked after replacing .babelrc with babel.config.js containing:

module.exports = {
  presets: [require.resolve('next/babel')],
  plugins: [[require.resolve('babel-plugin-macros')]],
};