taro 自定义组件在 Build 时提示：Field 'browser' doesn't contain a valid alias configuration

egmofgnx 于 4个月前发布在其他

关注(0)|答案(4)|浏览(98)

复现步骤

在 src/components 下面创建 NavBar.tsx 组件，代码如下：

import Taro from "@tarojs/taro";
import { useState, useEffect } from "react";
import { View, Text } from "@tarojs/components";

export default function NavBar({ title }: { title: string }) {
  const [info, setInfo] = useState<any>(null);
  useEffect(() => {
    setInfo(Taro.getWindowInfo());
  }, []);
  if (info === null) return null;
  return (
    <View className={`text-center h-[${info.statusBarHeight}px]`}>
      <Text className="text-xl font-bold">{title}</Text>
    </View>
  );
}

在 src/pages/index/index.tsx 中 import 该组件并使用。

执行 build 时提示：

✖ Errors:

resolve 'src/components/NavBar.tsx' in '/home/lkl/codes/taroApp/src/pages/index'
Parsed request is a module
using description file: /home/lkl/codes/taroApp/package.json (relative path: ./src/pages/index)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/home/lkl/codes/taroApp/src/pages/index/node_modules doesn't exist or is not a directory
/home/lkl/codes/taroApp/src/pages/node_modules doesn't exist or is not a directory
/home/lkl/codes/taroApp/src/node_modules doesn't exist or is not a directory
looking for modules in /home/lkl/codes/taroApp/node_modules
/home/lkl/codes/taroApp/node_modules/src doesn't exist
/home/lkl/codes/node_modules doesn't exist or is not a directory
/home/lkl/node_modules doesn't exist or is not a directory
/home/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory

期望结果

正确编译

实际结果

错误提示

环境信息

👽 Taro v3.6.17

  Taro CLI 3.6.17 environment info:
    System:
      OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
      Shell: 5.1.16 - /bin/bash
    Binaries:
      Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.2/bin/yarn
      npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.17 => 3.6.17 
      @tarojs/components: 3.6.17 => 3.6.17 
      @tarojs/helper: 3.6.17 => 3.6.17 
      @tarojs/plugin-framework-react: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-alipay: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-h5: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-jd: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-qq: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-swan: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-tt: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-weapp: 3.6.17 => 3.6.17 
      @tarojs/react: 3.6.17 => 3.6.17 
      @tarojs/runtime: 3.6.17 => 3.6.17 
      @tarojs/shared: 3.6.17 => 3.6.17 
      @tarojs/taro: 3.6.17 => 3.6.17 
      @tarojs/taro-loader: 3.6.17 => 3.6.17 
      @tarojs/webpack5-runner: 3.6.17 => 3.6.17 
      babel-preset-taro: 3.6.17 => 3.6.17 
      eslint-config-taro: 3.6.17 => 3.6.17 
      react: ^18.0.0 => 18.2.0

taro

来源：https://github.com/NervJS/taro/issues/14643

4条答案

按热度按时间

q0qdq0h21#

补充：

// src/pages/index/index.tsx
import { View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useState, useEffect } from "react";
import NavBar from "src/components/NavBar";

export default function Index() {
  const [info, setInfo] = useState<any>(null);
  const [capsuleInfo, setCapsuleInfo] = useState<any>(null);

  useEffect(() => {
    Taro.getSystemInfo().then((res) => {
      console.log(res);
      setInfo(res);
    });

    const capsuleInfo = Taro.getMenuButtonBoundingClientRect();
    console.log(capsuleInfo);
    setCapsuleInfo(capsuleInfo);
  }, []);

  return (
    <View className="flex flex-col p-4">
      <NavBar title="我的首页" />
      {info !== null &&
        Object.keys(info).map((key) => (
          <Text key={key}>
            {key}：
            {typeof info[key] === "string"
              ? info[key]
              : JSON.stringify(info[key])}
          </Text>
        ))}
      <Text>capsuleInfo</Text>
      {capsuleInfo !== null &&
        Object.keys(capsuleInfo).map((key) => (
          <Text key={key}>
            {key}：
            {typeof capsuleInfo[key] === "string"
              ? capsuleInfo[key]
              : JSON.stringify(capsuleInfo[key])}
          </Text>
        ))}
    </View>
  );
}

赞(0）回复(0）举报 4个月前

pdsfdshx2#

import NavBar from "src/components/NavBar";

这个引入没有加alias

赞(0）回复(0）举报 4个月前

xmakbtuz3#

import NavBar from "src/components/NavBar";

这个引入没有加alias

谢谢回复。

没有定义 alias，这么引用不对吗。

赞(0）回复(0）举报 4个月前

64jmpszr4#