When importing a basic ponent I have webpack crash on me. I'm unsure as to why this is happening but it seems to be a missing lib within the ag-grid-react package... Has anyone run into this before? Any advice would be much obliged!

import Table from './ponents/Table'

When creating the Table ponent it piles ok, but as soon as I import it as above, it crashes webpack.

// Table.js

import React, { Component } from "react";
import { AgGridReact } from "ag-grid-react";

class Table extends Component {
  constructor(props) {
    super(props);

    this.state = {
      columnDefs: this.createColumnDefs(),
      rowData: this.createRowData()
    };
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.columnApi = params.columnApi;

    this.gridApi.sizeColumnsToFit();
  }

  createColumnDefs() {
    return [
      { headerName: "Make", field: "make" },
      { headerName: "Model", field: "model" },
      { headerName: "Price", field: "price" }
    ];
  }

  createRowData() {
    return [
      { make: "Toyota", model: "Celica", price: 35000 },
      { make: "Ford", model: "Mondeo", price: 32000 },
      { make: "Porsche", model: "Boxter", price: 72000 }
    ];
  }

  render() {
    let containerStyle = {
      height: 115,
      width: 500
    };

    return (
      <div style={containerStyle} className="ag-fresh">
        <h1>Simple ag-Grid React Example</h1>
        <AgGridReact
          // properties
          columnDefs={this.state.columnDefs}
          rowData={this.state.rowData}
          // events
          onGridReady={this.onGridReady}
        />
      </div>
    );
  }
}

export default Table;

When importing a basic ponent I have webpack crash on me. I'm unsure as to why this is happening but it seems to be a missing lib within the ag-grid-react package... Has anyone run into this before? Any advice would be much obliged!

import Table from './ponents/Table'

When creating the Table ponent it piles ok, but as soon as I import it as above, it crashes webpack.

// Table.js

import React, { Component } from "react";
import { AgGridReact } from "ag-grid-react";

class Table extends Component {
  constructor(props) {
    super(props);

    this.state = {
      columnDefs: this.createColumnDefs(),
      rowData: this.createRowData()
    };
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.columnApi = params.columnApi;

    this.gridApi.sizeColumnsToFit();
  }

  createColumnDefs() {
    return [
      { headerName: "Make", field: "make" },
      { headerName: "Model", field: "model" },
      { headerName: "Price", field: "price" }
    ];
  }

  createRowData() {
    return [
      { make: "Toyota", model: "Celica", price: 35000 },
      { make: "Ford", model: "Mondeo", price: 32000 },
      { make: "Porsche", model: "Boxter", price: 72000 }
    ];
  }

  render() {
    let containerStyle = {
      height: 115,
      width: 500
    };

    return (
      <div style={containerStyle} className="ag-fresh">
        <h1>Simple ag-Grid React Example</h1>
        <AgGridReact
          // properties
          columnDefs={this.state.columnDefs}
          rowData={this.state.rowData}
          // events
          onGridReady={this.onGridReady}
        />
      </div>
    );
  }
}

export default Table;

Webpack crashes with

./node_modules/ag-grid-react/lib/agGridReact.js Module not found: Can't resolve 'react-dom-factories' in '/Users/username/Sites/site/node_modules/ag-grid-react/lib'

• javascript
• reactjs
• webpack
• ag-grid
• ag-grid-react

Share Improve this question Follow asked Nov 16, 2017 at 10:00 Monty MonroMonty Monro 61322 gold badges1010 silver badges2222 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

With react-dom 15.5 (I think), react-dom-factories was moved to a separate module. ag-grid-react was updated to account for this and added react-dom-factories as a peer dependency in its package.json. You likely got a warning when installing ag-grid-react about missing the react-dom-factories dependency.

To resolve this, try running npm install react-dom-factories (or the yarn equivalent if you're using yarn).