Change how projects field is dynamically imported

Should reduce the bundle size

app/assets/javascripts/access_tokens/index.js

 import Vue from 'vue';
+
 import ExpiresAtField from './components/expires_at_field.vue';
-import ProjectsField from './components/projects_field.vue';
 
 const getInputAttrs = (el) => {
   const input = el.querySelector('input');
@@ -42,14 +42,20 @@ export const initProjectsField = () => {
 
   const inputAttrs = getInputAttrs(el);
 
-  return new Vue({
-    el,
-    render(h) {
-      return h(ProjectsField, {
-        props: {
-          inputAttrs,
-        },
-      });
-    },
-  });
+  if (window.gon.features.personalAccessTokensScopedToProjects) {
+    const ProjectsField = () => import('./components/projects_field.vue');
+
+    return new Vue({
+      el,
+      render(h) {
+        return h(ProjectsField, {
+          props: {
+            inputAttrs,
+          },
+        });
+      },
+    });
+  }
+
+  return null;
 };

app/assets/javascripts/pages/profiles/personal_access_tokens/index.js

-import { initExpiresAtField } from '~/access_tokens';
-import createFlash from '~/flash';
-import { __ } from '~/locale';
+import { initExpiresAtField, initProjectsField } from '~/access_tokens';
 
 initExpiresAtField();
-
-if (window.gon.features.personalAccessTokensScopedToProjects) {
-  import('~/access_tokens')
-    .then(({ initProjectsField }) => {
-      initProjectsField();
-    })
-    .catch(() => {
-      createFlash(__('An error occurred while loading the access tokens form, please try again.'));
-    });
-}
+initProjectsField();

locale/gitlab.pot

@@ -3433,9 +3433,6 @@ msgstr ""
 msgid "An error occurred while loading project creation UI"
 msgstr ""
 
-msgid "An error occurred while loading the access tokens form, please try again."
-msgstr ""
-
 msgid "An error occurred while loading the data. Please try again."
 msgstr ""
 

spec/frontend/access_tokens/index_spec.js

 import { createWrapper } from '@vue/test-utils';
 
+import waitForPromises from 'helpers/wait_for_promises';
+
 import { initExpiresAtField, initProjectsField } from '~/access_tokens';
 import ExpiresAtField from '~/access_tokens/components/expires_at_field.vue';
 import ProjectsField from '~/access_tokens/components/projects_field.vue';
 
 describe('access tokens', () => {
+  beforeEach(() => {
+    window.gon = { features: { personalAccessTokensScopedToProjects: true } };
+  });
+
   afterEach(() => {
     document.body.innerHTML = '';
+    window.gon = {};
   });
 
   describe.each`
@@ -29,8 +36,12 @@ describe('access tokens', () => {
         document.body.appendChild(mountEl);
       });
 
-      it(`mounts component and sets \`inputAttrs\` prop`, () => {
+      it(`mounts component and sets \`inputAttrs\` prop`, async () => {
         const wrapper = createWrapper(initFunction());
+
+        // Wait for dynamic imports to resolve
+        await waitForPromises();
+
         const component = wrapper.findComponent(expectedComponent);
 
         expect(component.exists()).toBe(true);