时间戳

首页 > 解决方案 > Nuxt 和 Ag Grid 问题 SyntaxError Missing stack frames

vue.js - Nuxt 和 Ag Grid 问题 SyntaxError Missing stack frames

问题描述

尝试在 nuxt 应用程序中添加 ag-grid。

我按照 https://www.ag-grid.com/vue-getting-started/ 和 如何在 Nuxt 应用程序中使用 ag-grid 中的步骤进行操作

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

我的 nuxt.config.js 文件

require('dotenv').config()
import pkg from './package'

export default {
  mode: 'universal',

  /*
   ** Headers of the page
   */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },

  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#fff' },

  /*
   ** Global 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' }
  ],

  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    {
      src: '~/plugins/plugin-ag-grid.js',
      ssr: false
    },
    {
      src: '~plugins/plugin-vue-chartjs.js',
      ssr: false
    }
  ],

  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://buefy.github.io/#/documentation
    'nuxt-buefy',
    '@nuxtjs/pwa',
    '@nuxtjs/dotenv'
  ],
  /*
   ** Axios module configuration
   */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      config.resolve.alias['vue'] = 'vue/dist/vue.common'
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      config.node = {
        fs: 'empty'
      }
    }
  },
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

我的插件插件-ag-grid.js：

import * as agGridEnterpise from 'ag-grid-enterprise/main'
require('dotenv').config()
agGridEnterpise.LicenseManager.setLicenseKey([process.env.AG_LICENSE_KEY])

我的组件 AgGridDemo.vue：

<template>
  <ag-grid-vue
    style="width: 500px; height: 500px;"
    class="ag-theme-balham"
    :columnDefs="columnDefs"
    :rowData="rowData"
  ></ag-grid-vue>
</template>
<script>
import { AgGridVue } from 'ag-grid-vue'

export default {
  name: 'AgGridDemo',
  data() {
    return {
      columnDefs: null,
      rowData: null
    }
  },
  components: {
    AgGridVue
  },
  beforeMount() {
    this.columnDefs = [
      { headerName: 'Make', field: 'make' },
      { headerName: 'Model', field: 'model' },
      { headerName: 'Price', field: 'price' }
    ]

    this.rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 }
    ]
  }
}
</script>

最后我的页面：

<template>
  <section class="section">
    Welcome to test page
    <aggriddemo></aggriddemo>
  </section>
</template>
<script>

import AgGridDemo from '~/components/AgGridDemo'
export default {
  name: 'IndexPage',
  components: {
    AgGridDemo
  }
}
</script>

我在屏幕上收到错误，但在我的控制台上没有，控制台说编译成功，但在屏幕上我得到：

缺少语法错误

堆栈帧

在此处输入图像描述

关于为什么会发生这种情况以及如何解决这个问题的任何想法？

标签： vue.jsag-gridnuxt.js

解决方案

在尝试了这里给出的每个解决方案之后（感谢发布），我设法使用 < no-ssr > 标签和动态导入在 nuxt 项目上渲染 ag-grid（如果你不是，请在 7:40 分钟解释如何做到这一点熟悉分码我强烈推荐观看整个视频）动态导入视频。

我是怎么到那里的？好吧，由于 Andrew 写道问题可能与 ssr 有关，我将我的 nuxt 项目切换到模式：'spa'和 BOOM！ag-grid-vue 出现了。现在的问题是，我的许多功能都大量基于 ssr 的东西。所以我必须让它在 srr 模式下工作，但现在我知道 ag-grid-vue 在客户端完全可用，所以我切换回 mode: ssr 并进行了以下操作：

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

我的 agGridDemo.vue

<template>
  <ag-grid-vue
    style="width: 500px; height: 500px;"
    class="ag-theme-balham"
    :columnDefs="columnDefs"
    :rowData="rowData"
  ></ag-grid-vue>
</template>
<script>
import { AgGridVue } from 'ag-grid-vue'

export default {
  name: 'ag-grid-demo',
  data() {
    return {
      columnDefs: null,
      rowData: null
    }
  },
  components: {
    AgGridVue
  },
  beforeMount() {
    this.columnDefs = [
      { headerName: 'Make', field: 'make' },
      { headerName: 'Model', field: 'model' },
      { headerName: 'Price', field: 'price' }
    ]

    this.rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 }
    ]
  }
}
</script>

<style lang="scss">
  @import "~/node_modules/ag-grid-community/dist/styles/ag-grid.css";
  @import "~/node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
</style>

我猜这里没有什么新东西，只是在 nuxt.config.js 文件中导入样式表，使样式表无法访问（至少在我的情况下）。所以我添加了 < style > 标记并按照ag-grid 文档中的指定导入样式表

这就是魔法发生的地方，动态导入（如您在我推荐的视频中所见）避免在第一次加载时导入组件代码，并且仅在调用时才导入，这对于优化页面加载通常很有用。所以在我的第一次尝试中，我写了一些：

<template>
  <section>
      <comAgGridDemo v-if="mostrarGrid " ></comAgGridDemo>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
// import comAgGridDemo from '~/components/comAgGridDemo.vue'
const comAgGridDemo = () => import('~/components/comAgGridDemo.vue');

@Component({
  components: {
    comAgGridDemo
  }
})
export default class extends Vue {
  mostrarGrid: boolean = false;

  mounted() {
    this.mostrarGrid = true
  }

}
</script>

所以 comAgGridDemo 只会在 mostrarGrid 为真时渲染，然后在挂载的钩子中（因为挂载在客户端可用）我设置了 mostrarGrid = true。它已经完成了。

我走得更远了一点，因为我不喜欢使用mounted hook来解决这个问题，所以我将组件comAgGridDemo包装在一个<srr>标签上，删除v-if，ag-grid仍然渲染得很好。所以 index.vue 文件最终是这样的：

我的 index.vue

<template>
  <section>
    <no-ssr>
      <comAgGridDemo ></comAgGridDemo>
    </no-ssr>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
// import comAgGridDemo from '~/components/comAgGridDemo.vue'
const comAgGridDemo = () => import('~/components/comAgGridDemo.vue');

@Component({
  components: {
    comAgGridDemo
  }
})
export default class extends Vue {

}
</script>

就是这样。

请注意，如果你。如果你使用 <no-ssr> 标签和常规导入，ag-grid 将失败。如果使用不带 <no-ssr> 标签的动态导入，ag-grid 将失败。如果您使用“v-if 方式”，则无需使用 <no-ssr> 标记。

使用 ag-grid 在 ssr 上有些奇怪。但这就是设法解决它的方法。如果有更好的解决方案，请指教。

我做了一个 github 仓库：https ://github.com/warheartvik/nuxt-ag-grid

推荐阅读