1---
2stage: none
3group: unassigned
4info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#assignments
5---
6
7# Troubleshooting
8
9Running into a problem? Maybe this will help ¯\＿(ツ)＿/¯.
10
11## Troubleshooting issues
12
13### This guide doesn't contain the issue I ran into
14
15If you run into a Frontend development issue that is not in this guide, please consider updating this guide with your issue and possible remedies. This way future adventurers can face these dragons with more success, being armed with your experience and knowledge.
16
17## Testing issues
18
19### ``Property or method `nodeType` is not defined`` but I'm not using `nodeType` anywhere
20
21This issue can happen in Vue component tests, when an expectation fails, but there is an error thrown when
22Jest tries to pretty print the diff in the console. It's been noted that using `toEqual` with an array as a
23property might also be a contributing factor.
24
25See [this video](https://youtu.be/-BkEhghP-kM) for an in-depth overview and investigation.
26
27**Remedy - Try cloning the object that has Vue watchers**
28
29```patch
30- expect(wrapper.findComponent(ChildComponent).props()).toEqual(...);
31+ expect(cloneDeep(wrapper.findComponent(ChildComponent).props())).toEqual(...)
32```
33
34**Remedy - Try using `toMatchObject` instead of `toEqual`**
35
36```patch
37- expect(wrapper.findComponent(ChildComponent).props()).toEqual(...);
38+ expect(wrapper.findComponent(ChildComponent).props()).toMatchObject(...);
39```
40
41`toMatchObject` actually changes the nature of the assertion and won't fail if some items are **missing** from the expectation.
42
43### Script issues
44
45## `core-js` errors when running scripts within the GitLab repository
46
47The following command assumes you've set up the GitLab repository in the
48`~/workspace/gdk` directory. When running scripts within the GitLab repository,
49such as code transformations, you might run into issues with `core-js` like this:
50
51```shell
52~/workspace/gdk/gitlab/node_modules/core-js/modules/es.global-this.js:7
53$({
54^
55TypeError: $ is not a function
56    at Object.<anonymous> (~/workspace/gdk/gitlab/node_modules/core-js/modules/es.global-this.js:6:1)
57    at Module._compile (internal/modules/cjs/loader.js:1063:30)
58    at Module._compile (~/workspace/gdk/gitlab/node_modules/pirates/lib/index.js:99:24)
59    at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
60    at Object.newLoader [as .js] (~/workspace/gdk/gitlab/node_modules/pirates/lib/index.js:104:7)
61    at Module.load (internal/modules/cjs/loader.js:928:32)
62    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
63    at Module.require (internal/modules/cjs/loader.js:952:19)
64    at require (internal/modules/cjs/helpers.js:88:18)
65    at Object.<anonymous> (~/workspace/gdk/gitlab/node_modules/core-js/modules/esnext.global-this.js:2:1)
66```
67
68**Remedy - Try moving the script into a separate repository and point to it to files in the GitLab repository**
69
70## Using Vue component issues
71
72### When rendering a component that uses GlFilteredSearch and the component or its parent uses Vue Apollo
73
74When trying to render our component GlFilteredSearch, you might get an error in the component's `provide` function:
75
76`cannot read suggestionsListClass of undefined`
77
78Currently, `vue-apollo` tries to [manually call a component's `provide()` in the `beforeCreate` part](https://github.com/vuejs/vue-apollo/blob/35e27ec398d844869e1bbbde73c6068b8aabe78a/packages/vue-apollo/src/mixin.js#L149) of the component lifecycle. This means that when a `provide()` references props, which aren't actually setup until after `created`, it will blow up.
79
80See this [closed MR](https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2019#note_514671251) for more context.
81
82**Remedy - try providing `apolloProvider` to the top-level Vue instance options**
83
84VueApollo will skip manually running `provide()` if it sees that an `apolloProvider` is provided in the `$options`.
85
86```patch
87  new Vue(
88    el,
89+   apolloProvider: {},
90    render(h) {
91      return h(App);
92    },
93  );
94```
95