Vue.js Nuxt和Ag网格问题语法错误缺少堆栈帧

正在尝试在nuxt应用程序中添加ag网格

我从楼梯上走下来 和

在nuxt.config.js中添加了样式 制作插件并包含在nuxt.config.js中 已创建组件aggridemo.vue 在page index.vue中包含组件 注意：请不要尝试运行这些代码段，因为我只使用它们来共享我拥有的源代码

我的nuxt.config.js文件

需要'dotenv'.config 从“./package”导入包 导出默认值{ 模式：“通用”， /* **页眉 */ 负责人：{ 标题：pkg.name， 元：[ {charset:'utf-8'}， {name:'viewport'，content:'width=设备宽度，初始比例=1'}， {hid:'description'，name:'description'，content:pkg.description} ], 链接：[{rel:'icon'，键入：'image/x-icon'，href:'/favicon.ico'}] }, /* **自定义进度条颜色 */ 正在加载：{color:'fff'}， /* **全局CSS */ css:[ {src:'~assets/bulma modifications.scss'，lang:'scss'}， {src:'font awesome/scss/font awesome.scss'，lang:'scss'}， {src:'~/node_modules/ag grid community/dist/styles/ag grid.css'，lang:'css'}， {src:'~/node_modules/ag grid community/dist/styles/ag theme dark.css'，lang:'css'} ], /* **安装应用程序之前要加载的插件 */ 插件：[ { src:“~/plugins/plugin ag grid.js”， ssr：错误 }, { src:'~plugins/plugin vue chartjs.js'， ssr：错误 } ], /* **Nuxt.js模块 */ 模块：[ //文件：https://axios.nuxtjs.org/usage “@nuxtjs/axios”， //文件：https://buefy.github.io//documentation “nuxt buefy”， “@nuxtjs/pwa”， “@nuxtjs/dotenv” ], /* **Axios模块配置 */ axios：{ //看https://github.com/nuxt-community/axios-moduleoptions }, /* **构建配置 */ 建造：{ /* **您可以在此处扩展网页包配置 */ 扩展配置，ctx{ config.resolve.alias['vue']='vue/dist/vue.common' //在保存时运行ESLint 如果ctx.isDev&&ctx.isClient{ config.module.rules.push{ 强制执行：“预”， 测试：/\.js|vue$/,， 加载程序：“eslint加载程序”， 排除：/node\u模块/ } } config.node={ 财政司司长：空置 } } }, 环境：{ baseUrl:process.env.BASE|URL | |'http://localhost:3000' }

---

} 首先，虽然可能不会导致此错误，但模板中的组件应该是kebab case

您得到的错误可能是一个ssr问题，尽管您在nuxt.config.js中指定了ssr:false，但这并不总是能够理解这一点

你能试试这个吗

<template>
  <section class="section">
    Welcome to test page
    <no-ssr>
      <ag-grid-demo></ag-grid-demo>
    </no-ssr>
  </section>
</template>

<script>
let AgGridDemo = {}
if (process.browser) {
  AgGridDemo = require('~/components/AgGridDemo')
}
export default {
  components: {
    'ag-grid-demo': AgGridDemo
  }
}
</script>

在下一个主要版本中将不推荐使用ssr:false。看

编辑

如果这仍然导致错误，您可能需要添加插件以在nuxt.config.js中构建transfile。像这样：

build: {
  ...
  transpile: [
    '/plugins',
  ],
 }

这将传输你的所有插件，但看看你如何去。不幸的是，政府没有给我们太多关于这方面的信息

如果你不能做到这一点，老式的方法是将组件添加到白名单中，如下所示：

//nuxt.config.js
const nodeExternals = require('webpack-node-externals')

module.exports = {
  /*
  ** All other config code
  */
  build: {
    extend(config, ctx) {
      if (ctx.isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/^@components\\AgGridDemo.vue/] 
            // or however you regex a windows path
          })
        ]
      }
    }
  }
}

---

在尝试了这里给出的每个解决方案之后，感谢您的发布，我成功地在nuxt项目上渲染了ag网格，dynamic import minute 7:40解释了如何执行，如果您不熟悉代码拆分，我强烈建议您观看整个视频

我是怎么到那里的？好吧，自从安德鲁写到这个问题可能与ssr有关，然后爆炸！ag-grid-vue出现了。现在的问题是，我的很多功能都是基于ssr的。因此，我必须使其在srr模式下工作，但现在我知道ag grid vue在客户端完全可用，因此我切换回模式：ssr，并做了以下操作：

注意：请不要尝试运行这些代码段，因为我只使用它们来共享我拥有的源代码

我的aggridemo.vue

从“ag grid vue”导入{AgGridVue} 导出默认值{ 名称：“ag网格演示”， 资料{ 返回{ columnDefs:null， 行数据：空 } }, 组成部分：{ 阿格里德维 }, 上山前{ this.columnDefs=[ {headerName:'Make'，field:'Make'}， {headerName:'Model'，字段：'Model'}， {headerName:'Price'，字段：'Price'} ] this.rowData=[ {品牌：'Toyota'，型号：'Celica'，价格：35000}， {品牌：福特，型号：蒙迪欧，价格：32000}， {品牌：'Porsche'，型号：'Boxter'，价格：72000} ] } } @导入~/node_modules/ag-grid community/dist/styles/ag-grid.css； @导入~/node_modules/ag grid community/dist/styles/ag-theme-balham.css；

---

谢谢你的回复，安德鲁！我想这已经解决了。我现在不再出现语法错误，但是几乎没有其他问题阻止我渲染ag网格。我正在研究这一点，并将标记您的答案为正确的，只要我确保这一点修复它！我现在得到[Vue warn]：无法装载组件：模板或

---

未定义渲染函数。在-->中找到，如果我用“~/components/aggridemo”中的import aggridemo替换掉浏览器中的行并保存，网格在开发人员自动重新加载时工作，但是如果我在pc上手动重新加载页面，我会再次得到：缺少堆栈帧。@Nesha8x8我添加了一个可能有用的编辑。你没有使用IE11，是吗？没有，用chrome和brave chrome进行测试

//nuxt.config.js
const nodeExternals = require('webpack-node-externals')

module.exports = {
  /*
  ** All other config code
  */
  build: {
    extend(config, ctx) {
      if (ctx.isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/^@components\\AgGridDemo.vue/] 
            // or however you regex a windows path
          })
        ]
      }
    }
  }
}