从外部 src ReactJs 导入组件（.tsx）答案

【问题标题】：Import components(.tsx) from outside src ReactJs从外部 src ReactJs 导入组件（.tsx）
【发布时间】：2021-03-04 14:08:12
【问题描述】：

我是 ReactJs 的新手。我需要从当前项目或 src 外部导入一个反应组件（.tsx）。我尝试了一些类似 react-app-rewired 的方法来删除 ModuleScopePlugin 并将组件导入到我的项目中，但是当我使用该组件时出现错误..

D:/ReactApp/client/src/Temp/Template.tsx 8:2    
Module parse failed: Unexpected token (8:2)
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 Template(){
|       return(
>               <div><br/>From temp template 1</div>
|       );
| }

模板.tsx

import React, {useState, useRef, useEffect} from 'react';

export default function Template(){
    return(
        <div><br/>from build 1</div>
    );
}

当前项目：

我的应用程序
- 源
  - page.tsx
- package.json
- config-overrides.js
- tsconfig.json

config-overrides.js：

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

console.log("Override works")

module.exports = function override(config, env) {

    config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));
    return config;
};

package.json

"scripts": {
    "start": "react-app-rewired start --host 0.0.0.0",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",

Page.tsx

import React,{ useEffect, useState, useRef } from "react";
import Template from "D:/ReactApp/client/src/Temp/Template.tsx"
function ViewPage() {
    return (       
        <div>
            Page 1
            <Template />
        </div>
    );
}
export default React.memo(Page)

这是正确的吗？有没有更好的方法来做到这一点？

提前致谢

【问题讨论】：

如果您需要从外部导入更多页面，最好将该文件夹链接为依赖项。您可以使用 yarn 工作区来使用 mono repo
D:/ReactApp/client/src/Temp/Template.tsx 看起来像是在 src 文件夹中，那么您要做什么？如果您尝试从 src 文件夹之外导入文件，则 Create-react-app 会引发错误，否则它将成为一个非常混乱的项目。为什么不在 src 文件夹中复制一份呢？
@user10384449 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. 这是否意味着将.tsx 转换为.js 并使用？

标签： reactjs typescript

【解决方案1】：

如果文件被转换为 ES6，那么我可以导入并使用该组件。为此，我使用了 babel。

npx babel ./src/components/ --out-dir dist --extensions ".tsx"

package.json

"babel": {
    "presets": [
      [
        "@babel/preset-react",
        {
          "flow": false,
          "typescript": true
        }
      ],
      [
        "@babel/preset-typescript",
        {
          "isTSX": true,
          "allExtensions": true
        }
      ]
    ],
    "plugins": ["@babel/plugin-syntax-class-properties", "react-auto-binding"]
  }
"devDependencies": {
    "@babel/cli": "^7.13.0",
    "@babel/plugin-syntax-class-properties": "^7.12.13",
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "^7.13.0"
  }

【讨论】：