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

[react-constant-elements] Unexpected token. Hoisting elements into imports, breaking source #9965

Open
natew opened this issue May 10, 2019 · 2 comments

Comments

Projects
None yet
3 participants
@natew
Copy link

commented May 10, 2019

Bug Report

I really should make repro's, but I'm sort of overextended even just opening tickets. This one though it happening to me on latest everything:

ERROR in ./src/pages/OrbitPage/OrbitHeader.tsx 14:22
Module parse failed: Unexpected token (14:22)
You may need an appropriate loader to handle this file type.
| import { OrbitSpaceSwitch } from '../../views/OrbitSpaceSwitch';
| import { OrbitHeaderInput } from './OrbitHeaderInput';
> import { _ref2 } from (HeaderButtonPassProps, {}, void 0, _jsx(BackButton, {}), _jsx(OrbitHeaderMenu, {}));
| from;
| './OrbitHeaderMenu';
 @ ./src/pages/OrbitPage/OrbitPage.tsx 23:0-44 58:17-28
 @ ./src/OrbitRoot.tsx
 @ ./src/main.tsx

from a source file that roughly has:

import { invertLightness } from '@o/color'
import { Icon, useActiveAppsSorted, useLocationLink } from '@o/kit'
import { isEditing } from '@o/stores'
import { BorderBottom, Button, ButtonProps, Popover, PopoverProps, Row, Space, SurfacePassProps, View } from '@o/ui'
import { FullScreen, gloss, useTheme } from 'gloss'
import React, { forwardRef, memo } from 'react'

import { useStores } from '../../hooks/useStores'
import { useOm } from '../../om/om'
import { OrbitSpaceSwitch } from '../../views/OrbitSpaceSwitch'
import { OrbitHeaderInput } from './OrbitHeaderInput'
import { OrbitHeaderMenu } from './OrbitHeaderMenu'
import { OrbitNav } from './OrbitNav'

// ..

export function View() {
  return (<HeaderButtonPassProps><BackButton />{/* ... */}<OrbitHeaderMenu /></HeaderButtonPassProps>)
}

const HeaderButtonPassProps = styled.div()
const BackButton = styled.div()

Current Behavior

It's not happening on every element, and in testing it in a lot of cases I can't see what actually triggers it. Some files are fine, others have this error. I've binary searched a file down, but again, it didn't really make sense how.

Environment

  • Babel version(s): 7.4.4
  • Node/npm version: 11
  • OS: Mojave
  • Monorepo: yes/lerna

using:

@babel/preset-env {
          loose: true,
          modules: false,
          targets: {
            chrome: '74',
            esmodules: true,
          }
@babel/preset-typescript
@babel/preset-react

as well as

@babel/plugin-syntax-dynamic-import
@babel/plugin-proposal-decorators
babel-plugin-transform-react-remove-prop-types
@babel/plugin-transform-react-constant-elements
@babel/plugin-transform-react-inline-elements

Possible Solution

I'll try and investigate more. The constant-element plugin makes a huge difference for performance.

Next try will be binary searching plugins.

Additional context/Screenshots
Add any other context about the problem here. If applicable, add screenshots to help explain.

@babel-bot

This comment has been minimized.

Copy link
Collaborator

commented May 10, 2019

Hey @natew! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community
that typically always has someone willing to help. You can sign-up here
for an invite.

@natew natew changed the title react-constant-elements is hoisting elements into imports, breaking source [react-constant-elements] Unexpected token. Hoisting elements into imports, breaking source May 10, 2019

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented May 13, 2019

I get this error for that code:

/repl: Identifier 'View' has already been declared (17:16)

  15 | // ..
  16 | 
> 17 | export function View() {
     |                 ^
  18 |   return (<HeaderButtonPassProps><BackButton />{/* ... */}<OrbitHeaderMenu /></HeaderButtonPassProps>)
  19 | }
  20 | 
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.