extension framework and react datatable

eperler
Participant I

Hello

I am trying to use react datatables with my looker extension following this tutoirial …

https://www.ag-grid.com/react-data-grid/getting-started/

I am able to import the datatable API…

import {AgGridColumn, AgGridReact} from 'ag-grid-react';

but i get an error when trying to import the styles

import 'ag-grid-community/dist/styles/ag-grid.css';

import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

The error is ..

ERROR in ./node_modules/ag-grid-community/dist/styles/ag-grid.css 6:72
Module parse failed: Unexpected token (6:72)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  ****************************
| */
> ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
|   display: block;
| }
 @ ./src/HelloWorld.js 15:0-51
 @ ./src/App.js 18:0-42 22:100-110
 @ ./src/index.js 13:0-28 17:52-55

Thanks for any assistance you can provide 

0 1 622
1 REPLY 1

It seems like the webpack configuration file for the extension doesn’t include a css loader to resolve (css) dependencies for the extension. I might recommend adding a css-loader (https://webpack.js.org/loaders/css-loader/) to the webpack config to resolve this issue. Let us know, if you run into any issues following!