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

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"
  }

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 5
Comments: 19 (5 by maintainers)

Most upvoted comments

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.

+15

zbnauj on Jun 5, 2019

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')]],
};

wholenews on Jan 15, 2021

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

ianfabs on Aug 17, 2020

@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

w10036w on May 1, 2019

I am experiencing the same issue with Next JS. I have tried this approach and that approach but they are not helping.

ChrisClaude on Jun 30, 2021

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

georgewilde on Feb 14, 2020

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",
  ]
}

adam-hanna on Feb 3, 2020

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

sibelius on May 1, 2019