Babel JSX Syntax error when importing from a linked library

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

Running npx create-react-app --info does not seem to work. Getting:

Please specify the project directory:
  create-react-app <project-directory>

For example:
  create-react-app my-react-app

Run create-react-app --help to see all options.

However I am using: Node v8.11.3 Yarn 1.9.4 npm 6.4.1 react-scripts 2.0.0-next.2150693d

Steps to Reproduce

1. Create a new Create React App (The actual App)
2. Create another Create React App (The “Library”)
3. Link them together: Import a component from the Library into the App

This used to work with react-scripts 2.0.0-next.a671462c

Expected Behavior

The app should compile just fine as it used to in 2.0.0-next.a671462c

Actual Behavior

Application fails to compile with “Syntax error: Unexpected token” in the component, that was attempted to be imported from the other application.

To me it seems like the babel loader is somehow not transpiling the imported component.

Reproducible Demo

https://github.com/FelixKuehl/cra-alpha-issue-example

[earGO]

We’ve had quite some time figuring this one out, but I think we found the reason and solution. Check this out guys - I bet you’ll be blown away.

So, when CRA tries to transpile your package, it uses babel to transpile JSX code to commonjs. Last versions of babel transpilers have big troubles with unnamed exports. So when you try and import your default as unnamed export (for example export default YourComponent), it throws an error.

But we do not see this error, 'cause of CRA bundle. This error shows in console, for example, when we try and configure babel with webpack in monorepo by hand.

The solution, that worked for me and my colleagues is this one:

1. make package structure like this

YourPackage
|-src
|   |-index.js
|-index.js

1. Export your component or module code in /src/index.js as a default export (export default YourComponent)

2. In root index.js export your component as follows export { default as YourComponent } from './src/index.js'

3. you can import your component in consumer app like this: import {YourComponent} from YourPackage (plus the namespace, of course)

And that’s it. This worked for us beautifully.

Special thanks to this hero, https://github.com/aivtel who actually solved the problem. My part was in pointing where to look and why this unfortunate issue was happening in the first place.

[kode8]

Spent a day to work out this heap of crap. Why is the React eco system so f__ked? Back to Vue I go.