Downshift: Incompatibility With StyledJSX in nextJS babel generator error

Created on 27 Feb 2018 · 4Comments · Source: downshift-js/downshift

downshift version: 1.28.1
node version: 6.11.4
npm (or yarn) version: 3.10.10

Hello Guys, I'm trying to implement the downshift as a component inside my application using nextJS.
The issue is, when I use styledJSX I got this error:

Module build failed: TypeError: /mnt/c/projects/bppj-portal-frontend/components/AutoComplete/index.js: Cannot read property '0' of null
    at Buffer._append (/mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/buffer.js:95:25)
    at Buffer.append (/mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/buffer.js:72:10)
    at Generator._append (/mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/printer.js:206:52)
    at Generator.word (/mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/printer.js:131:10)
    at Generator.Identifier (/mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/generators/types.js:38:8)
    at /mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/printer.js:298:23
    at Buffer.withSource (/mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/buffer.js:168:5)
    at Generator.withSource (/mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/printer.js:189:15)
    at Generator.print (/mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/printer.js:297:10)
    at Generator.MemberExpression (/mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/generators/expressions.js:216:8)
    at /mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/printer.js:298:23
    at Buffer.withSource (/mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/buffer.js:168:5)
    at Generator.withSource (/mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/printer.js:189:15)
    at Generator.print (/mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/printer.js:297:10)
    at Generator.AssignmentExpression (/mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/generators/expressions.js:190:8)
    at /mnt/c/projects/bppj-portal-frontend/node_modules/babel-generator/lib/printer.js:298:23

My code:

```import { Fragment } from "react";
import Downshift from "downshift";
import Input from "../../components/ui/Input";
import { Search } from "../../components/icons";
import styles from "./styles";

export default function BasicAutocomplete({ items, onChange }) {
return (

onChange={onChange}
render={({
getItemProps,
getInputProps,
isOpen,
inputValue,
selectedItem,
highlightedIndex
}) => (

name="AutoComplete"
type="text"
error
placeholder="Digite o Nome"
IconRight={() => }
{...getInputProps({})}
/>
{isOpen ? (

{items
.filter(i => !inputValue || i.toLowerCase().includes(inputValue.toLowerCase()))
.map((item, index) => (
{...getItemProps({ item })}
key={item}
style={{
backgroundColor: highlightedIndex === index ? "gray" : "white",
fontWeight: selectedItem === item ? "bold" : "normal"
}}
>
{item}

))}

) : null}

)}
/>

);
}
``


The most bizarre situation is when I comment or delete the

{...getItemProps({ item })}OR` everything works fine, I'm trying to catch whats wrong, looking forward the docs but still no results.

Source

yuripramos

Most helpful comment

Any upstream ticket that fixes this issue? It seems like the issue is still there.

pencilcheck on 27 Apr 2018

👍3

All 4 comments

@yuripramos did you manage to resolve this issue? Could you post the workaround?

madox2 on 20 Mar 2018

The reason for that behaviour is spread operator. For some reason, if it's present in markup, it will crash with above error. Like in mine case:

If I do:

<span { ...{ 'xmlns:v': 'http://rdf.data-vocabulary.org/#' }}>
    <a rel="v:url" href="/foo">Foo</a> &gt; <a rel="v:url" href="/foo/bar">Bar</a> &gt; <a rel="v:url" href="/foo/bar/baz">Baz</a>
  </span>

It will crash.

If I extract it like that:

const XmlnsSpan = (props) => (
  <span { ...{ 'xmlns:v': 'http://rdf.data-vocabulary.org/#' }}>
    {props.children}
  </span>
);

and use it in the markup where the styles are:

<XmlnsSpan>
  <a rel="v:url" href="/foo">Foo</a> &gt; <a rel="v:url" href="/foo/bar">Bar</a> &gt; <a rel="v:url" href="/foo/bar/baz">Baz</a>
</XmlnsSpan>

It will be just fine

KamWis on 6 Apr 2018

Any upstream ticket that fixes this issue? It seems like the issue is still there.

pencilcheck on 27 Apr 2018

👍3

@pencilcheck @yuripramos
were you able to use this for server side on rendering on next.js and was the issue fixed ??

solomonakp on 20 Jun 2020

Was this page helpful?

0 / 5 - 0 ratings

Downshift: Incompatibility With StyledJSX in nextJS babel generator error

Most helpful comment

All 4 comments

Related issues