Uncaught TypeError: Cannot read properties of undefined (reading 'next')

[maifeeulasad]

When trying to create a new column at right I get this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'next')
    at table_TableContainer.insertColumn (quill-better-table.js:1874)
    at table_operation_menu_TableOperationMenu.handler (quill-better-table.js:2373)
insertColumn @ quill-better-table.js:1874
handler @ quill-better-table.js:2373

Part of package.json:

...

  "dependencies": {
    "html-to-react": "1.3.4",
    "quill-better-table": "1.2.8",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-quill-with-table": "1.3.3",
    "react-scripts": "3.0.1"
  },
  "devDependencies": {
    "typescript": "3.3.3"
  },
...

Code is simple:

import React, { useEffect, useState, useRef } from "react";
import ReactDOM from "react-dom";
import ReactQuill, { Quill } from "react-quill-with-table";
import QuillBetterTable from "quill-better-table";
import { Parser as HtmlToReactParser } from "html-to-react";

import "./styles.css";
import "react-quill-with-table/dist/quill.snow.css";
import "react-quill-with-table/dist/quill.bubble.css";

var htmlToReactParser = new HtmlToReactParser();

Quill.register("modules/better-table", QuillBetterTable);

const editorModules = {
  table: false, // disable table module
  "better-table": {
    operationMenu: {
      items: {
        unmergeCells: {
          text: "Another unmerge cells name"
        }
      }
    }
  },
  keyboard: {
    bindings: QuillBetterTable.keyboardBindings
  }
};

function App() {
  const editor = useRef();
  const [text, setText] = useState("");
  var reactElement = htmlToReactParser.parse(text);
  useEffect(() => {
    const editon = editor.current.getEditor();
    //console.log(editon.getModule("toolbar"));
    let tableModule = editon.getModule("better-table");
    tableModule.insertTable(3, 3);
    console.log(tableModule);
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ReactQuill
        ref={editor}
        value={text}
        modules={editorModules}
        onChange={(value) => setText(value)}
        theme="snow"
      />

      {reactElement}
    </div>
  );
}

This should be also available on this sandbox.

[haow-abc]

Change
import "react-quill-with-table/dist/quill.bubble.css";
to
import 'quill-better-table/dist/quill-better-table.css';

[nickrupert7]

Change import "react-quill-with-table/dist/quill.bubble.css"; to import 'quill-better-table/dist/quill-better-table.css';

Adding import 'quill-better-table/dist/quill-better-table.css'; to my React component fixed the issue for me!

[maifeeulasad]

Completely unrelated stuff to this project.

I migrated to tinymce. It was quite easier. And they have table and merge cell support right out of the box. If you are running short on time, then do stuff like this.

Otherwise try to solve the actual problem, and contribute to open source.