在位于外部文件的自定义组件中引用 Taro, 导致编译错误

[cheese-git]

问题描述

在 MyComponent.tsx 中自定义了一个组件，并且在这个组件文件中引入并使用了 Taro，导致编译失败。

复现步骤

// some-page.tsx

// ...

  render() {
    return (
      <Block>
        <MyComponent />
      </Block>
    )
  }

// MyComponent.tsx

import { Component } from "@tarojs/taro"
import { Button } from "@tarojs/components"

import Taro from "@tarojs/taro"
export class MyComponent extends Component {
  handleClick() {
    // 这条语句注释掉则不会报错
    Taro.showToast({ title: "success" })
  }

  render() {
    return <Button type="primary" onClick={this.handleClick} />
  }
}

报错信息

控制台报错：

错误  组件编译  组件src/utils/MyComponent.tsx编译失败！
{ TypeError: unknown: Duplicate declaration "internal_safe_get"
  1 | import { Component as __BaseComponent, internal_safe_get, internal_get_original, internal_inline_style } from "../npm/@tarojs/taro-weapp/index.js";
  2 |
> 3 | import Taro, { internal_safe_get, internal_get_original, internal_inline_style } from "../npm/@tarojs/taro-weapp/index.js";
    |                ^
  4 | export class MyComponent extends __BaseComponent {
  5 |   static properties = {};
  6 |   static $events = ["handleClick"];
    at File.buildCodeFrameError (D:\Users\cheese\Desktop\JLX\CBC-OfL\client-mp\node_modules\babel-core\lib\transformation\file\index.js:427:15)
    at Scope.checkBlockScopedCollisions (D:\Users\cheese\Desktop\JLX\CBC-OfL\client-mp\node_modules\babel-traverse\lib\scope\index.js:398:27)
    at Scope.registerBinding (D:\Users\cheese\Desktop\JLX\CBC-OfL\client-mp\node_modules\babel-traverse\lib\scope\index.js:592:16)
    at Scope.registerDeclaration (D:\Users\cheese\Desktop\JLX\CBC-OfL\client-mp\node_modules\babel-traverse\lib\scope\index.js:516:14)
    at Object.Declaration (D:\Users\cheese\Desktop\JLX\CBC-OfL\client-mp\node_modules\babel-traverse\lib\scope\index.js:176:36)
    at NodePath._call (D:\Users\cheese\Desktop\JLX\CBC-OfL\client-mp\node_modules\babel-traverse\lib\path\context.js:76:18)
    at NodePath.call (D:\Users\cheese\Desktop\JLX\CBC-OfL\client-mp\node_modules\babel-traverse\lib\path\context.js:48:17)
    at NodePath.visit (D:\Users\cheese\Desktop\JLX\CBC-OfL\client-mp\node_modules\babel-traverse\lib\path\context.js:105:12)
    at TraversalContext.visitQueue (D:\Users\cheese\Desktop\JLX\CBC-OfL\client-mp\node_modules\babel-traverse\lib\context.js:150:16)
    at TraversalContext.visitMultiple (D:\Users\cheese\Desktop\JLX\CBC-OfL\client-mp\node_modules\babel-traverse\lib\context.js:103:17)
  loc: Position { line: 3, column: 15 },
  _babel: true,
  codeFrame:
   '\u001b[0m \u001b[90m 1 | \u001b[39m\u001b[36mimport\u001b[39m { \u001b[33mComponent\u001b[39m as __BaseComponent\u001b[33m,\u001b[39m internal_safe_get\u001b[33m,\u001b[39m internal_get_original\u001b[33m,\u001b[39m internal_inline_style } from \u001b[32m"../npm/@tarojs/taro-weapp/index.js"\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m 2 | \u001b[39m\n\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 3 | \u001b[39m\u001b[36mimport\u001b[39m \u001b[33mTaro\u001b[39m\u001b[33m,\u001b[39m { internal_safe_get\u001b[33m,\u001b[39m internal_get_original\u001b[33m,\u001b[39m internal_inline_style }
from \u001b[32m"../npm/@tarojs/taro-weapp/index.js"\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m   | \u001b[39m               \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n \u001b[90m 4 | \u001b[39m\u001b[36mexport\u001b[39m \u001b[36mclass\u001b[39m \u001b[33mMyComponent\u001b[39m \u001b[36mextends\u001b[39m __BaseComponent {\n \u001b[90m 5 | \u001b[39m  static properties \u001b[33m=\u001b[39m {}\u001b[33m;\u001b[39m\n \u001b[90m 6 | \u001b[39m  static $$events \u001b[33m=\u001b[39m [\u001b[32m"handleClick"\u001b[39m]\u001b[33m;\u001b[39m\u001b[0m' }

系统信息

• 操作系统: win10
• Taro 版本 1.1.9
• Node.js 版本 10.13.0
• 报错平台 weapp

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[yuche]

import { Component } from "@tarojs/taro" // 删掉这个
import { Button } from "@tarojs/components"

import Taro from "@tarojs/taro"

你这个完全可以简化为 import Taro, { Component } from "@tarojs/taro"

[cheese-git]

额……解决了，谢谢
是我粗心了 😿