React loadable to be used with two repos/create-react-app

Question

I am trying to use react-loadable with two repos / two different application made by create-react-app

I have used npm link to connect the two application and in the parent application I have used the child application using the below code

//parent application

import Loadable from 'react-loadable';

export default Loadable({
  loader: () => import("child-app/src"),
  loading() {
    return <div>Loading...</div>
  }
})

I have made child component exportable and the code is,

//child application

import React from 'react';

function App() {
  return (
    <div>Child App</div>
  );
}

export default App;

I keep getting below error

SyntaxError: /Users/ssinha/Documents/microfrontend2/first-app/src/App.js: Unexpected token (5:4)

  3 | function App() {
  4 |   return (
> 5 |     <div>Child App</div>
    |     ^
  6 |   );
  7 | }

looks like its not getting transpiled, I have tried using some plugin such as "@loadable/babel-plugin" with no help .:-(

Answer 1

First of all I would suggest you to reduce complexity during debug, so try to not use react-loadable until you fixed the issue. I don't think react-loadable is the problem here.

create-react-app is not transpiling the code that it's inside your node_modules folder (I think this is something you can't change, it's this way by design, at least it was so last time I used it).

So: if you want too keep working with a npm-linked module you must build the module before using it (the annoying part is that you should rebuild it at avery change on the child).

You should not import child-app/src (because it's source, not transpiled) but simply "child-app".

Finally: migrating to a monorepo or using yarn workspaces would probably simplify you life.