Babel JSX Syntax error when importing from a linked library
See original GitHub issueIs 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
- Create a new Create React App (The actual App)
- Create another Create React App (The “Library”)
- 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
Issue Analytics
- State:
- Created 5 years ago
- Reactions:15
- Comments:26 (4 by maintainers)
Top Results From Across the Web
Babel/JSX Transpiler error on build when importing a module ...
You're correct, the issue is that the react-collision-provider hasn't been properly transpiled to be understood by the browser.
Read more >Troubleshooting | React Navigation
I'm getting "SyntaxError in @react-navigation/xxx/xxx.tsx" or ... Linking is automatic from React Native 0.60, so if you have linked the library manually, ...
Read more >Introducing the New JSX Transform – React Blog
With the new transform, you can use JSX without importing React. ... This upgrade will not change the JSX syntax and is not...
Read more >babel/preset-react
Note: Flow syntax support is no longer enabled in v7. ... "classic" // defaults to classic // "importSource": "custom-jsx-library" // defaults to react...
Read more >Getting Started · React Native Paper
The plugin automatically rewrites the import statements so that only the modules you use are imported instead of the whole library. Add react-native-paper/babel...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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:
Export your component or module code in /src/index.js as a default export (
export default YourComponent
)In root index.js export your component as follows
export { default as YourComponent } from './src/index.js'
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.