Multi module projects with create-react-app

Question

I have a project called Frontend-Core-Components which contains my App component.

I have another project (let's just call it Alpha for now) which containsAlphaApiService, which I pass to the App component via its props, I do this in Alpha's index.tsx

Alpha uses Create-react-app, I'm using rescript to modify the Webpack config to add Frontend-core-components as a module, Inside this Webpack configuration, I use resolve.alias to map imports from Alpha index.tsx to the Frontend-Core-Components.

It all seems to work, except when I run the build from Alpha project, I encounter the following.

  SyntaxError: /Users/coolguy/project/alpha/src/index.tsx: Unexpected token (9:11)

   7 |
   8 | window.onload = () => {
>  9 |     render(<App apiService={new AlphaApiService()} />, 
document.getElementById('root'))
         |                    ^
      10 | }
      11 |

any ideas?

Answer 1

You need to compile your import module, before importing it.

I would suggest checking out this project to create React component libraries.

https://github.com/KaiHotz/react-rollup-boilerplate

Answer 2

Or you can include the Frontend-Core-Components in your ts-loader(or babel-loader) rule.