Failed to execute 'appendChild' on 'Node': first arguments should be an Node type. #931

donfo · 2021-11-30T11:00:07Z

使用的 Kraken 版本｜ What version of kraken are you using

Version: v0.9

重现步骤｜ Steps To Reproduce

公司当前项目使用场景：
使用多个tab分别加载了多个Kraken页面，测试发现guide-styles.js里使用了图片导致下面的错误，如果去掉图片正常。如果不使用tab的形式，只独立加载guide-styles.js有图片也是正常的。

E/KRAKEN_NATIVE_LOG(31602): TypeError: Failed to execute 'appendChild' on 'Node': first arguments should be an Node type.
E/KRAKEN_NATIVE_LOG(31602):     at appendChild (native)
E/KRAKEN_NATIVE_LOG(31602):     at appendChild (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:413)
E/KRAKEN_NATIVE_LOG(31602):     at <anonymous> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:2821)
E/KRAKEN_NATIVE_LOG(31602):     at <anonymous> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:4213)
E/KRAKEN_NATIVE_LOG(31602):     at <anonymous> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:4252)
E/KRAKEN_NATIVE_LOG(31602):     at <anonymous> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:4238)
E/KRAKEN_NATIVE_LOG(31602):     at <anonymous> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:4211)
E/KRAKEN_NATIVE_LOG(31602):     at <anonymous> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:4252)
E/KRAKEN_NATIVE_LOG(31602):     at <anonymous> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:4238)
E/KRAKEN_NATIVE_LOG(31602):     at <anonymous> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:4211)
E/KRAKEN_NATIVE_LOG(31602):     at <anonymous> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:3091)
E/KRAKEN_NATIVE_LOG(31602):     at <anonymous> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:3398)
E/KRAKEN_NATIVE_LOG(31602):     at <anonymous> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:3289)
E/KRAKEN_NATIVE_LOG(31602):     at performInSandbox (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:4630)
E/KRAKEN_NATIVE_LOG(31602):     at <anonymous> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:3320)
E/KRAKEN_NATIVE_LOG(31602):     at runUpdate (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:5362)
E/KRAKEN_NATIVE_LOG(31602):     at performUpdate (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:5396)
E/KRAKEN_NATIVE_LOG(31602):     at scheduleUpdate (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:5414)
E/KRAKEN_NATIVE_LOG(31602):     at requestUpdate (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:5444)
E/KRAKEN_NATIVE_LOG(31602):     at forceUpdate (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:5459)
E/KRAKEN_NATIVE_LOG(31602):     at <anonymous> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:2878)
E/KRAKEN_NATIVE_LOG(31602):     at <anonymous> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:5019)
E/KRAKEN_NATIVE_LOG(31602):     at mount (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:4052)
E/KRAKEN_NATIVE_LOG(31602):     at render (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:2529)
E/KRAKEN_NATIVE_LOG(31602):     at ./.rax/mpaEntry/home.tsx (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:117)
E/KRAKEN_NATIVE_LOG(31602):     at call (native)
E/KRAKEN_NATIVE_LOG(31602):     at __webpack_require__ (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:20)
E/KRAKEN_NATIVE_LOG(31602):     at 0 (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:6941)
E/KRAKEN_NATIVE_LOG(31602):     at call (native)
E/KRAKEN_NATIVE_LOG(31602):     at __webpack_require__ (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:20)
E/KRAKEN_NATIVE_LOG(31602):     at <anonymous> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:84)
E/KRAKEN_NATIVE_LOG(31602):     at <eval> (https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js:6946)
E/KRAKEN_NATIVE_LOG(31602):
I/AwareBitmapCacher(31602): init lrucache size: 2097152 pid=31602

重现代码 | Code example:

import 'package:flutter/material.dart';
import 'package:kraken/kraken.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage();
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int index = 0;
  List<Map<String, dynamic>> tabs = [
    {"name": "tab1", "url": "https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-color.js"},
    {"name": "tab2", "url": "https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js"},
    {"name": "tab3", "url": "https://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-flow-layout.js"},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: index,
        children: tabs.map((item) {
          return KrakenPage(item["url"]);
        }).toList(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: index,
        elevation: 0,
        items: tabs.map((item) {
          return BottomNavigationBarItem(
            label: item['name'],
            icon: Icon(Icons.home),
          );
        }).toList(),
        onTap: (int i) {
          index = i;
          setState(() {});
        },
      ),
    );
  }
}

class KrakenPage extends StatefulWidget {
  const KrakenPage(this.url);
  final String url;
  @override
  _KrakenPage createState() => _KrakenPage();
}

class _KrakenPage extends State<KrakenPage> with AutomaticKeepAliveClientMixin {
  double width;
  double height;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Kraken(
      viewportWidth: width,
      viewportHeight: height,
      bundleURL: widget.url,
    );
  }

  @override
  bool get wantKeepAlive => true;
}

预期结果｜ Expected results:

实际结果｜ Actual results:

andycall · 2021-11-30T18:15:54Z

看上去和这个有关，#935

可以再验证一下

donfo · 2021-12-01T04:40:09Z

@andycall 使用报了另外的错。
引入的fix/create_element_multiple_context

kraken:
  git:
    url: https://github.com/openkraken/kraken.git
    ref: fix/create_element_multiple_context
    path: kraken

报如下错：

E/flutter (32725): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: Invalid argument(s): Failed to load dynamic library 'libkraken.so': dlopen failed: library "libkraken.so" not found
E/flutter (32725): #0      _open (dart:ffi-patch/ffi_dynamic_library_patch.dart:11:55)
E/flutter (32725): #1      new DynamicLibrary.open (dart:ffi-patch/ffi_dynamic_library_patch.dart:20:12)
E/flutter (32725): #2      nativeDynamicLibrary
package:kraken/…/bridge/platform.dart:24
E/flutter (32725): #3      nativeDynamicLibrary (package:kraken/src/bridge/platform.dart)
package:kraken/…/bridge/platform.dart:1
E/flutter (32725): #4      _registerDartMethods
package:kraken/…/bridge/from_native.dart:405
E/flutter (32725): #5      _registerDartMethods (package:kraken/src/bridge/from_native.dart)
package:kraken/…/bridge/from_native.dart:1
E/flutter (32725): #6      registerDartMethodsToCpp
package:kraken/…/bridge/from_native.dart:411
E/flutter (32725): #7      initBridge
package:kraken/…/bridge/bridge.dart:27
E/flutter (32725): #8      new KrakenViewController
package:kraken/…/launcher/controller.dart:114
E/flutter (32725): #9      new KrakenController
package:kraken/…/launcher/controller.dart:501
E/flutter (32725): #10     _KrakenRenderObjectWidget.createRenderObject
package:kraken/widget.dart:888
E/flutter (32725): #11     RenderObjectElement.mount
package:flutter/…/widgets/framework.dart:5430
E/flutter (32725): #12     SingleChildRenderObjectElement.mount
package:flutter/…/widgets/framework.dart:6082
E/flutter (32725): #13     _KrakenRenderObjectElement.mount
package:kraken/widget.dart:968
E/flutter (32725): #14     Element.inflateWidget
package:flutter/…/widgets/framework.dart:3611
E/flutter (32725): #15     Element.updateChild
package:flutter/…/widgets/framework.dart:3363
E/flutter (32725): #16     SingleChildRenderObjectElement.mount
package:flutter/…/widgets/framework.dart:6083
E/flutter (32725): #17     Element.inflateWidget
package:flutter/…/widgets/framework.dart:3611
E/flutter (32725): #18     Element.updateChild
package:flutter/…/widgets/framework.dart:3363
E/flutter (32725): #19     ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4599
E/flutter (32725): #20     Element.rebuild
package:flutter/…/widgets/framework.dart:4267
E/flutter (32725): #21     ComponentElement._firstBuild
package:flutter/…/widgets/framework.dart:4553
E/flutter (32725): #22     ComponentElement.mount
package:flutter/…/widgets/framework.dart:4548
E/flutter (32725): #23     Element.inflateWidget
package:flutter/…/widgets/framework.dart:3611
E/flutter (32725): #24     Element.updateChild
package:flutter/…/widgets/framework.dart:3363
E/flutter (32725): #25     ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4599
E/flutter (32725): #26     StatefulElement.performRebuild
package:flutter/…/widgets/framework.dart:4746
E/flutter (32725): #27     Element.rebuild
package:flutter/…/widgets/framework.dart:4267
E/flutter (32725): #28     ComponentElement._firstBuild
package:flutter/…/widgets/framework.dart:4553
E/flutter (32725): #29     StatefulElement._firstBuild
package:flutter/…/widgets/framework.dart:4737
E/flutter (32725): #30     ComponentElement.mount
package:flutter/…/widgets/framework.dart:4548
E/flutter (32725): #31     Element.inflateWidget
package:flutter/…/widgets/framework.dart:3611
E/flutter (32725): #32     Element.updateChild
package:flutter/…/widgets/framework.dart:3363
E/flutter (32725): #33     SingleChildRenderObjectElement.mount
package:flutter/…/widgets/framework.dart:6083
E/flutter (32725): #34     Element.inflateWidget
package:flutter/…/widgets/framework.dart:3611
E/flutter (32725): #35     Element.updateChild
package:flutter/…/widgets/framework.dart:3363
E/flutter (32725): #36     ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4599
E/flutter (32725): #37     StatefulElement.performRebuild
package:flutter/…/widgets/framework.dart:4746
E/flutter (32725): #38     Element.rebuild
package:flutter/…/widgets/framework.dart:4267
E/flutter (32725): #39     ComponentElement._firstBuild
package:flutter/…/widgets/framework.dart:4553
E/flutter (32725): #40     StatefulElement._firstBuild
package:flutter/…/widgets/framework.dart:4737
E/flutter (32725): #41     ComponentElement.mount
package:flutter/…/widgets/framework.dart:4548
E/flutter (32725): #42     Element.inflateWidget
package:flutter/…/widgets/framework.dart:3611
E/flutter (32725): #43     Element.updateChild
package:flutter/…/widgets/framework.dart:3363
E/flutter (32725): #44     ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4599
E/flutter (32725): #45     Element.rebuild
package:flutter/…/widgets/framework.dart:4267
E/flutter (32725): #46     ComponentEl

andycall · 2021-12-01T07:14:47Z

bridge 没有构建。

donfo · 2021-12-01T09:48:58Z

@andycall 大佬，请问我现在需要怎样才能正常使用这个修复好的版本，
我把kraken的fix/create_element_multiple_context分支clone下来使用build:bridge:all:release构建成功后，以依赖本地包

kraken:
  path: ../kraken/kraken

报错：

════════ Exception caught by scheduler library ═════════════════════════════════
The following assertion was thrown during a scheduler callback:
'package:kraken/src/css/margin.dart': Failed assertion: line 25 pos 12: 'insets.isNonNegative': is not true.
package:kraken/…/css/margin.dart:1

When the exception was thrown, this was the stack
#2      CSSMarginMixin.margin
package:kraken/…/css/margin.dart:25
#3      RenderStyle.getLogicalContentWidth
package:kraken/…/css/render_style.dart:269
#4      RenderStyle.contentBoxLogicalWidth
package:kraken/…/css/render_style.dart:499
#5      CSSLengthValue.computedValue
package:kraken/…/values/length.dart:129
#6      CSSLengthValue.isAuto
package:kraken/…/values/length.dart:329
...
════════════════════════════════════════════════════════════════════════════════

andycall · 2021-12-01T16:12:07Z

margin 里面存在负值，可能需要这个 #938 来修复一下

andycall · 2021-12-01T16:33:13Z

转移到 #936

donfo added the bug Something isn't working label Nov 30, 2021

andycall mentioned this issue Dec 1, 2021

fix: fix document.createElement in multiple context #935

Merged

answershuto closed this as completed in #935 Dec 1, 2021

andycall reopened this Dec 1, 2021

andycall mentioned this issue Dec 1, 2021

fix: add negative length validation for non negative css value #938

Merged

andycall closed this as completed Dec 1, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Failed to execute 'appendChild' on 'Node': first arguments should be an Node type. #931

Failed to execute 'appendChild' on 'Node': first arguments should be an Node type. #931

donfo commented Nov 30, 2021

andycall commented Nov 30, 2021 •

edited

Loading

donfo commented Dec 1, 2021

andycall commented Dec 1, 2021

donfo commented Dec 1, 2021

andycall commented Dec 1, 2021

andycall commented Dec 1, 2021

Failed to execute 'appendChild' on 'Node': first arguments should be an Node type. #931

Failed to execute 'appendChild' on 'Node': first arguments should be an Node type. #931

Comments

donfo commented Nov 30, 2021

使用的 Kraken 版本 ｜ What version of kraken are you using

重现步骤 ｜ Steps To Reproduce

andycall commented Nov 30, 2021 • edited Loading

donfo commented Dec 1, 2021

andycall commented Dec 1, 2021

donfo commented Dec 1, 2021

andycall commented Dec 1, 2021

andycall commented Dec 1, 2021

使用的 Kraken 版本｜ What version of kraken are you using

重现步骤｜ Steps To Reproduce

andycall commented Nov 30, 2021 •

edited

Loading