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.

Route '/app' returns source code instead of rendered page in development

See original GitHub issue

Environment

Operating System: Linux
Node Version: v17.6.0
Nuxt Version: 3.0.0-rc.1
Package Manager: pnpm@6.32.8
Builder: vite
User Config: app, buildModules, css, experimental, postcss, runtimeConfig, ssr, target, typescript
Runtime Modules: -
Build Modules: @pinia/nuxt@0.1.8, @vueuse/nuxt@8.3.1

Reproduction

https://stackblitz.com/edit/github-qyn5ga-lhthhn

Describe the bug

While running in development mode, the route ‘/app’ returns the source code instead of the rendered page. It works fine after build, and also if you navigate to the route via <NuxtLink> component but on reload or visiting the route, via entering the url it shows the code.

Visit reproduction link and add ‘/app’ to the url and it returns

import { createHotContext as __vite__createHotContext } from "/_nuxt/@vite/client";import.meta.hot = __vite__createHotContext("/app.vue");import { default as __nuxt_component_0 } from "/_nuxt/node_modules/nuxt/dist/app/components/nuxt-link.mjs";
const _sfc_main = {}
import { resolveComponent as _resolveComponent, createVNode as _createVNode, createTextVNode as _createTextVNode, withCtx as _withCtx, openBlock as _openBlock, createElementBlock as _createElementBlock } from "/_nuxt/node_modules/.vite/deps/vue.js?v=eac54970"

const _hoisted_1 = /*#__PURE__*/_createTextVNode("Home")
const _hoisted_2 = /*#__PURE__*/_createTextVNode("App")
const _hoisted_3 = /*#__PURE__*/_createTextVNode("About")

function _sfc_render(_ctx, _cache) {
  const _component_NuxtPage = _resolveComponent("NuxtPage")
  const _component_NuxtLink = __nuxt_component_0

  return (_openBlock(), _createElementBlock("div", null, [
    _createVNode(_component_NuxtPage),
    _createVNode(_component_NuxtLink, { to: "/" }, {
      default: _withCtx(() => [
        _hoisted_1
      ]),
      _: 1 /* STABLE */
    }),
    _createVNode(_component_NuxtLink, { to: "/app" }, {
      default: _withCtx(() => [
        _hoisted_2
      ]),
      _: 1 /* STABLE */
    }),
    _createVNode(_component_NuxtLink, { to: "/about" }, {
      default: _withCtx(() => [
        _hoisted_3
      ]),
      _: 1 /* STABLE */
    })
  ]))
}


_sfc_main.__hmrId = "381730fa"
typeof __VUE_HMR_RUNTIME__ !== 'undefined' && __VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main)
export const _rerender_only = true
import.meta.hot.accept(({ default: updated, _rerender_only }) => {
  if (_rerender_only) {
    __VUE_HMR_RUNTIME__.rerender(updated.__hmrId, updated.render)
  } else {
    __VUE_HMR_RUNTIME__.reload(updated.__hmrId, updated)
  }
})
import _export_sfc from '/_nuxt/@id/plugin-vue:export-helper'
export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"/home/projects/github-qyn5ga-lhthhn/app.vue"]])

Additional context

No response

Logs

No response

Issue Analytics

State:
Created a year ago
Comments:9 (8 by maintainers)

Top GitHub Comments

1reaction

antfucommented, Apr 25, 2022

Found, we added .vue here so Vite resolves to it

https://github.com/nuxt/framework/blob/73ba30fb69b91a25ee595daa447f3d6988b4dc8c/packages/schema/src/config/vite.ts#L28-L30

I am not sure what’s the consequence of changing this so I will leave it to you to PR 😃 (or let me know if there is any thing more I can help

1reaction

antfucommented, Apr 25, 2022

Interestingly I can’t reproduce this behaviour on plain Vite. Still investigating

Top Results From Across the Web

How To Handle Routing in React Apps with React Router

In the next step, you'll start connecting routes; for now, render the basic component in your application. Open App.js : nano src/components/App ......

Rendering HTML Pages as an HTTP Server Response Using ...

We can use the same server to render HTML elements as the server response instead of sending plain text. Here is a list...

React-router URLs don't work when refreshing or writing ...

Now, we have all our routes defined in a single react-router configuration and we don't need to duplicate our rendering code. This is...

Developing Python Web Applications with Flask

Run the Webapp It routes the URL '/' request to main() which returns the hello-world message. From a web browser, issue URL http://127.0.0.1:5000/...

Why Does This Website Show No Source Code? - Medium

You are a great web developer. You created one of the best-looking websites with all the latest integrations. You published the website for...