Unable to Use ag-grid in Renderer

[petarmihaylov]

Hello All!

Summary

I have been trying to get ag-grid to work with electron-nuxt and so far I have been unsuccessful.

I have details on what I have tried below. Ultimately, I believe this has to do with how electron-nuxt is compiling the renderer. I am not very familiar with how require and import work, but it almost seems yarn run dev, which is node .electron-nuxt/dev.js behaves differently than nuxt dev in the sense that nuxt dev allows the import of ag-grid and even allows import statements in nuxt.config.js like import pkg from '../package', but node .electron-nuxt/dev.js does not.

Any ideas how I can resolve this? I have been going in circles for the past two days. I have a feeling what I am missing is quite simple.

---

What I have Tried

Initially I tried following the tutorial at https://www.ag-grid.com/vuejs-grid/. However, when I load the page, I encounter

client.js?c592:96 /Users/xxxxxx/devProjects/qeps-audit-tools/node_modules/@ag-grid-community/vue/lib/AgGridVue.js:20
import { Component, Prop, Vue } from 'vue-property-decorator';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at new Script (vm.js:84:7)
    at createScript (vm.js:258:10)
    at Object.runInThisContext (vm.js:306:10)
    at Module._compile (internal/modules/cjs/loader.js:884:26)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:986:10)
    at Module.load (internal/modules/cjs/loader.js:816:32)
    at Module._load (internal/modules/cjs/loader.js:728:14)
    at Module._load (electron/js2c/asar.js:717:26)
    at Function.Module._load (electron/js2c/asar.js:717:26)
    at Module.require (internal/modules/cjs/loader.js:853:19)

I have tried many different things:

• Add "type": "module" to the package.json in the root directory.

This results in another error:

file:///Users/petarm/devProjects/qeps-audit-tools/.electron-nuxt/check-engines.js:5
const {engines} = require('../package');
                 ^

ReferenceError: require is not defined
   at file:///Users/petarm/devProjects/qeps-audit-tools/.electron-nuxt/check-engines.js:5:19
   at ModuleJob.run (internal/modules/esm/module_job.js:146:23)
   at async Loader.import (internal/modules/esm/loader.js:165:24)
   at async Object.loadESM (internal/process/esm_loader.js:68:5)
error Command failed with exit code 1.

• Update nuxt.config.js to add ag-grid-vue as a build module.

This resulted in the initial error: SyntaxError: Cannot use import statement outside a module

• Update the package.json file in the node_modules/ag-grid-vue to include "type": "module"

This resulted in the initial error: SyntaxError: Cannot use import statement outside a module

• Add "type": "module" to the package.json in the root directory again, but this time tried to update the files in the .electron-nuxt directory to use import statements instead of require.

I don't have notes on what happened with this, but I did encounter another issue that prevented me from getting it to work.

• Tried another starter project - https://github.com/saltyshiomix/nuxtron - and added ag-grid to it.

This did work, but the project is very new and missing a lot of the utility functionality of electron-nuxt

[thuykaka]

Any new update for this issue?