After developing my first-app with the help of create-react-app, I incorporated some components from Material-UI. Everything was running smoothly when I launched it using npm start.
Upon completion, I decided to extract the nice-component into its own folder named nice-component. It had its own package.json and consisted of a component in a .js file that was exported as default. Visual Studio Code allowed me to navigate to its sources easily, indicating that the setup and folder configuration were correct.
In my new project final-app, which was also created using create-react-app, I added nice-component as a local dependency (file:../nice-component). However, upon running npm start, I encountered the following error:
SyntaxError: C:\...\other-package.js: Unexpected token (83:8)
81 | const { classes } = this.props;
82 | return (
> 83 | <Grid container className={classes.root} style={{margin:30}}>
| ^
I am perplexed by this issue. It appears that local dependencies are not bringing in their required dependencies recursively. I have previously used a similar method in another project months ago, although that project did not use react-scripts; instead, I set up babel, webpack, etc., manually.
I attempted to include all dependencies from Material-UI in final-app (even though I believe this should not be necessary), but the problem persists.