TypeError:renderContext.renderResourceHints is not a function(NUXT报错解决方案)

已于 2024-04-17 14:13:46 修改
阅读量608 收藏 1
点赞数 6
文章标签： vue 前端
于 2024-04-16 18:23:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Curry_2019/article/details/137834947
版权
文章讲述了在NUXT2.17和Vue2.7的项目环境中，使用asyncData导致的TypeError，因为该方法在页面渲染前执行，未获取到cookie数据。提供了两种解决方案：一是将asyncData移至created()，二是降级Nuxt到1.4版本。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目环境：NUXT2.17，Vue2.7

报错信息：

TypeError:renderContext.renderResourceHints is not a function
在这里插入图片描述

报错原因：

vue中采用了asyncData()方法，只执行一次请求页面，先于页面渲染执行所以得不到cookie数据，报错
在这里插入图片描述

解决方式1：

不采用asyncData()方法，写到created()中，改写如下：
在这里插入图片描述
测试发现问题解决

解决方式2

将nuxt版本降级到1.4

npm uninstall nuxt  
npm install nuxt@1.4.2

重新启动后，报错解决

Nuxt2/3 - 报错 TypeError: renderContext.renderResourceHints is not a function（nuxt运行或开发中出现报错，详细解决方案教程）
王二红
04-30 3773
nuxt2，nuxt3，vue，nuxt报错，nuxt运行提示错误，TypeError:renderContext.renderResourceHintsisnotafunction，详细解决方法，nuxt依旧报错怎么办，nuxt.js提示renderContext.renderResourceHints，怎么解决这个问题，详细教程，renderContext.renderResourceHintsisnotafunction报错解决，浏览器控制台报错，NUXT框架出错，降级还是报错，vu
renderContext.renderResourceHints is not a function报错解决
npcxx1025的博客
11-15 3129
renderContext.renderResourceHints is not a function报错解决
renderContext.renderResourceHints is not a function
qq_48736958的博客
02-24 6298
renderContext.renderResourceHints is not a function 报这个错是由于你页面还没有渲染，就出现了引用调值的情况，我出现这个情况是在request的拦截器上加了东西获取后端的值。将该部分内容注释掉就行了，然后重新排错 重新排错发现我是没有引入cookie，直接引入cookie就行了 ...
nuxt出现render.ResourceHints is not a function
F1nno的博客
06-20 3779
问题描述： 使用nuxt框架的ssr服务器端渲染页面的时，运行项目时出现此错误。 问题根源： 是在nuxt的生命周期中，asyncData()方法中出错，出错的原因有很多种 目前遇到的问题原因是后端网关服务的配置跨域后未生效 解决办法： 不使用配置类配置跨域请求处理，仍旧使用在每个handler或者controller上添加@CrossOrigin注解的方法 在网关子工程内添加spring-boot-starter-webflux依赖，为何添加后能生效，我也不清楚。 <
nuxt.js项目 出现render.ResourceHints is not a function
qq_44798321的博客
08-15 1647
问题：出现问题的地方： asyncData({params})方法发生再初始化方法之前 服务端渲染 1、请求出错 2、请求被拦截 整个页面就不能加载 本次出现问题的地方我的服务网关的端口号是8888 而我nutx.js项目的request.js的请求根路径是http://localhost 即默认端口号是80 正确的因该是：http://localhost：8888 ...
微信小程序报错：this.setData is not a function的解决办法
08-29
"微信小程序报错：this.setData is not a function的解决办法" 微信小程序报错：this.setData is not a function是一个常见的错误，特别是在使用微信小程序开发时。在这个错误中，this.setData变成了undefined，...
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
然而，当你遇到`TypeError: this.$set is not a function`的错误时，通常是因为`this`上下文没有正确指向Vue实例。下面我们将深入探讨这个问题及其解决方案。 ### 报错场景 在开发过程中，你可能在尝试将API获取的...
小程序中wx.xx is not a function的报错
03-29
连胜老师今天来说一下小程序后台，运维中心经常报的一个错误：错误提示：wx.getSetting is not a function;at App lifeCycleMethod onLaunch function。   这里的wx.getSetting，可能是其他API，比如wx....
解决koa2 ctx.render is not a function报错问题
10-18
主要介绍了解决koa2 ctx.render is not a function报错问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
TypeError: instance.render is not a function [React]
小羊的博客
04-13 6299
今天敲React的学习文档中的一个例子时出现了一个问题 通过在要引用的 DOM 元素上面设置一个ref属性指定一个名称，然后通过this.refs.name来访问对应的 DOM 元素。 比如有一种情况是必须直接操作 DOM 来实现的，你希望一个<input/>元素在你清空它的值时 focus，你没法仅仅靠state来实现这个功能。 源码如下： import...
TypeError: instance.render is not a function
游海东的技术专栏
05-24 5083
1、错误描述 2、错误原因 import React, {Component} from 'react'; import {render} from 'react-dom'; import Button from 'react-bootstrap/Button' class InputRead extends Component { constructor() { return ...
TypeError: instance.render is not a function [React]
qq_27009517的博客
03-16 568
render函数名写错了。。。。。。。
Vue中使用less出错：loaderContext.getResolve is not a function
叹之
08-22 643
错误原因 less-loader版本过高 正确的使用方式 下载 // 严格控制版本号 npm install less@3.12.2 less-loader@4.1.0 --save-dev // 下面两个vue-cli会自动帮我们下载，不需要再安装 // 但如果你重新安装过，要注意版本号不能太高 // npm install css-loader@0.28.0 vue-style-loader@3.0.1 --save-dev 引入 // 在main.js中 import less from
TypeError: Components is not a function
qq_44887733的博客
07-30 1009
Vue中按需引入Element-plus时，报错TypeError: Components is not a function。
TypeError: xxx is not a function异常的解决方案
热门推荐
2301_79779756的博客
05-10 2万+
在JavaScript编程中，TypeError: xxx is not a function是一个常见的运行时错误。这个错误表明你尝试调用的xxx并不是一个函数，但你的代码却以函数的方式去调用了它。这通常是因为变量xxx没有被正确地定义为一个函数，或者它被赋予了非函数的值。
[Vue warn]: Error in render: “TypeError: renderEmpty is not a function“
东扯葫芦西扯瓜——前端小菜鸟的博客
08-21 2535
[Vue warn]: Error in render: "TypeError: renderEmptthis.configProvider.renderEmpty;而且有意思的是，全量引入ant-design-vue，是没有这个问题的，启用按需涌入ant-design-vue的Select组件，就会报这个错误。首先我们点开报错的index.js。那获取大家就已经恍然大悟了，ant-desgign-vue需要引入语言包。从项目里面点进ant-design-vue 的lib里面，找到打包后的select文件。
解决：Vue项目中报错为 “TypeError: _this2.getListFn is not a function“ 或 Property or method “inputFn“ is not
狮子座的男孩
04-03 4677
1、报错的信息全称为： 其一、报错信息为： TypeError: _this2.getListFn is not a function 或Property or method "inputFn" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based component
ERROR TypeError: transpileDependencies.map is not a function TypeError: transpileDependencies.map is not a function
最新发布
04-03
`TypeError: transpileDependencies.map is not a function` 错误通常发生在 Vue 和 Webpack 配置过程中，可能的原因包括以下几个方面： #### 1. **Webpack 版本不兼容** 如果使用的 `webpack-cli` 或其他依赖版本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值