2

I have a fairly complex setup regarding two React apps.

Context:
I was tasked to create a design system using ReactJS to be later on used in their main app. So i did made a design system in 1 week (w/ small knowledge in ReactJS; mainly a Vue dev) made with NextJS + TailwindCSS 3 + TypeScript in their latest versions.

Now i got their main React app downloaded locally; not Typescript, and all packages were outdated already using node 6 and react 16.13. So i updated them to node 16 and React 17 along with other packages.

Also main app doesn't use functional components while mine does.

Problem:
Now the problem is how do i connect the two apps? The main app (non TS) and my design system (TS with NextJS) so i could use my design system components on their app?

What i've tried to do so far:
I used npm-link to link my design system npm to the main app. The link was successful however main app cannot find my tsx files.

Also tried building my design system app by next build .

I tried two things on importing:

Importing a TSX component
I tried importing by import SearchBar from "design-system/components/SearchBar"; and was met with error Module not found: Error: Can't resolve.

Importing a JSX component
Tried importing a Test jsx component from my design system and met with error:

Module parse failed: Unexpected token (4:9)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| 
| export default function Test() {
>   return <div>TEST COMPONENT FROM JS</div>;
| }
|

Notes

  • Also take note that design system uses functional components while main app doesn't.

  • I was under impression that i could use any framework in design system regardless of what React or does app have TS or not, since it will be a npm package even if it's not published yet, and thought can import it and use it anywhere as long as it is React.

  • main app was created with react-scripts; design system was created with create next-app --typescript

Here's my ts.config.json from the design system app

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": "."
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "."],
  "exclude": ["node_modules"],
  "moduleResolution": ["node_modules", ".next", "node"]
}

What steps should i make?

  • Should i adjust my design system to use Class-based components and use JSX instead of TS?
  • Is there anything i can do on the main app to be able to import JSX or preferably TSX files from another react node app?
  • Should i make a new create-react-app or just start from scratch without NextJS for design system? NextJS wasn't really needed in my components.
Keanu Kent Gargar
  • 31
  • 5
  • 1
    You can use function components from the design system in your app even if the app only uses class components, as long as you're using React >=16.8. However, you do have to compile your design system components so they're usable by your app. Also, Next.js is most likely not needed to simply build components for a design system - you'd want to use Next.js in the app itself instead. – juliomalves Jul 03 '22 at 17:53
  • 1
    @juliomalves thank you. I've actually been learning that - NextJS is not suitable for building react "libraries". - Rollup is more suited for libraries and publishing to NPM. Since then i was able to create a framework from scratch using React + TypeScript + TailwindCSS + Rollup and able to use it on my main app. Thanks! – Keanu Kent Gargar Jul 04 '22 at 04:44

1 Answers1

0

So for several days, i have learned that what i was building were React "library" and React app.

The library part is important since you need to use some specific bundlers such as Rollup instead of Vite, Parcel, etc... and doesn't have to use create-react-app since it's a high level abstraction for creating React Apps instead.

If you have the same problem:

  • Don't use create-react-app or NextJS
  • Use bundlers suited for bundling components such as Rollup
  • Configure your Rollup to produce both CommonJS and ESModules. There are tons of tutorial for that.
  • You may use Barrel exports
Keanu Kent Gargar
  • 31
  • 5