尝试在根目录外以expo形式导入外部通用组件答案

【问题标题】：Trying to import external common component in expo form outside the root directory尝试在根目录外以expo形式导入外部通用组件
【发布时间】：2021-04-15 07:11:25
【问题描述】：

这是通用组件

import React from "react";
// import { Text } from "react-native";
const PrintHello = () => {
  return <div> Hello Im working </div>;
};

export default PrintHello;
// import _ from "lodash";

这是文件夹结构

common/components

app1/src/components

app2/src

我收到了这个错误

/Users/mac3/Documents/GitHub/curb-food/common/utils.js 4:9
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // import { Text } from "react-native";
| const PrintHello = () => {
>   return <div> Hello Im working </div>;
| };
|

我尝试了所有的 babel-loader，但没有任何效果

【问题讨论】：

嘿，这个问题好运吗？

标签： javascript reactjs react-native expo babel-loader

【解决方案1】：

文件类型应该是 .jsx 来处理 React 组件，而不是 .js。 <div> 也不是 React Native 组件，你应该使用 <Text>。如果您将文件名更改为 utils.jsx 并将您的代码替换为下面的代码，它应该可以工作。

import React from "react";
import { Text } from "react-native";

const PrintHello = () => {
  return <Text> Hello Im working </Text>;
};

【讨论】：