I know that there are a lot of similar issues, but most of them are quite outdated. I recently got the common TypeError: Cannot read properties of undefined (reading ... in my web project when running on Chrome.
The error just appears after launching the first time. When I refresh the page in Chrome, it disappears. The part after “reading” is also different every time I launch the app, for now it’s ...undefined (reading 'MaterialApp').
The full error:
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following JSNoSuchMethodError was thrown building LayoutBuilder:
TypeError: Cannot read properties of undefined (reading 'MaterialApp')
The relevant error-causing widget was:
LayoutBuilder
LayoutBuilder:file:///Users/janhecker/Development/vamos_events_dashboard/lib/vamos_events_dashboard.dart:142:16
vamos_events_dashboard.dart:142
When the exception was thrown, this was the stack:
packages/vamos_events_dashboard/vamos_events_dashboard.dart 146:34 <fn>
packages/flutter/src/widgets/layout_builder.dart 119:70 layoutCallback
packages/flutter/src/widgets/framework.dart 2682:19 buildScope
packages/flutter/src/widgets/layout_builder.dart 153:5 [_layout]
packages/flutter/src/rendering/object.dart 2300:59 <fn>
packages/flutter/src/rendering/object.dart 1056:15 [_enableMutationsToDirtySubtrees]
packages/flutter/src/rendering/object.dart 2300:7 invokeLayoutCallback
packages/flutter/src/widgets/layout_builder.dart 228:7 rebuildIfNecessary
packages/flutter/src/widgets/layout_builder.dart 313:5 performLayout
packages/flutter/src/rendering/object.dart 2189:7 layout
packages/flutter/src/rendering/box.dart 2430:11 layout
packages/flutter/src/rendering/view.dart 175:7 performLayout
packages/flutter/src/rendering/object.dart 2027:7 [_layoutWithoutResize]
packages/flutter/src/rendering/object.dart 1020:17 flushLayout
packages/flutter/src/rendering/binding.dart 516:19 drawFrame
packages/flutter/src/widgets/binding.dart 865:13 drawFrame
packages/flutter/src/rendering/binding.dart 381:5 [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1289:15 [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1218:9 handleDrawFrame
packages/flutter/src/scheduler/binding.dart 942:7 <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19 internalCallback
════════════════════════════════════════════════════════════════════════════════════════════════════
My pubspec.yaml file:
name: vamos_events_dashboard
description: Create, manage, publish and share your events in the vamos! Events Dashboard.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: '>=2.18.6 <3.0.0'
dependencies:
cloud_firestore: ^4.3.1
collection: ^1.17.0
deep_pick: ^0.10.0
file_picker: ^5.2.5
firebase_auth: ^4.2.5
firebase_core: ^2.4.1
firebase_storage: ^11.0.10
flutter:
sdk: flutter
flutter_gen: ^5.2.0
flutter_svg: ^2.0.0+1
freezed_annotation: ^2.2.0
geoflutterfire2: ^2.3.14
gleap_sdk: ^9.0.1
go_router: ^6.0.1
json_annotation: ^4.8.0
provider: ^6.0.5
shared_preferences: ^2.0.17
universal_html: ^2.0.0
url_strategy: ^0.2.0
dev_dependencies:
build_runner: ^2.3.3
flutter_gen_runner: ^5.2.0
flutter_test:
sdk: flutter
freezed: ^2.3.2
json_serializable: ^6.6.1
lint: ^2.0.0
flutter:
uses-material-design: true
assets:
- assets/images/
- assets/icons/
fonts:
- family: Agrandir
fonts:
- asset: assets/fonts/Agrandir-GrandHeavy.ttf
- family: DMSans
fonts:
- asset: assets/fonts/DMSans-Regular.ttf
flutter_gen:
output: lib/theme/gen/
line_length: 120
integrations:
flutter_svg: true
universal_html: true
My index.html file:
<!DOCTYPE html>
<html>
<head>
<!-- Loading animation -->
<style>
body {
background-color: #F1F1F1;
}
.loading {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loader {
border: 6px solid #F1F1F1;
border-radius: 50%;
border: 5px solid;
border-top: 6px solid #916EFF;
border-right: 6px solid #F1F1F1;
border-bottom: 6px solid #916EFF;
border-left: 6px solid #F1F1F1;
width: 42px;
height: 42px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<!-- Gleap -->
<script>
!function (Gleap, t, i) { if (!(Gleap = window.Gleap = window.Gleap || []).invoked) { for (window.GleapActions = [], Gleap.invoked = !0, Gleap.methods = ["identify", "setEnvironment", "clearIdentity", "attachCustomData", "setCustomData", "removeCustomData", "clearCustomData", "registerCustomAction", "trackEvent", "log", "preFillForm", "showSurvey", "sendSilentCrashReport", "startFeedbackFlow", "setAppBuildNumber", "setAppVersionCode", "setApiUrl", "setFrameUrl", "isOpened", "open", "close", "on", "setLanguage", "setOfflineMode", "initialize"], Gleap.f = function (e) { return function () { var t = Array.prototype.slice.call(arguments); window.GleapActions.push({ e: e, a: t }) } }, t = 0; t < Gleap.methods.length; t++)Gleap[i = Gleap.methods[t]] = Gleap.f(i); Gleap.load = function () { var t = document.getElementsByTagName("head")[0], i = document.createElement("script"); i.type = "text/javascript", i.async = !0, i.src = "https://sdk.gleap.io/latest/index.js", t.appendChild(i) }, Gleap.load() } }();
</script>
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="vamos_events_dashboard">
<!-- <link rel="apple-touch-icon" href="icons/Icon-192.png"> -->
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon-64.png" />
<title>vamos! Events Dashboard</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<!-- Loading animation -->
<div class="loading">
<div class="loader"></div>
</div>
<script src="main.dart.js" type="application/javascript"></script>
<!-- Flutter -->
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
5
For VS Code edit (launch.json):
{
"version": "0.2.0",
"configurations": [
{
"args": [
"--web-renderer",
"auto"
]
}
]
}
For Android Studio:
- Open Run > Edit Configurations
- Select your Flutter configuration and add additional args:
--web-renderer auto
New contributor
Azat Dream is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2
This seems to be a bug with the Flutter version 3.24.0, you can find the issue here and here.
It seems like they should have it fixed in the next release, as mentioned here.
So, the version 3.24.1 (or later) might have it solved. But, if you need a stable dev environment, I suggest you downgrade to the previous flutter stable release.
Otherwise, you can switch the renderer to HTML (or AUTO on desktop) or keep refreshing the website/app after the first launch to make the error temporally disappear…