question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

BUG: Vue: add missing `.vue` extension to component imports

See original GitHub issue

Scope

  • This impacts ALL Mitosis outputs
  • This only impacts specific generators/outputs (please list them here): Vue

Describe the bug

When outputting 2 components to Vue, where one uses the other, the import is missing the .vue extension and does not work.

To Reproduce

Problem is visible in this example, on the selected file, on line 25.

https://stackblitz.com/edit/node-3nrn7m?file=output%2Fvue%2Fnuxt2%2Fsrc%2Fcomponents%2Fmy-component.vue

This is a StackBlitz, not a fiddle, because it needs 2 components to illustrate the problem.

The incorrect line of output is:

import ItemList from "./item-list";

Expected behavior

import ItemList from "./item-list.vue";

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
kylecordescommented, Jun 11, 2022

Great to see the doc improvement!

In terms of code gen, I think the “just works” path is to generate files that will work with whatever the most common downstream tools are. Not sure if I picked right, using Vite+Vue for the E2E; maybe that is pickier than Vue’s own CLI. Of course it would be best to work with both.

Ideally the result is a “pit of success” -> no matter what you throw at Mitosis, you get back either an explanatory error, or output which compiles and runs on all targets. Obviously a lot of work to get there!

0reactions
samijabercommented, Jun 13, 2022

Yeah 100%. Made the .vue extension always there now.

Read more comments on GitHub >

github_iconTop Results From Across the Web

I get following error when I import *.vue files without . ...
The problem is in your Webpack configuration. To make Webpack automatically resolve .vue extensions use the resolve.extensions option, ...
Read more >
vue import component: "Module is not installed"
I created a vue.js 2 project via vue-cli and created two simple components like this <template> <div class="jumbotron"> Dashboard
Read more >
Using Vue with TypeScript
Volar is the official VSCode extension that provides TypeScript support ... Vue Plugin is also needed to get type support for *.vue imports...
Read more >
Code Splitting in Vue.js
Vue Code Splitting Syntax ; const · () => ; component · () => ; import · './components/Article.vue' ; // A component to...
Read more >
Frequently asked questions
Vuetify is a Material Design component framework for Vue.js. ... it will often add automatic imports pointing to the vuetify/src directory ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found