Unable to initialize Editor

haarhoff

Error messages shown:
Uncaught TypeError: (init_dataTables_editor(...) , __toCommonJS(...)) is not a function
at new module.exports (editor.bootstrap5.js:25:5)
at campaign.js:13:16
**Description of problem**:
Hi, I'm trying to evaluate DataTable Editor. The JS is served by Vite. This is the module file:

import jQuery from "jquery";
import DataTable from 'datatables.net-bs5';
import Editor from 'datatables.net-editor-bs5';

const editor = new Editor(window, jQuery);

const table = new DataTable('#campaign-table',{ 
    dom: 'Bfrtip',
    paging: true,
    pageLength: 10,
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }   
    ],
});

Any hint on what might go wrong here would be greatly appreciated.

allan

Vite uses ES modules if they are available, which they are with Editor. Our ES modules have a slightly different signature to the CommonJS modules - the upshot of which is that you should drop:

const editor = new Editor(window, jQuery);

Instead, just use the Editor module in a similar way to how you use the DataTable one - i.e. initialise the Editor on that module:

import jQuery from "jquery";
import DataTable from 'datatables.net-bs5';
import Editor from 'datatables.net-editor-bs5';
 
const editor = new Editor({
  ajax: '...',
  table: '#campaign-table',
  fields: [
    // ...
  ]
});
 
const table = new DataTable('#campaign-table',{ 
    dom: 'Bfrtip',
    paging: true,
    pageLength: 10,
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }   
    ],
});

That should do the job for you. If it doesn't (the __toCommonJS is giving me a bit of pause) can you show me your package.json file and any Vite configuration you have. Or even better would be a link to a repo showing the issue.

Thanks,
Allan

haarhoff

Thanks, its unfortunately still displaying the same error message.
Its an ASP.NET Core project, but I'd be happy to extract a minimal example showing the error if that works for you.

Here is my vite configuration:

        const config: UserConfig = {
                clearScreen: true,
                appType: 'mpa',
                root: 'Client',
                publicDir: 'public',
                build: {
                    manifest: appsettings.Vite.Manifest,
                    emptyOutDir: true,
                    outDir: '../wwwroot',
                    assetsDir: '',
                    rollupOptions: {
                        input: ['Client/main.ts', 'Client/campaign.js', 'Client/scss/main.scss'],
                        // remove hashing, but I could add it back in
                        output: {
                            // Save entry files to the appropriate folder
                            entryFileNames: 'js/[name].js',
                            // Save chunk files to the js folder
                            chunkFileNames: 'js/[name]-chunk.js',
                            // Save asset files to the appropriate folder
                            assetFileNames: (info) => {
                                if (info.name) {
                                    // If the file is a CSS file, save it to the css folder
                                    if (cssPattern.test(info.name)) {
                                        return 'css/[name][extname]';
                                    }
                                    // If the file is an image file, save it to the images folder
                                    if (imagePattern.test(info.name)) {
                                        return 'images/[name][extname]';
                                    }
        
                                    // If the file is any other type of file, save it to the assets folder 
                                    return 'assets/[name][extname]';
                                } else {
                                    // If the file name is not specified, save it to the output directory
                                    return '[name][extname]';
                                }
                            },
                        }
                    },
                }
            }

Nothing spectacular
The package.json is similarly simple:

    {
      "name": "mypackage",
      "private": true,
      "type": "module",
      "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
      },
      "devDependencies": {
        "@popperjs/core": "^2.11.8",
        "@types/bootstrap": "^5.2.6",
        "@types/jquery": "^3.5.16",
        "bootstrap": "^5.2.3",
        "datatables.net-autofill-bs5": "^2.6.0",
        "datatables.net-bs5": "^1.13.5",
        "datatables.net-buttons-bs5": "^2.4.0",
        "datatables.net-editor-bs5": "^2.0.3",
        "datatables.net-fixedcolumns-bs5": "^4.3.0",
        "datatables.net-fixedheader-bs5": "^3.4.0",
        "datatables.net-keytable-bs5": "^2.10.0",
        "datatables.net-scroller-bs5": "^2.2.0",
        "htmx.org": "^1.9.2",
        "hyperscript.org": "^0.9.9",
        "jquery": "^3.7.0",
        "jszip": "^3.10.1",
        "sass": "^1.63.6",
        "ts-node": "^10.9.1",
        "typescript": "^5.1.6",
        "vite": "^4.3.9"
      }
    }

haarhoff

Hi Allan,

Thanks for your reply. I'm happy to extract a minimal example, it would be an ASP.NET Core project though, if thats allright with you.

Here is my vite config:

const config: UserConfig = {
        clearScreen: true,
        appType: 'mpa',
        root: 'Client',
        publicDir: 'public',
        build: {
            manifest: appsettings.Vite.Manifest,
            emptyOutDir: true,
            outDir: '../wwwroot',
            assetsDir: '',
            rollupOptions: {
                input: ['Client/main.ts', 'Client/campaign.js', 'Client/scss/main.scss'],
                // remove hashing, but I could add it back in
                output: {
                    // Save entry files to the appropriate folder
                    entryFileNames: 'js/[name].js',
                    // Save chunk files to the js folder
                    chunkFileNames: 'js/[name]-chunk.js',
                    // Save asset files to the appropriate folder
                    assetFileNames: (info) => {
                        if (info.name) {
                            // If the file is a CSS file, save it to the css folder
                            if (cssPattern.test(info.name)) {
                                return 'css/[name][extname]';
                            }
                            // If the file is an image file, save it to the images folder
                            if (imagePattern.test(info.name)) {
                                return 'images/[name][extname]';
                            }

                            // If the file is any other type of file, save it to the assets folder 
                            return 'assets/[name][extname]';
                        } else {
                            // If the file name is not specified, save it to the output directory
                            return '[name][extname]';
                        }
                    },
                }
            },
        }
   }

haarhoff

And my package.json:

{
  "name": "mupackage",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@popperjs/core": "^2.11.8",
    "@types/bootstrap": "^5.2.6",
    "@types/jquery": "^3.5.16",
    "bootstrap": "^5.2.3",
    "datatables.net-autofill-bs5": "^2.6.0",
    "datatables.net-bs5": "^1.13.5",
    "datatables.net-buttons-bs5": "^2.4.0",
    "datatables.net-editor-bs5": "^2.0.3",
    "datatables.net-fixedcolumns-bs5": "^4.3.0",
    "datatables.net-fixedheader-bs5": "^3.4.0",
    "datatables.net-keytable-bs5": "^2.10.0",
    "datatables.net-scroller-bs5": "^2.2.0",
    "htmx.org": "^1.9.2",
    "hyperscript.org": "^0.9.9",
    "jquery": "^3.7.0",
    "jszip": "^3.10.1",
    "sass": "^1.63.6",
    "simple-datatables": "^7.2.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.1.6",
    "vite": "^4.3.9"
  }
}

allan

Hi,

Apologies for the delay in getting back to you about this one!

Try the following:

import DataTable from 'datatables.net-bs5';
import Editor from 'datatables.net-editor';
import 'datatables.net-editor-bs5';

const editor = new Editor({
  ajax: '...',
  table: '#campaign-table',
  fields: [
    // ...
  ]
});

const table = new DataTable('#campaign-table',{
    dom: 'Bfrtip',
    paging: true,
    pageLength: 10,
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }
    ],
});

The difference is that I've imported from datatables.net-editor first. That shouldn't be required - the datatables.net-editor-bs5 package should be enough, but there is something going wrong with the CommonJS / ES module compatibility there that I will need to investigate further.

Allan

allan

I've realised what was going wrong. The Editor styling packages on npm.com did not have a module attribute in their package.json file. The result was that it was falling back to CommonJS mode for those files, but using ES modules for the main Editor files. The mix of the two caused the error.

I've published updates to those packages now to address this.

We also have our own NPM repository which didn't have this issue and can simplify the installation of the Editor modules (since you don't need to run the zip install script). Documentation on how to use it is available here.

Regards,
Allan