Rive assets not render on web

[govind-maheshwari2]

Description

Rive asset some time not render on web. Give error in logs

Error: LateInitializationError: Field '_makeYogaStyle' has not been initialized.
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 297:3  throw_
packages/rive_common/src/layout_engine_wasm.dart 7:20                        get _makeYogaStyle
packages/rive_common/src/layout_engine_wasm.dart 521:36                      makeLayoutStyle
packages/rive_common/layout_engine.dart 129:12                               make
packages/rive/src/rive_core/layout_component.dart 28:48                      new
packages/rive/src/generated/artboard_base.dart 123:7                         new
packages/rive/src/rive_core/shapes/shape_paint_container.dart 77:1           new
packages/rive/src/rive_core/artboard.dart 692:17                             new
packages/rive/src/runtime_artboard.dart 33:21                                new
packages/rive/src/rive_file.dart 53:20                                       _readRuntimeObject
packages/rive/src/rive_file.dart 176:22                                      __
packages/rive/src/rive_file.dart 347:21                                      import
packages/rive/src/rive_file.dart 383:21                                      _initTextAndImport
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50           <fn>
dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
dart-sdk/lib/async/future_impl.dart 162:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 838:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 867:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 643:5                                    [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 713:7                                    callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>

Steps To Reproduce

Riv assets not render sometime on web and logs above error.
Code use

RiveAnimation.asset(widget.riv,
                  fit: BoxFit.fitHeight,
                  stateMachines: const ["animate"], onInit: (artboard) {
                stateMachineController =
                    StateMachineController.fromArtboard(artboard, "animate");
                if (stateMachineController != null) {
                  artboard.addController(stateMachineController!);
                  hoverInput = stateMachineController!.findInput("hovered");
                  hoverInput?.change(_hover);
                }
              })

File

MenuWin.riv.zip

Expected behavior

It should render riv asset always.

Device & Versions (please complete the following information)

• Device: Goolge chrome Web (114.0.5735.90)
• OS: Macbook pro
• Flutter Version:

Flutter 3.19.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision abb292a07e (9 weeks ago) • 2024-02-20 14:35:05 -0800
Engine • revision 04817c99c9
Tools • Dart 3.3.0 • DevTools 2.31.1

[d0bry]

The issue seems to have been introduced in runtime version 0.13.2 (reverted to 0.13.1 as a workaround).

[govind-maheshwari2]

In 0.13.1 version getting different error

Error: LateInitializationError: Field '_makeFont' has not been initialized.
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 297:3  throw_
packages/rive_common/src/rive_text_wasm.dart 15:20                           get _makeFont
packages/rive_common/src/rive_text_wasm.dart 647:23                          decodeFont
packages/rive_common/rive_text.dart 478:12                                   decode
packages/rive/src/rive_core/assets/font_asset.dart 63:17                     parseBytes
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54           runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5           _async
packages/rive/src/rive_core/assets/font_asset.dart 62:34                     parseBytes
packages/rive/src/rive_core/assets/font_asset.dart 59:18                     decode
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54           runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5           _async
packages/rive/src/rive_core/assets/font_asset.dart 58:22                     decode
packages/rive/src/core/importers/file_asset_importer.dart 32:9               <fn>
dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
dart-sdk/lib/async/future_impl.dart 162:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 838:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 867:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 643:5                                    [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 713:7                                    callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>

[ShelMax]

Have the same problem, fixed when rollback to the version 0.12.4

[nikkieke]

Had the same issue as well, problem fixed when I rolled back to this version.

Have the same problem, fixed when rollback to the version 0.12.4

[HayesGordon]

Hey all, thanks for reporting, this has been fixed since v0.13.3

The issue was a race condition where if multiple Rive files are displayed at the same time, some graphics might think the underlying engine has been initialized.

Closing this but please reopen if you encounter difficulties.