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

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

BoSmithBoSmith Posts: 23Questions: 6Answers: 0
edited February 2023 in Editor

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin

    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

  • BoSmithBoSmith Posts: 23Questions: 6Answers: 0
    edited February 2023

    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

  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin

    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

  • BoSmithBoSmith Posts: 23Questions: 6Answers: 0

    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,
            }),
        ],
    });
    
  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin

    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

  • BoSmithBoSmith Posts: 23Questions: 6Answers: 0

    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

  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin

    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

  • BoSmithBoSmith Posts: 23Questions: 6Answers: 0

    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 ✘
    
    
  • BoSmithBoSmith Posts: 23Questions: 6Answers: 0

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

  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin

    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

  • BoSmithBoSmith Posts: 23Questions: 6Answers: 0

    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.

  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin

    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

  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin

    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

  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin
    Answer ✓

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

  • BoSmithBoSmith Posts: 23Questions: 6Answers: 0

    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!

  • BoSmithBoSmith Posts: 23Questions: 6Answers: 0

    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.

  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin

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

    Allan

  • yajrayajra Posts: 16Questions: 1Answers: 1

    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, $);
    
  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin

    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

Sign In or Register to comment.