Question 246439 in Javascript Question posted in
A very good W3school tutorial can be found here.

Share components between apps using typescript and javascript

I have 2 different apps in 2 different folders.

One is a typescript app using nextjs13 app router and the other is a react app using javascript.

Is it possible to use components from nextjs/typescript app in my react/javascript app.

Trying to access using a relative path gives me “your component is not in src/ folder ….” But i am using app router so that’s not possible. Tried other things but none of them worked out.

The only thing that worked was copying and pasting stuff but I would assume there is a much concrete way. As i would like to have benefits of typescript from my new nextjs app before I find time to move my react app.

Tags:

2

Answers


  1. 0

    As @Phix said you need to use a monoerepo. There are many solutions such as NX, Learna, and TurboRepo. In this case I think Turbo is the best option since it’s designed for Next.js.

    Follow this guide from the TurboRepo docs and replace the starter apps with your Next and React apps. Then move all your components to packages/ui and import them into all of the files you need them in. It takes some work but it’s well worth it for your use case.

    Login or Signup to reply.
  2. 0

    Yes, it is possible to use components from a Next.js/TypeScript app in a React/JavaScript app, but there are some considerations and best practices to keep in mind. Here’s how you can achieve this:

    1. Configure TypeScript in Your React/JavaScript App:
      If your React app is in JavaScript and you want to use TypeScript components, you’ll need to set up TypeScript in your React project. You can do this by running npm install typescript @types/react @types/react-dom to install TypeScript and its typings for React.

    2. Component Export and Import:
      Ensure that the components you want to share from your Next.js/TypeScript app are properly exported and that they have their types defined. In your Next.js app, export the components like this:

      // MyComponent.tsx
import React from 'react';

const MyComponent: React.FC = () => {
  return (
    // Your component code here
  );
};

export default MyComponent;

      Then, in your React/JavaScript app, you can import this component like this:

      // AnotherComponent.js
import MyComponent from '../path-to-nextjs-app/MyComponent';

// ...

    3. Resolve TypeScript Compilation Issues:
      You may encounter TypeScript compilation issues when using TypeScript components in a JavaScript project. To resolve this, make sure your tsconfig.json (or jsconfig.json in a JavaScript project) is properly configured and includes paths to your Next.js components:

      {
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "path-to-nextjs-app/*": ["relative-path-to-nextjs-app/*"]
    }
  }
}

      This configuration tells TypeScript how to resolve the import paths correctly.

    4. Webpack Configuration (if applicable):
      If you are using Webpack or a similar bundler in your React/JavaScript app, you may need to configure it to handle TypeScript files properly. Ensure that TypeScript files are included in your webpack configuration’s module rules.

      module: {
  rules: [
    {
      test: /.(ts|tsx)$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
    },
    // Other rules for JavaScript, JSX, etc.
  ],
}

    5. Type Definitions and Type Mismatch:
      Be aware that if your Next.js/TypeScript app uses specific types that are not available in your React/JavaScript app, you might encounter type mismatches. You may need to provide the necessary type definitions or adjust your component usage accordingly.

    By following these steps and ensuring your project configurations are correct, you should be able to use components from your Next.js/TypeScript app in your React/JavaScript app without the need for manual copying and pasting. However, do note that mixing TypeScript and JavaScript can sometimes lead to challenges related to type compatibility, so be prepared to handle any type-related issues that may arise.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search