unexpected token `<` when importing individual modules

[niinpatel]

importing this way doesn't work:

import Breadcrumb from '@primer/components/src/Breadcrumbs';

but importing from the main module works:

import {Breadcrumb} from '@primer/components';

This is happening for any module I import, not just breadcrumb. What could be the reason?

By the way, I'm using create-react-app in my project.

Here's the full error I'm getting.

Failed to compile
./node_modules/@primer/components/src/Breadcrumbs.js
SyntaxError: D:\VS-Code-Projects\covid19india\node_modules\@primer\components\src\Breadcrumbs.js: Unexpected token (34:64)

  32 | const BreadcrumbBase = ({className, children, theme, ...rest}) => {
  33 |   const classes = classnames(className, 'Breadcrumb')
> 34 |   const wrappedChildren = React.Children.map(children, child => <Wrapper theme={theme}>{child}</Wrapper>)
     |                                                                 ^
  35 |   return (
  36 |     <nav className={classes} aria-label="breadcrumb" {...rest}>
  37 |       <Box as="ol" my={0} pl={0}>
This error occurred during the build time and cannot be dismissed.

[emplums]

Hey @niinpatel ! I believe this is because the files in our src folder are not transpiled by babel. @BinaryMuse is working on a fix for this in #789 😄

[BinaryMuse]

Yep, once Primer Components v19.0.0 ships, you should be able to do something like:

import Breadcrumb from '@primer/components/lib/Breadcrumb'

[niinpatel]

Yep, once Primer Components v19.0.0 ships, you should be able to do something like:

import Breadcrumb from '@primer/components/lib/Breadcrumb'

Got it! So, there's currently no workaround for this right? It may be worth updating the documentation here https://primer-components-bkeydftbnx.now.sh/components/docs/getting-started that currently you cannot import modules directly from src?

[BinaryMuse]

Fixed in v19; see https://primer.style/components/getting-started