apostrophecms / apostrophecms/apostrophe

3.4: In-Context editing throws a VueJS error on widgets from Global

Open
#3,424 1 comment 0 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
4.6k
Forks
650
Avg merge
19h 21m
Merged PRs (30d)
23

Description

## To Reproduce

Step by step instructions to reproduce the behavior:

> 1. Create a widget area in `@apostrophe/global` (ie, a `footerText` field that you can add Rich Text to)
> 2. Add it to the template via `{% area data.global, 'footerText' %}`
> 3. Add a Rich Text widget with some content to our global area and save
> 4. In-context on the page, click Edit Rich Text
> 5. See error
![Screen Shot 2021-09-16 at 8 29 57 PM](https://user-images.githubusercontent.com/1395508/133705984-eee93b9a-6a7e-4351-992f-d79798f62b39.png)

## Expected behavior
> I expected to be able to edit the field in-context

## Describe the bug
> A VueJS error is thrown:

> [Vue warn]: Error in v-on handler (Promise/async): "TypeError: Cannot read properties of null (reading '_url')"
found in
---> at node_modules/apostrophe/modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue
at node_modules/apostrophe/modules/@apostrophecms/area/ui/apos/components/AposAreaEditor.vue


> TypeError: Cannot read properties of null (reading '_url')
at VueComponent.edit

## Details

**Version of Node.js:**
> Node v14.7.5

**Server Operating System:**
> MacOS with my MongoDB instance running in Docker

**Additional context:**
> I've attached the boilerplate clone I modified to recreate the problem, as well as a DB backup with some test data, as described above and show in the screenshot above.

> The DB can be restored by extracting the zip file and running
`mongorestore --gzip --archive=a3-boilerplate_2021-09-16_20-46-42.archive`

> The login is
**User:** test
**Pass:** test

[a3-boilerplate.zip](https://github.com/apostrophecms/apostrophe/files/7181768/a3-boilerplate.zip)
[a3-boilerplate_2021-09-16_20-46-42.archive.zip](https://github.com/apostrophecms/apostrophe/files/7181773/a3-boilerplate_2021-09-16_20-46-42.archive.zip)

Contributor guide

Open the contributing guide

Research direction

Start with node_modules/apostrophe/modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue, especially the edit handler named in the error, then trace how widgets from @apostrophe/global reach AposAreaEditor. Reproduce using the listed global area and Rich Text steps, with the supplied boilerplate and database archive if needed. Done means Edit Rich Text works in-context without the Vue TypeError.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.