从src ReactJs外部导入组件(.tsx)

Question

我是ReactJs新手。我需要从当前项目或src外部导入一个react组件(.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>
|       );
| }

Template.tsx

import React, {useState, useRef, useEffect} from 'react';
export default function Template(){
return(
<div><br/>from build 1</div>
);
}

当前项目:

• MyApp
  • src
    • 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)

正确吗?有更好的方法吗?

Thanks in advance

Answer 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"
}