Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Babel error when declaring and styling class components in the same file #469

Closed
silvenon opened this issue Aug 8, 2019 · 1 comment
Closed
Labels
bug 🐛 Issue is a confirmed bug

Comments

@silvenon
Copy link
Contributor

silvenon commented Aug 8, 2019

Environment

linaria@1.3.1
@babel/preset-env@7.5.5
@babel/preset-react@7.0.0

Description

If a class component is declared in the same file as it's being styled with styled, it causes the following error:

TypeError: Property declarations[0] of VariableDeclaration expected node to be of a type ["VariableDeclarator"] but instead got "ClassDeclaration"
    at validate (/Users/silvenon/Code/test/linaria/node_modules/@babel/types/lib/definitions/utils.js:131:13)
    at validator (/Users/silvenon/Code/test/linaria/node_modules/@babel/types/lib/definitions/utils.js:100:7)
    at Object.validate (/Users/silvenon/Code/test/linaria/node_modules/@babel/types/lib/definitions/utils.js:201:7)
    at validateField (/Users/silvenon/Code/test/linaria/node_modules/@babel/types/lib/validators/validate.js:22:9)
    at validate (/Users/silvenon/Code/test/linaria/node_modules/@babel/types/lib/validators/validate.js:16:3)
    at builder (/Users/silvenon/Code/test/linaria/node_modules/@babel/types/lib/builders/builder.js:46:27)
    at Object.VariableDeclaration (/Users/silvenon/Code/test/linaria/node_modules/@babel/types/lib/builders/generated/index.js:427:31)
    at resolve (/Users/silvenon/Code/test/linaria/node_modules/linaria/lib/babel/evaluate.js:80:22)
    at evaluate (/Users/silvenon/Code/test/linaria/node_modules/linaria/lib/babel/evaluate.js:114:5)
    at TaggedTemplateExpression (/Users/silvenon/Code/test/linaria/node_modules/linaria/lib/babel/visitors/TaggedTemplateExpression.js:257:46)

Reproducible Demo

Install core-js 2 to avoid #468 and install Babel CLI:

yarn add core-js@^2 @babel/cli

Configure Babel:

module.exports = {
  presets: [
    'linaria/babel',
    '@babel/preset-env',
    '@babel/preset-react',
  ],
}

Define a class component and style it with Linaria:

import React from 'react'
import { styled } from 'linaria/react'

class MyComp extends React.Component {
  render() {
    return <div {...this.props} />
  }
}

const StyledMyComp = styled(MyComp)`
  background: purple;
`

Try to compile the code with Babel CLI:

yarn babel index.js
@jayu jayu added the bug 🐛 Issue is a confirmed bug label Mar 26, 2020
@jayu
Copy link
Contributor

jayu commented Apr 1, 2020

could not repro with 1.4.0-beta.5

@jayu jayu closed this as completed Apr 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Issue is a confirmed bug
Projects
None yet
Development

No branches or pull requests

2 participants