search

avallete / ag-grid-autocomplete-editor

Quick implementation of autocompletion into ag-Grid cell using autocompleter package.
MIT License
49 stars 25 forks source link

[BUG] Cannot read property PopupComponent #96

Closed eyallibarak closed 3 years ago

eyallibarak commented 3 years ago
  1. I'm loading ag-grid-autocomplete-editor with document.createElement('script') (src= .....ag-grid-autocomplete-editor.js) instead of "import {AutocompleteSelectCellEditor} from 'ag-grid-autocomplete-editor';"
  2. I use the enterprise version of ag-grid (and have edited require("ag-grid-community") to require("ag-grid-enterprise"))
  3. I get this error in the javascript console:

Uncaught TypeError: Cannot read property 'PopupComponent' of undefined at Object.220 (ag-grid-autocomplete-editor.js:1)

avallete commented 3 years ago

Edit:

According to ag-grid documentation you need to add both: ag-grid-community and ag-grid-enterprise to your dependencies.

If you use modules you need to register PopupComponent from @ag-grid-community/all-modules before loading this plugin.

Then, you don't need to edit anything, the package shoud work as expected.

Let me know if it work for you.

eyallibarak commented 3 years ago

How does the require("@ag-grid-community/core") work? With version 2.2.0 I still get the same error. I attach ag-grid with simple script src=".." tag.

avallete commented 3 years ago

Basically, require go search in the window object the required dependency.

I relate your issue to the way agGrid is imported into your code. Because of the way you importing it (trough direct src="" tag). The module resolution have a hard time to resolve the ag-grid-community dependency.

However, you can "patch" this issue by aliasing the window.agGrid to the name wanted by the plugin (for latest version is ag-grid-community). I have created a gist to give you an exemple here. Please note that the order of the <script> tags into the HTML are important and cannot be reversed with one another.

Let me stress this: I do not recommend this method, instead, use npm + some bundling tools to handle your project dependencies and modules resolution. You can find some docs on the official website. That comes with several advantages (typescript types if you use it, .map.js for debugging). And will also give you some more comprehensive error messages at building time if something goes wrong.

Also, be aware that I'm working on a big refactor of the code in this module right now, and I will revert the ag-grid-community dependency to @ag-grid-community/core (so you will need to adapt the alias to reflect this change if when you pull the next update)

eyallibarak commented 3 years ago

@avallete Thanks, I got it to work following your example.