getting error when adding ag-grid enterprise

Here is my package.json

{ "name": "airframe-dashboard", "version": "0.1.0", "description": "Seed project for flexible light React/Bootstrap 4 dashboards.", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "npm run start:dev", "build:dev": "node ./build/cli-tools.js --clear dist --create dist && webpack --config ./build/webpack.config.client.dev.js", "build:prod": "node ./build/cli-tools.js --clear dist --create dist && webpack --config ./build/webpack.config.client.prod.js", "start:dev": "node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.dev.js", "start:prod": "node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.prod.js" }, "author": "Webkom", "license": "ISC", "devDependencies": { "@babel/cli": "^7.4.4", "@babel/core": "^7.4.5", "@babel/plugin-proposal-class-properties": "^7.4.4", "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/preset-env": "^7.4.5", "@babel/preset-react": "^7.0.0", "autoprefixer": "^9.6.0", "babel-eslint": "^10.0.1", "babel-loader": "^8.0.6", "babel-plugin-universal-import": "^4.0.0", "circular-dependency-plugin": "^5.0.2", "commander": "^2.20.0", "css-loader": "^3.1.0", "eslint": "^6.1.0", "eslint-config-airbnb": "^17.1.0", "eslint-import-resolver-alias": "^1.1.2", "eslint-plugin-import": "^2.17.3", "eslint-plugin-jsx-a11y": "^6.2.1", "eslint-plugin-react": "^7.13.0", "extract-css-chunks-webpack-plugin": "^4.5.2", "file-loader": "^4.0.0", "html-webpack-plugin": "^3.2.0", "mkdirp": "^0.5.1", "node-sass": "^4.12.0", "optimize-css-assets-webpack-plugin": "^5.0.1", "postcss-loader": "^3.0.0", "raw-loader": "^3.0.0", "rimraf": "^2.6.3", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "terser-webpack-plugin": "^1.3.0", "webpack": "^4.33.0", "webpack-cli": "^3.3.4", "webpack-dev-server": "^3.7.1" }, "dependencies": { "@babel/polyfill": "^7.4.4", "@owczar/dashboard-style--airframe": "^0.1.13", "ag-grid-community": "^25.2.1", "ag-grid-enterprise": "^25.2.1", "ag-grid-react": "^25.2.0", "bootstrap": "^4.3.1", "faker": "^4.1.0", "font-awesome": "^4.7.0", "holderjs": "^2.9.6", "isomorphic-fetch": "^3.0.0", "lodash": "^4.17.11", "moment": "^2.24.0", "node-fetch": "^2.6.0", "numeral": "^2.0.6", "prop-types": "^15.7.2", "query-string": "^6.7.0", "rc-slider": "^8.6.13", "react": "^16.8.6", "react-beautiful-dnd": "^11.0.4", "react-big-calendar": "^0.22.0", "react-bootstrap-table-next": "^3.1.4", "react-bootstrap-table2-editor": "^1.2.4", "react-bootstrap-table2-filter": "^1.1.9", "react-bootstrap-table2-paginator": "^2.0.6", "react-bootstrap-table2-toolkit": "^2.0.1", "react-bootstrap-typeahead": "^4.0.0-alpha.9", "react-datepicker": "^2.7.0", "react-dom": "^16.8.6", "react-dom-factories": "^1.0.2", "react-dropzone": "^10.1.5", "react-grid-layout": "^0.16.6", "react-helmet": "^5.2.1", "react-hot-loader": "^4.11.0", "react-image-crop": "^8.0.2", "react-quill": "^1.3.3", "react-responsive": "^7.0.0", "react-router": "^5.0.1", "react-router-dom": "^5.0.1", "react-text-mask": "^5.4.3", "react-toastify": "^5.2.1", "react-toggle": "^4.0.2", "react-universal-component": "^4.0.0", "reactstrap": "^8.0.0", "recharts": "^1.6.2", "text-mask-addons": "^3.8.0", "uuid": "^3.3.2", "webpack-cli": "^3.1.0", "webpack-flush-chunks": "^2.0.3" } }

here is the modified AgGrid.js in 'app\routes\Tables\AgGrid'

import React from 'react'; import { render } from 'react-dom'; import {AgGridColumn, AgGridReact} from 'ag-grid-react'; import 'ag-grid-enterprise'; import 'ag-grid-community/dist/styles/ag-grid.css'; import 'ag-grid-community/dist/styles/ag-theme-balham.css';

export default class AgGridExample extends React.Component {

render() {
    const rowData = [
       {make: "Toyota", model: "Celica", price: 35000},
       {make: "Ford", model: "Mondeo", price: 32000},
       {make: "Porsche", model: "Boxter", price: 72000}
    ];

    return (
       <div className="ag-theme-balham" style={{height: 400, width: 600}}>
           <AgGridReact
               rowData={rowData}>
               <AgGridColumn field="make"></AgGridColumn>
               <AgGridColumn field="model"></AgGridColumn>
               <AgGridColumn field="price"></AgGridColumn>
           </AgGridReact>
       </div>
    );
}

}

here is the error in console:

C:\Users\Ananya\Desktop\Perycap\riskmgmtUI>npm start

airframe-dashboard@0.1.0 start C:\Users\Ananya\Desktop\Perycap\riskmgmtUI npm run start:dev

airframe-dashboard@0.1.0 start:dev C:\Users\Ananya\Desktop\Perycap\riskmgmtUI node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.dev.js

Cleared target directory: C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\dist Created target directory: C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\dist i ｢wds｣: Project is running at http://0.0.0.0:4100/ i ｢wds｣: webpack output is served from / i ｢wds｣: Content not from webpack is served from C:\Users\Ananya\Desktop\Perycap\riskmgmtUI.serve i ｢wds｣: 404s will fallback to / × ｢wdm｣: Hash: 81f252a4738825a8d482 Version: webpack 4.46.0 Time: 66577ms Built at: 05/13/2021 12:44:06 PM Asset Size Chunks Chunk Names app.bundle.js 53.2 MiB app [emitted] app app.css 785 KiB app [emitted] app index.html 7.24 KiB [emitted] static/1.jpg 55.7 KiB [emitted] static/10.jpg 59.5 KiB [emitted] static/11.jpg 82 KiB [emitted] static/12.jpg 71.1 KiB [emitted] static/13.jpg 81.8 KiB [emitted] static/14.jpg 76.4 KiB [emitted] static/15.jpg 70.4 KiB [emitted] static/16.jpg 72.4 KiB [emitted] static/17.jpg 77.2 KiB [emitted] static/18.jpg 79.4 KiB [emitted] static/19.jpg 78.1 KiB [emitted] static/2.jpg 63 KiB [emitted] static/20.jpg 74.2 KiB [emitted] static/21.jpg 53.7 KiB [emitted] static/22.jpg 45.4 KiB [emitted] static/23.jpg 86.2 KiB [emitted] static/24.jpg 64.8 KiB [emitted] static/25.jpg 72.1 KiB [emitted] static/26.jpg 51.2 KiB [emitted] static/27.jpg 66.8 KiB [emitted] static/28.jpg 52.2 KiB [emitted] static/29.jpg 84 KiB [emitted] static/3.jpg 43 KiB [emitted] static/30.jpg 54.1 KiB [emitted] static/31.jpg 84.6 KiB [emitted] static/32.jpg 88.9 KiB [emitted] static/33.jpg 64.9 KiB [emitted] static/34.jpg 43.4 KiB [emitted] static/35.jpg 55.1 KiB [emitted] static/36.jpg 75.5 KiB [emitted] static/37.jpg 86.8 KiB [emitted] static/38.jpg 78.9 KiB [emitted] static/39.jpg 67.8 KiB [emitted] static/4.jpg 88.1 KiB [emitted] static/40.jpg 54.8 KiB [emitted] static/41.jpg 75.1 KiB [emitted] static/42.jpg 48.1 KiB [emitted] static/43.jpg 42.1 KiB [emitted] static/44.jpg 57.2 KiB [emitted] static/45.jpg 58.1 KiB [emitted] static/46.jpg 57.9 KiB [emitted] static/47.jpg 54.6 KiB [emitted] static/48.jpg 59.3 KiB [emitted] static/49.jpg 64.1 KiB [emitted] static/5.jpg 73.8 KiB [emitted] static/50.jpg 66.9 KiB [emitted] static/6.jpg 61.5 KiB [emitted] static/7.jpg 64.8 KiB [emitted] static/8.jpg 87.9 KiB [emitted] static/9.jpg 93 KiB [emitted] static/apple-touch-icon.png 5.68 KiB [emitted] static/avatar-1.jpg 63 KiB [emitted] static/favicon-16x16.png 835 bytes [emitted] static/favicon-32x32.png 1.15 KiB [emitted] static/favicon.ico 14.7 KiB [emitted] static/image-1.jpg 184 KiB [emitted] static/image-2.jpg 393 KiB [emitted] static/logo-danger.svg 3.2 KiB [emitted] static/logo-indigo.svg 3.2 KiB [emitted] static/logo-info.svg 3.2 KiB [emitted] static/logo-pink.svg 3.2 KiB [emitted] static/logo-primary.svg 3.2 KiB [emitted] static/logo-purple.svg 3.2 KiB [emitted] static/logo-success.svg 3.2 KiB [emitted] static/logo-warning.svg 3.2 KiB [emitted] static/logo-white.svg 3.2 KiB [emitted] static/logo-yellow.svg 3.2 KiB [emitted] Entrypoint app = app.css app.bundle.js [1] multi (webpack)-dev-server/client?http://0.0.0.0:4100 (webpack)/hot/dev-server.js ./app/index.js 52 bytes {app} [built] [./app/components/App/index.js] 884 bytes {app} [built] [./app/index.js] 352 bytes {app} [built] [./node_modules/@babel/polyfill/lib/index.js] 686 bytes {app} [built] [./node_modules/react-dom/index.js] 1.33 KiB {app} [built] [./node_modules/react/index.js] 190 bytes {app} [built] [./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:4100] (webpack)-dev-server/client?http://0.0.0.0:4100 4.29 KiB {app} [built] [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {app} [built] [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {app} [built] [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {app} [built] [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {app} [built] [./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {app} [built] [./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {app} [built] [./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {app} [built] [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {app} [built]

4151 hidden modules

ERROR in ./app/styles/plugins/plugins.scss Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import "~ag-grid-community/src/styles/ag-theme-classic/vars/ag-theme-classic-vars"; ^ File to import not found or unreadable: ~ag-grid-community/src/styles/ag-theme-classic/vars/ag-theme-classic-vars. in C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\@owczar\dashboard-style--airframe\scss\plugins\ag-grid_ag-theme-bootstrap-vars.scss (line 70, column 1) at C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\webpack\lib\NormalModule.js:316:20 at C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\loader-runner\lib\LoaderRunner.js:367:11 at C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\loader-runner\lib\LoaderRunner.js:233:18 at context.callback (C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at Object.callback (C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\sass-loader\dist\index.js:89:7) at Object.done [as callback] (C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\neo-async\async.js:8069:18) at options.error (C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\node-sass\lib\index.js:294:32) @ ./app/layout/default.js 39:0-42 @ ./app/components/App/AppClient.js @ ./app/components/App/index.js @ ./app/index.js @ multi ./app/index.js

ERROR in ./node_modules/ag-grid-community/dist/styles/ag-theme-balham.css 1:0 Module parse failed: Unexpected token (1:0) 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-theme-balham { | -webkit-font-smoothing: antialiased; | color: #000; @ ./app/routes/Tables/AgGrid/AgGrid.js 37:0-59 @ ./app/routes/Tables/AgGrid/index.js @ ./app/routes/index.js @ ./app/components/App/AppClient.js @ ./app/components/App/index.js @ ./app/index.js @ multi ./app/index.js

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; }

@ ./app/routes/Tables/AgGrid/AgGrid.js 36:0-51 @ ./app/routes/Tables/AgGrid/index.js @ ./app/routes/index.js @ ./app/components/App/AppClient.js @ ./app/components/App/index.js @ ./app/index.js @ multi ./app/index.js Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!app/styles/plugins/plugins.css: Entrypoint extract-css-chunks-webpack-plugin = [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./app/styles/plugins/plugins.css] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./app/styles/plugins/plugins.css 1.66 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/rc-slider/assets/index.css] 5.8 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/react-big-calendar/lib/css/react-big-calendar.css] 12.7 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/react-bootstrap-typeahead/css/Typeahead-bs4.css] 1.04 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/react-bootstrap-typeahead/css/Typeahead.css] 4.16 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/react-datepicker/dist/react-datepicker.css] 23.4 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/react-grid-layout/css/styles.css] 1.3 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/react-quill/dist/quill.snow.css] 25.3 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/cjs.js!./node_modules/react-toggle/style.css] 3.3 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built] Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/bootstrap.scss: Entrypoint extract-css-chunks-webpack-plugin = [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/bootstrap.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/bootstrap.scss 433 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built] Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/components/float-grid.scss: Entrypoint extract-css-chunks-webpack-plugin = [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/components/float-grid.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/components/float-grid.scss 862 bytes {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built] Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/components/theme-selector.scss: Entrypoint extract-css-chunks-webpack-plugin = [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/components/theme-selector.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/components/theme-selector.scss 320 bytes {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built] Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/components/wizard.scss: Entrypoint extract-css-chunks-webpack-plugin = [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/components/wizard.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/components/wizard.scss 1.4 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built] Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/main.scss: Entrypoint extract-css-chunks-webpack-plugin = [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/main.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/main.scss 302 KiB {extract-css-chunks-webpack-plugin} [built] [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built] Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/plugins/plugins.scss: Entrypoint extract-css-chunks-webpack-plugin = * [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/plugins/plugins.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/plugins/plugins.scss 492 bytes {extract-css-chunks-webpack-plugin} [built] [failed] [1 error]

ERROR in ./app/styles/plugins/plugins.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/plugins/plugins.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import "~ag-grid-community/src/styles/ag-theme-classic/vars/ag-theme-classic-vars";
^
      File to import not found or unreadable: ~ag-grid-community/src/styles/ag-theme-classic/vars/ag-theme-classic-vars.
      in C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\@owczar\dashboard-style--airframe\scss\plugins\ag-grid\_ag-theme-bootstrap-vars.scss (line 70, column 1)

Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = index.html [./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html] 9.4 KiB {0} [built] [./node_modules/lodash/lodash.js] 531 KiB {0} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built] i ｢wdm｣: Failed to compile.

I am new to React. Need Help

0wczar / airframe-react

getting error when adding ag-grid enterprise #49