React Ag-Grid ag-grid.css Module not found: Can't resolve 'ag-grid-community/styles/ag-grid.css' 해결방법

오류 :

Module not found: Can't resolve 'ag-grid-community/styles/ag-grid.css' in 'C:

 

해결방법 아래 2라인 추가 했음.

import { ModuleRegistry, AllCommunityModules } from '@ag-grid-community/all-modules';

ModuleRegistry.registerModules(AllCommunityModules);

 

오류 소스

import { useState } from "react";

import { render } from "react-dom";

import { AgGridReact } from "@ag-grid-community/react";

import "ag-grid-community/styles/ag-grid.css";

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

const AgGridPage = () => {

  const [rowData] = useState([

    { make: "Toyota", model: "Celica", price: 35000 },

    { make: "Ford", model: "Mondeo", price: 32000 },

    { make: "Porsche", model: "Boxter", price: 72000 }

  ]);

  const [columnDefs] = useState([

    { field: "make" },

    { field: "model" },

    { field: "price" }

  ]);

  return (

    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>

      <AgGridReact rowData={rowData} columnDefs={columnDefs}></AgGridReact>

    </div>

  );

};

export default AgGridPage;

 

수정 소스 

import { useState } from "react";

import { AgGridReact } from "@ag-grid-community/react";

// import { CellValueChangedEvent, GridApi, RowDataChangedEvent, RowSelectedEvent} from "@ag-grid-community/core";

import "@ag-grid-community/core/dist/styles/ag-grid.css";

// import { AllModules } from '@ag-grid-enterprise/all-modules';

import "@ag-grid-community/core/dist/styles/ag-theme-alpine.css";

import "@ag-grid-community/core/dist/styles/ag-theme-material.css";

import { ModuleRegistry, AllCommunityModules } from '@ag-grid-community/all-modules';

function AgGridPage() {

  // ModuleRegistry.registerModules(AllCommunityModules);

  // platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

  // ModuleRegistry.registerModules(AllModules);

  ModuleRegistry.registerModules(AllCommunityModules);

// const AgGridPage = () => {

  const [rowData] = useState([

    { make: "Toyota", model: "Celica", price: 35000 },

    { make: "Ford", model: "Mondeo", price: 32000 },

    { make: "Porsche", model: "Boxter", price: 72000 }

  ]);

  const [columnDefs] = useState([

    { field: "make" },

    { field: "model" },

    { field: "price" }

  ]);

  return (

    <div className="grid ag-theme-material" style={{ height: 400, width: 600 }}>

      <AgGridReact rowData={rowData} columnDefs={columnDefs}></AgGridReact>

    </div>

  );

};

export default AgGridPage;

 

처리결과 화면