Using Laravel 9, brand new project using Editor constructor error.

BoSmith

The Error:

jquery.js:4114 jQuery.Deferred exception: $.fn.dataTable.Editor is not a constructor TypeError: $.fn.dataTable.Editor is not a constructor.

I have datatables working but cannot get my newly purchased Editor to work. What am I missing in my setup?

Is there an example of Laravel 9 with Editor?

blade.php

 @vite(['resources/sass/app.scss', 'resources/js/app.js'])

package.json

   "dependencies": {
        "datatables.net-bs5": "",
        "datatables.net-buttons-bs5": "",
        "datatables.net-editor": "^2.0.5",
        "datatables.net-editor-bs5": "^2.0.3",
        "datatables.net-select-bs5": "^1.6.0"
    }

app.js

    import './bootstrap';
    import 'laravel-datatables-vite';

vite.config.js

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';

  export default defineConfig({
      plugins: [
          laravel({
              input: [
                  'resources/sass/app.scss',
                  'resources/js/app.js',
              ],
              refresh: true,
          }),
      ],
  });

bootstrap.js

  import _ from 'lodash';
  window._ = _;

  import 'bootstrap';
  import axios from 'axios';
  window.axios = axios;

  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

  try {
      window.Popper = require('popper.js').default;
      window.$ = window.jQuery = require('jquery');
      require('bootstrap');
      require('datatables.net-bs5');
      require('datatables.net-buttons-bs5');
      require('datatables.net-select-bs5');
      require('datatables.net-editor-bs5');
  } catch (e) {}

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

If you do:

var Editor = require('datatables.net-editor-bs5');
console.log(Editor);

What does the browser's console show you?

I suspect you'll need to do:

var Editor = require('datatables.net-editor-bs5')(window, $);

And the same with the other DataTables components. See the npm / require docs here for more details.

Allan

BoSmith

Hi Allan, thanks for the quick response. I am rather new to this so I am not understanding your feedback.

What file are you asking me to put the var Editor = require .... statement into? Including it in the bootstrap.js? I just get the same errors...

I did see another post on the Editor that stated this was required in app.js:

import './bootstrap';
 
import 'laravel-datatables-vite';
import Editor from "datatables.net-editor-bs5";
 
Editor(window, $);

But now I get:

editor.bootstrap5.js:32 Uncaught TypeError: (init_dataTables_editor(...) , __toCommonJS(...)) is not a function
at module.exports (editor.bootstrap5.js:32:5)
at app.js:6:1`

That makes it better. I do get the Editor to show the buttons and can select a row to edit but the Editor form shows up at the bottom of the page with no/little CSS formatting.

Is there anything else I should fix?
Thanks

allan

That sounds like progress and that the library is at least loading. I don't know what __toCommonJS() is though. What does the browser show the code to be around there?

but the Editor form shows up at the bottom of the page with no/little CSS formatting.

Sounds like the Editor CSS hasn't been loaded in. You are using Bootstrap file, so you need to include editor.bootstrap5.css and also the Bootstrap 5 CSS itself.

Allan

BoSmith

The error is related to line 32 in editor.bootstrap5.js, still sounds like all is not loading correctly, I am including all that I have for configs files...

            if ( ! $.fn.dataTable.Editor ) {
                require('datatables.net-editor')(root, $);
            }

my app.css is:

// Fonts
@import url('https://fonts.bunny.net/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons.css';
@import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css";
@import 'datatables.net-select-bs5/css/select.bootstrap5.css';

@import "datatables.net-editor-bs5/css/editor.bootstrap5.css";

and my package.json is:

{
    "private": true,
    "scripts": {
        "postinstall": "node node_modules/datatables.net-editor/install.js ./Editor.zip",
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.3",
        "laravel-datatables-vite": "^0.5.2",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "sass": "^1.56.1",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "datatables.net-bs5": "",
        "datatables.net-buttons-bs5": "",
        "datatables.net-editor": "^2.1.0",
        "datatables.net-editor-bs5": "^2.0.3",
        "datatables.net-select-bs5": "^1.6.0"
    }
}

and my app.js is:

import './bootstrap';
import 'laravel-datatables-vite';

import Editor from "datatables.net-editor-bs5";

Editor(window, $);

lastly my vite.config.js is:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

allan

I wonder if the issue is the mix of require and ES modules from Vite. Are you able to create a repo that demonstrates the issue, so I can experiment with it a little please?

The error you are getting is from the CommonJS loader for Editor, but that shouldn't be getting executed if you are using Vite, which prefers the ES module file.

Also, other other thing to check is that datatables.net-editor's package.json file contains: "version": "2.1.0". If not 2.1, it would be worth updating.

Allan

BoSmith

Hi,
I am still somewhat confused, it just seems like it should be straight forward but there is something I am not seeing.
I have created a shared Git at:

https://github.com/BoSmith/G2_Shared.git

Thanks for any help in getting me going, I have been working on getting this going for several days now.
Thanks

allan

Many thanks for the repo! I've done:

npm install
npm run build
npm dev

and I get the Laravel + Vite page:

But I'm not sure how to see the Editor error. I've tried going to /users URL, but just get the same thing.

Could you let me know how I can see the Editor error please?

Thanks,
Allan

BoSmith

Hi Allan,
It is run by going to the localhost/users as you showed. I cannot even get what you created to run. But I have never seen the screen you are showing...
I downloaded a copy of the shared GIT and cannot make it run. Frustrating...I get this when running npm run dev:

  LARAVEL v9.51.0  plugin v0.7.4

  ➜  APP_URL: undefined
The following dependencies are imported but could not be resolved:

  popper.js (imported by /Users/bosmith/Downloads/G2_S/resources/js/bootstrap.js)

Are they installed?

looking at the reason I see this:

bosmith@Bos-MacBook-Pro G2_S % yarn install
➤ YN0000: ┌ Resolution step
➤ YN0002: │ laravel-datatables-vite@npm:0.5.2 doesn't provide @popperjs/core (p85060), requested by bootstrap
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 567ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 2s 747ms
➤ YN0000: Done with warnings in 3s 495ms
bosmith@Bos-MacBook-Pro G2_S % yarn explain peer-requirements p85060
➤ YN0000: laravel-datatables-vite@npm:0.5.2 doesn't provide @popperjs/core, breaking the following requirements:

➤ YN0000: bootstrap@npm:5.2.3 [842e4] → ^2.11.6 ✘

BoSmith

I just get a 500 Server Error on my browser with this shared version on GIT. Before I was getting this:

allan

I don't know a huge amount about Laravel unfortunately - I've been digging around a bit and I've realised that the vite server is actually only used for assets such as Javascript and CSS. The PHP / Laravel aspect still needs to happen elsewhere.

First create a .env file with APP_KEY=. Then run this series of commands:

composer install
php artisan key:generate
php artisan migrate
php artisan db:seed
php artisan serve

Allows the PHP server to run.

Next I removed most of bootstrap.js leaving only:

import _ from 'lodash';
window._ = _;

import 'bootstrap';

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

There DataTables and Editor stuff doesn't need to be in there.

Finally I go to http://127.0.0.1:8000/users and get:

I miss the days when web development was just a script tag in an HTML file sometimes...

Allan

BoSmith

I agree, I think the use of packages often makes things more difficult. Thanks for all of your help, but updating my shared GIT with your updates I still get the following. I just must have something on my machine that is killing me. It seems to be JS errors and the CSS not working... Just about to give up.

allan

I'll try it on a fresh checkout tomorrow morning and see what happens.

There are so many moving parts in these complex setups, that it is no wonder that things break.

Allan

allan

This is what I've just done with that repo:

git clone https://github.com/BoSmith/G2_Shared.git
cd G2_Shared
npm install
npm run build
composer install
echo "APP_KEY=" > .env
php artisan key:generate

vi config/database.php
# Edited values to login to my dev db

php artisan migrate
php artisan db:seed
php artisan serve

Then load: http://127.0.0.1:8000/users and I get:

It does give a 500 error when attempting to submit the form, but I haven't looked into that yet.

Allan

allan

Note, all of that was done on a Linux VM (Fedora 35).

BoSmith

Thanks Allan!
Not sure what I am doing wrong in the base Laravel project but I was able to get working what you demonstrated. I have hope now that I can make this all work.
Thanks for your help and patience!

BoSmith

One further note:
What turned out to be the problem was this, I was using:

npm run dev (which calls Vite to run its dev server) results in the CSS/JS not working as we saw in the screenshots.

Using:

npm run build (which calls Vite to run build for production) results in correct CSS/JS usage.

I cannot figure out why at this point, but at least this the fix.

allan

Yup - we'll take working. Great to hear that helped. CLI incantations can be messy

Allan

yajra

Playing with fresh Laravel 10 and encountered the same error. npm run build is working but npm run dev is not.

I was able to make npm run dev work using the code below:

app.js

import './bootstrap';
import 'laravel-datatables-vite';

import "datatables.net-editor";
import Editor from "datatables.net-editor-bs5";
Editor(window, $);

allan

Interesting! What version of Editor are you using there? Both from the datatables.net-editor/package.json file and DataTable.Editor.version? They should both be 2.1.0.

Allan