Import default in Vue component not definied in DevTools console

Question

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/

Daniel Storey · Accepted Answer · 2022-04-11 19:34:32Z

1

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.

answered Apr 11, 2022 at 19:34

Daniel Storey

9716 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MisterIsaak Over a year ago

Okay, that helped me find the right words to google. I see webpack can be configured to expose a library on the global object. Still wish it was a simple as I was expecting, but it makes more sense now. Thanks.

Collectives™ on Stack Overflow

Import default in Vue component not definied in DevTools console

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related