Import default in Vue component not definied in DevTools console

April 11, 2022

Simple data example, constants.js

export default {
  name: "John Smith",
  age: 10
};

Import it on the Vue component, which renders correctly. But if I use the DevTools and type c in the console… c is undefined.

import c from "../constants/constants.js";

export default {
  name: "HelloWorld",
  computed: {
    myName() {
      debugger;
      // In DevTools, console... c is undefined
      // even though this clearly works
      return c.name;
    },
  },
};

I don’t understand why?

Example: https://codesandbox.io/s/constantsimportreference-ud0d3e?file=/src/components/HelloWorld.vue:90-341

https://ud0d3e.csb.app/

>Solution :

Modules are not exposed to the global scope (window) when transpiled.

If you really want to expose c in DevTools you’d have to do window.c = c; Be careful when referencing window as this will break when rendering server side or prerendering as window does not exist.