the name _GlobalStyles is defined multiple times

[getaaron]

I have a next.js project. When I start it and try to load anything, I get:

yarn dev
yarn run v1.22.19
$ next dev
- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- info automatically enabled Fast Refresh for 1 custom loader
- event compiled client and server successfully in 120 ms (21 modules)
- wait compiling...
- event compiled client and server successfully in 80 ms (21 modules)
- wait compiling / (client and server)...
- error ./styles/GlobalStyles.js
Error:
  x the name `_GlobalStyles` is defined multiple times
     ,-[/Users/aaron/demo/styles/GlobalStyles.js:1:1]
   1 | import { css as _css } from "@emotion/react";
   2 | import { Global as _globalImport } from "@emotion/react";
   3 | const _GlobalStyles = () => <_globalImport styles={_css`*, ::before, ::after {
     :       ^^^^^^|^^^^^^
     :             `-- previous definition of `_GlobalStyles` here
   4 |   box-sizing: border-box;
   5 |   border-width: 0;

As far as I can tell I am only importing GlobalStyles once so I'm unsure why it's getting built twice.

My package.json dependencies are:

  "dependencies": {
    "@emotion/css": "^11.11.2",
    "@emotion/react": "^11.11.1",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.16.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "next": "^13.4.8",
    "react": "^18.0.0",
    "react-anchor-link-smooth-scroll": "^1.0.12",
    "react-dom": "^18.0.0",
    "react-modal": "^3.15.0"
  },

and devDependencies:

  "devDependencies": {
    "@emotion/babel-plugin": "^11.11.0",
    "autoprefixer": "^10.4.14",
    "babel-loader": "^9.1.2",
    "babel-plugin-inline-react-svg": "^2.0.2",
    "babel-plugin-macros": "^3.1.0",
    "babel-plugin-styled-components": "^2.1.4",
    "postcss": "^8.4.24",
    "styled-components": "^6.0.2",
    "tailwindcss": "^3.3.2",
    "twin.macro": "^3.3.1"
  }

I've posted a reproducible demo here - just clone, yarn install, and yarn dev: https://github.com/getaaron/demo

I read through #277 and tried some of the suggestions there but it didn't resolve the issue. I'm not sure if this is a bug or user error, so apologies in advance if I did something simple wrong 🥲

[ben-rogerson]

Hey there, thanks for posting this demo.

I spent a little while troubleshooting but wasn't too sure of the cause.
I do see there's a funky looking twin config in babel-plugin-macros.config.js (not the cause of this issue though).

Take a look at the official next-emotion example for a working configuration using the src folder - sorry I couldn't help out more here.