create-react-app: Babel JSX Syntax error when importing from a linked library

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.

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

I have got the exact issue as @chrisdel101 . Any updates on resolving the compilation error?

Hey @FelixKuehl, we’re really sorry about this! As mentioned in https://github.com/facebook/create-react-app/issues/5024, our monorepo support was incomplete and we think it would create more issues for our users in long term if we shipped it in that state. On the other hand, the 2.x branch has stalled for many months, and we were worried it would never get shipped. So we made a difficult decision to remove some of the features that existed in 2.0 earlier alphas in order to ship a stable 2.0 within two weeks.

We’ll offer migration strategies that you could use to unblock your migration to 2.x, but they’ll likely include introducing another compiler like nwb for packages outside the main one. We are also open to more proposals about monorepo support, except that if we land it next time it would need to be a more complete one.

Hello all! I have been searching for a solution to my problem, and this seems to be the most relevant. Please let me know if this doesn’t fit with this open issue.

Goals:

I am building two separate repositories. One will be a page which will import other React Components as npm packages once published. So currently I have a local repository that depends on another. For development, I am attempting to link them with npm link.

Versions:

• node: 8.15.0
• yarn: 1.13.0
• npm: 6.4.1
• react-scripts: ^2.1.8

Circumstances:

1. Local repository containing a React Component. .../Code/A/MyComponent/src/TL
   • This renders and works.
2. Local repository that will eventually import and render the first React Component. .../Code/A/MyApp/src
   • Created this with npm create-react-app MyApp
3. Linked these two with npm link, starting with MyComponent, then running npm link MyComponent in MyApp
   • This created a MyComponent node_module in MyApp.
4. When importing and attempting to render MyComponent in MyApp, received Syntax error
   • Unexpected token at the beginning of MyComponent’s JSX code.
   • This is the issue it looks like @FelixKuehl was having and seems this is a compiling issue.
5. Run npm run transpile in MyComponent to create a dist directory.
6. When running npm start now, I receiv this message: Error: Failed to compile.
   • In .../MyApp/src/App.js:
   • Module not found: Can't resolve 'A/MyComponent' in '.../Code/A/MyApp/src'

I tried adding symlinks: false here in node_modules/react-scripts/config/webpack.config.js:

module.exports = function(webpackEnv) { 
  return { 
    resolve: {
      symlinks: false,
    }
  }
}

This did not help.

1. After tinkering, I am left with this current error:

Concerns:

This seems to be either a Babel or Webpack issue concerning npm link. I imagine MyApp is either not being pulled together by Webpack and/or not being compiled by Babel.