Repository nuxt.js

Can't import Nuxt Link in SSR mode

dorianamouroux
0
dorianamouroux
commented 8 months ago

I need to import NuxtLink in my project; but it doesn't work in Nuxt when it's rendered on the server.

My page is

<template>
  <h1>Hello world!</h1>
</template>
<script>
import NuxtLink from 'nuxt/lib/app/components/nuxt-link'

console.log(NuxtLink)
</script>

It works in SPA mode; but I get the following warning:

17:2-16 "export 'default' (imported as '__vue_script__') was not found in '!!babel-loader?{"babelrc":false,"cacheDirectory":true,"presets":[["/app/node_modules/babel-preset-vue-app/dist/index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!../node_modules/vue-loader/lib/selector?type=script&index=0!./index.vue'

However; in SSR mode I get the following error:

screenshot 2018-03-05 10 36 25

0
dorianamouroux
0
dorianamouroux
commented 8 months ago

My work around is to access it via Vue.options.components['nuxt-link']

0
Zip753
76
Zip753
commented 8 months ago

Why would you need to import NuxtLink by hand in the first place? It's globally available in Nuxt.js apps and you can use it right away in your templates. If you really need to access the component itself, then I guess your workaround is the way to go 🤷‍♂️

0
dorianamouroux
0
dorianamouroux
commented 8 months ago

I'm making a reusable Navbar component that can be used in different projects; all sharing the same navbar. Some of them aren't a Single Page Application using Nuxt.

So the idea is to create the Navbar in Vue.JS and taking as a props the component that will be used for the link. In my Nuxt App, I send the Nuxt-Link; in other application, I import the navbar component from the CDN and I don't inject any link component, it will fall back to a simple <a href=""></a>; In my Navbar I can do <component :is="link" to="/whatev"></component>.

That's why I need to import NuxtLink

0
dorianamouroux
0
dorianamouroux
commented 8 months ago

From my understanding; Webpack only takes compiled JS that are in node_modules; so I cannot import specific part of the project as Webpack configuration of Nuxt will not transpile and compile it.

Maybe the best would be to overwrite this configuration; but I think this should be an option of nuxt.config.js to allow webpack to build what's in node_modules

0
Zip753
76
Zip753
commented 8 months ago

@dorianamouroux I wouldn't bother and use router-link right away since nuxt-link is simply a wrapper for the former: https://github.com/nuxt/nuxt.js/blob/ffe1b6d8dc092f22b45b765f296b0700fd05eae9/lib/app/components/nuxt-link.js (frankly, I don't get why it exists in the first place 😛)

0
dorianamouroux
0
dorianamouroux
commented 8 months ago

I wanted to use nuxt-link as I could access it with an explicit import; because router-link is distributed compiled so you can't import individual component. Then I think my workaround is the right solution for my usecase.

But it doesn't fix the issue to import *.vue files located in node_modules on SSR mode; but works in SPA; making the code not universal.

0
galvez
2.8k
galvez
commented 3 months ago

Closing this issue as there's been no updates over 90 days.

This seems like a rather specific edge case. I'd replicate nuxt-link manually if I were to follow the approach you tried to describe. i really can't visualize it though.

0
Informations
QuestionUnresolved
#c2557 - Created 8 months ago