Next.js: Upgrading to v7.0.0.-* Throws "_JSXStyle" has already been declared error

[ssylvia]

Bug report

Describe the bug

./pages/demo/card.tsx 3:7
Module parse failed: Identifier '_JSXStyle' has already been declared (3:7)
You may need an appropriate loader to handle this file type.
| var _jsxFileName = "/Users/user/path/packages/storymaps-app/pages/demo/card.tsx";
| import _JSXStyle from "styled-jsx/style";
> import _JSXStyle from "styled-jsx/style";
| import React from 'react';
| import { Card, CardBody, CardTitle, CardSubtitle, CardText } from 'storymaps-components/build';

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone this repo: https://github.com/ssylvia/styled-jsx-multi-declare
2. It's a monorepo, yarn install from root.
3. cd packages/app
4. yarn dev
5. Open browser at localhost:3000

System information

• OS: macOS
• Version of Next.js: 7.0.0-10

[timneutkens]

Sounds like a github.com/zeit/styled-jsx issue. Please follow the issue template and provide a reproduction.

[ssylvia]

Hi @timneutkens, sorry about that. I was hoping it was a known config issue that I wouldn't need to full repo setup with a demo repo. I've updated the issue with reproducible repo example. I've also cross-posted the issue on styled-jsx repo: https://github.com/zeit/styled-jsx/issues/487.

I've left it here as well because it may be related to nextjs. I upgraded to nextjs 7 canary to get the stable version of Babel 7. Babel 7 beta was throwing errors with my Storybook Instance (v4 alpha with babel 7). I was able to render Storybook fine with styled-jsx, Typescript, and Babel 7, which is why I suspected NextJS.

[timneutkens]

Looks like you're adding styled-jsx on top of next/babel, next/babel has styled-jsx included. You can configure the plugin if needed as outlined here: https://github.com/zeit/next.js#customizing-babel-config

So the reason it's adding the import twice is that you have styled-jsx/babel effectively being ran 2 times.