diff --git a/files/en-us/web/javascript/reference/errors/unexpected_token/index.md b/files/en-us/web/javascript/reference/errors/unexpected_token/index.md
index cb92b93904ef4d5..a8fde06b13c505c 100644
--- a/files/en-us/web/javascript/reference/errors/unexpected_token/index.md
+++ b/files/en-us/web/javascript/reference/errors/unexpected_token/index.md
@@ -90,6 +90,28 @@ function round(n, upperBound, lowerBound) {
 }
 ```
 
+### A structure error further up confused the meaning
+
+Sometimes, the error is caused by some structure issues not directly next to the error location, so you need to look around for potential errors. For example, you intended to declare a method of an object, but you declared it as a propety instead:
+
+```js-nolint example-bad
+const MyComponent = {
+  mounted: {
+    document.getElementById("app").classList.add("loaded");
+  }
+}
+```
+
+The `.` after `document` is unexpected, because JavaScript is parsing the `{}` as an object literal instead of a function body, so it expects a `:`. The problem is solved by declaring `mounted` as function.
+
+```js-nolint example-good
+const MyComponent = {
+  mounted() {
+    document.getElementById("app").classList.add("loaded");
+  }
+}
+```
+
 ## See also
 
 - {{jsxref("SyntaxError")}}