I'm facing an issue with ag-grid in my react application where I can't seem to get the CSS working properly with webpack.
The grid is currently displaying like this:
image: https://i.sstatic.net/RPKvH.png
const path = require("path");
var webpack = require("webpack");
let HtmlWebpackPlugin = require("html-webpack-plugin");
let CopyWebpackPlugin = require("copy-webpack-plugin");
var BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
var BitBarWebpackProgressPlugin = require("bitbar-webpack-progress-plugin");
let plug = require("@babel/plugin-proposal-class-properties");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: "url-loader?limit=100000"
},
{
test: /\.css$/,
use: "css-loader/locals"
}
]
},
node: {
fs: "empty"
},
context: path.join(__dirname, "Scripts", "src"),
entry: {
d1: "./entries/d1Page.js",
h1: "./entries/h1Page.js",
polyfills: "./entries/polyfills.js",
d2: "./entries/d2Page.js"
},
output: {
path: path.join(__dirname, "Scripts/dist"),
filename: "[name].bundle.js",
publicPath: "/Scripts/dist/"
},
resolve: {
extensions: [".json", ".js", ".jsx", "css"]
},
devtool: "source-map",
plugins: [new BitBarWebpackProgressPlugin()],
mode: "development"
};
When it comes to importing the CSS into my components, I'm doing it as follows:
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-material.css';
import { AgGridReact } from "ag-grid-react";
.
.
.
Here's a snippet of my packages.json file:
"@babel/core": "^7.1.6",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^3.0.2",
"babel-loader": "^8.0.4",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"bitbar-webpack-progress-plugin": "^1.0.0",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^1.0.1",
"es6": "0.0.7",
"es6-promise": "^4.2.5",
"fs": "0.0.1-security",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.26.0",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10",
"whatwg-fetch": "^3.0.0",
"ag-grid-community": "^20.2.0",
"ag-grid-react": "^20.2.0"
I've tried various loaders and resolvers as recommended by ag-grid but haven't had any success so far. Any insights on what might be causing this issue?