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?