Unable to import API module in nested component

I’ve been struggling with a very odd bug(?) with regards to importing an API module into a nested component in a Vue app.

This is the simplest I could reduce the issue down to.

Essentially, the DogsCreate component renders the CreateDogsModal, which is importing the dogs module from the API directory.

As you can see, the codesandbox errors out even on the base URL with the error Cannot read property 'default' of undefined. If running this code locally not on codesandbox, the base URL renders ok, but if you go to /dogs/create, the error then becomes Failed to resolve component: CreateDogsModal.

The things I’ve found that fix this are:

  • Commenting out the API import statement in CreateDogsModal (not an option for us, we need to be able to create and import API modules)
  • Commenting out the TopNav component in main.js (…also not an option for us)
  • Importing the TopNav component in App.vue with a relative import or @/components/TopNav.vue works fine, but strangely importing CreateDogsModal and CreateTemplate in DogsCreate.vue with a relative import or @/components/[component-name].vue does not. Also, the latter would be somewhat acceptable as a long-term solution, but I’d prefer the @/components shorthand and that still leaves the root cause undetermined.

I’m using the default vue-cli webpack configuration and have checked via vue inspect that the alias seems to be set properly.

I’ve been spinning my wheels for a week trying to figure this out and just…cannot. Does anyone have any ideas for what may be happening?