Comments (10)
Update:
I have managed to fix this by providing the route with a name key, you may wan't to update the custom-routes example.
from nuxt.
Hi, thanks for your feedback.
The example is fixed now.
from nuxt.
@alexchopin I'm getting this error again when using the auth-routes demo combined the hidden pages feature, I've replicated it in my own project. It seems that running node server.js throws a path error in vue-router, but running the nuxt command has no errors.
I've tried running nuxt build before starting server.js to see if that fixed it but it doesn't. Here is an example:
nuxt.config.js
module.exports = {
router: {
routes: [
{name: 'demo', path: '/demo/:foo', component: 'pages/_demo'}
]
}
}
Example router-link
<template>
<div>
<router-link :to="{name: 'demo', params: {foo: 'bar'}}">
Demo Link
</router-link>
</div>
</template>
package.json
{
"name": "auth-routes",
"description": "",
"dependencies": {
"body-parser": "^1.15.2",
"express": "^4.14.0",
"express-session": "^1.14.2",
"nuxt": "latest",
"whatwg-fetch": "^2.0.1"
},
"scripts": {
"dev": "node server.js",
"build": "nuxt build",
"start": "NODE_ENV=production node server.js"
}
}
Running the following throws the path error
npm run dev
npm start
Running this throws NO error
npm build
Here is the exact error
Vue.js error
TypeError: Cannot read property 'path' of undefined
at VueRouter.match (C:\Users\Anthony\Desktop\auth-routes\node_modules\vue-router\dist\vue-router.common.js:1135:44)
at VueRouter.resolve (C:\Users\Anthony\Desktop\auth-routes\node_modules\vue-router\dist\vue-router.common.js:2037:23)
at Proxy.render (C:\Users\Anthony\Desktop\auth-routes\node_modules\vue-router\dist\vue-router.common.js:300:22)
at VueComponent.Vue._render (C:\Users\Anthony\Desktop\auth-routes\node_modules\vue\dist\vue.runtime.common.js:2925:22)
at renderComponent (C:\Users\Anthony\Desktop\auth-routes\node_modules\vue-server-renderer\build.js:5888:25)
at renderNode (C:\Users\Anthony\Desktop\auth-routes\node_modules\vue-server-renderer\build.js:5871:7)
at next (C:\Users\Anthony\Desktop\auth-routes\node_modules\vue-server-renderer\build.js:6007:9)
at cachedWrite (C:\Users\Anthony\Desktop\auth-routes\node_modules\vue-server-renderer\build.js:36:9)
at renderElement (C:\Users\Anthony\Desktop\auth-routes\node_modules\vue-server-renderer\build.js:5931:5)
at renderNode (C:\Users\Anthony\Desktop\auth-routes\node_modules\vue-server-renderer\build.js:5875:7)
I've tested on both Windows and Mac, both running Node 7.0.1, both has the same error
from nuxt.
Hi @antcook
Can you show us your server.js file when you're requiring Nuxt and instantiating it please?
from nuxt.
Using the server.js from the custom-routes example throws the error, and I have also tried starting a fresh project with the following server.js but still throws the same error:
const Nuxt = require('nuxt')
const bodyParser = require('body-parser')
const session = require('express-session')
const app = require('express')()
// Body parser, to access req.body
app.use(bodyParser.json())
// Sessions to create req.session
app.use(session({
secret: 'super-secret-key',
resave: false,
saveUninitialized: false,
cookie: { maxAge: 60000 }
}))
// We instantiate Nuxt.js with the options
const isProd = process.env.NODE_ENV === 'production'
const nuxt = new Nuxt({ dev: !isProd })
// No build in production
const promise = (isProd ? Promise.resolve() : nuxt.build())
promise.then(() => {
app.use(nuxt.render)
app.listen(3000)
console.log('Server is listening on http://localhost:3000')
})
.catch((error) => {
console.error(error)
process.exit(1)
})
from nuxt.
Can you check in the node_modules/nuxt/package.json which version is it?
Sorry about this
from nuxt.
No problem, the version is 0.8.3
from nuxt.
Hi,
It's because you need to import your nuxt.config.js before instantiate Nuxt in your server.js.
We still need to complete the documentation, sorry about that.
You can see this example :
const Nuxt = require('nuxt')
const bodyParser = require('body-parser')
const session = require('express-session')
const app = require('express')()
// Body parser, to access req.body
app.use(bodyParser.json())
// Sessions to create req.session
app.use(session({
secret: 'super-secret-key',
resave: false,
saveUninitialized: false,
cookie: { maxAge: 60000 }
}))
// POST /api/login to log in the user and add him to the req.session.authUser
app.post('/api/login', function (req, res) {
if (req.body.username === 'demo' && req.body.password === 'demo') {
req.session.authUser = { username: 'demo' }
return res.json({ username: 'demo' })
}
res.status(401).json({ error: 'Bad credentials' })
})
// POST /api/logout to log out the user and remove it from the req.session
app.post('/api/logout', function (req, res) {
delete req.session.authUser
res.json({ ok: true })
})
// We instantiate Nuxt.js with the options
const isProd = process.env.NODE_ENV === 'production'
let config = require('./nuxt.config.js')
config.dev = !isProd
const nuxt = new Nuxt(config)
// No build in production
const promise = (isProd ? Promise.resolve() : nuxt.build())
promise.then(() => {
app.use(nuxt.render)
app.listen(3000)
console.log('Server is listening on http://localhost:3000')
})
.catch((error) => {
console.error(error)
process.exit(1)
})
from nuxt.
Thank you so much for your time! That did the trick :)
from nuxt.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
from nuxt.
Related Issues (20)
- Selective client in a v-for generates many client component references
- Having issues exporting AWS SSM parameter value to Nuxt environment variable
- Declaring `new PublicKey(...)` from @solana/web3.js breaks the entire app HOT 2
- Type issue with the value ref of useAsyncData HOT 2
- `useFetch, useAsyncData` Network calls duplication is broken HOT 2
- useCookie not updating value in browser HOT 1
- Inconsistency in Visibility of URL 'https://nuxt.com/deploy/koyeb' in Light and Dark Modes
- [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables`. HOT 6
- Problems building Nuxt 3 on electron startup
- useHead doubling the baseURL only when served from that domain HOT 1
- Dynamic Menu Generation Based on Directory or Route Configuration in Nuxt 3 SSR HOT 1
- [useFetch] Component is already mounted, please use $fetch instead. See https://nuxt.com/docs/getting-started/data-fetching HOT 12
- Problem with route rules in nuxt.config HOT 2
- How to copy file to folder .output after build(2) HOT 2
- Decode function for useCookie called for every cookie present
- Docs: Cannot get API Docs for nuxt.config.ts HOT 2
- Wrong status codes in server plugins HOT 3
- autoImport for utils directory doesn't work correctly. HOT 5
- Reactive object does not trigger asyncData HOT 1
- <script setup> does not run on Pages which where navigated to by <NuxtLink>
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nuxt.