CODEWITHSUNDEEP
javascriptreactjswebpackcreate-react-app
Paul McLoughlin
Paul McLoughlin

Reputation: 2289

Multi module projects with create-react-app

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?

Upvotes: 3

Views: 2290

Answers (2)

edvard chen
edvard chen

Reputation: 2784

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

Upvotes: 1

David Bradshaw
David Bradshaw

Reputation: 13077

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

Upvotes: 3

Related Questions