TinyMce extensions like codesmaple failing to get initialized, r is not a constructor

I have a wordpress website and i have a page that allows users to create posts. I have configured tinymce to look for this certain field on the form and convert it into a tinymce field. THis works fine but some (most) of the plugins that come with tinymce dont work. I repeatedly get this error: Failed to initialize plugin: wordcount TypeError: r is not a constructor for each of the plugins i have added. i tried on a blank wp install but the error persisted

If you would like to see the issue first-hand, the issue occurs on this website: https://tropical.team/articles/create

Here is the error for one of the plugins taht don't work; codesample:

    at Ew (wp-tinymce.php?ver=2.0.0-dev1:2:330473)
    at Array.<anonymous> (wp-tinymce.php?ver=2.0.0-dev1:2:332223)
    at Object.jt [as each] (wp-tinymce.php?ver=2.0.0-dev1:2:29356)
    at Aw (wp-tinymce.php?ver=2.0.0-dev1:2:332173)
    at tN.<anonymous> (wp-tinymce.php?ver=2.0.0-dev1:2:333551)
    at Array.<anonymous> (wp-tinymce.php?ver=2.0.0-dev1:2:96969)
    at jt (wp-tinymce.php?ver=2.0.0-dev1:2:29356)
    at u (wp-tinymce.php?ver=2.0.0-dev1:2:96914)
    at n (wp-tinymce.php?ver=2.0.0-dev1:2:96402)
    at l.<computed>.l.<computed>.l.<computed>.o.onload (wp-tinymce.php?ver=2.0.0-dev1:2:96652)

I am unsure what could be causing this, as i have set up my init funciton correctly afaik:

jQuery(document).ready(function($){
    
    
        tinymce.init({
          selector: '.tinymce>div>div>textarea',
          suffix: ".min",
          height: 200,
          plugins: "codesample autosave code image link lists media preview searchreplace textcolor wordcount hr",
          autosave_restore_when_empty: true,
          autosave_retention: '60m',
          codesample_languages: [
            {text: 'HTML/XML', value: 'markup'},
            {text: 'JavaScript', value: 'javascript'},
            {text: 'CSS', value: 'css'},
            {text: 'PHP', value: 'php'},
            {text: 'Ruby', value: 'ruby'},
            {text: 'Python', value: 'python'},
            {text: 'Java', value: 'java'},
            {text: 'C', value: 'c'},
            {text: 'C#', value: 'csharp'},
            {text: 'C++', value: 'cpp'},
            {text: 'Markup', value: 'markup'},
            {text: 'Arduino', value: 'arduino'},
            {text: 'ARM Assembly', value: 'armasm'},
            {text: 'Batch', value: 'batch'},
            {text: 'Bash', value: 'bash'},
            {text: 'ASP.NET (C#)', value: 'aspnet'},
            {text: 'Brainfuck', value: 'brainfuck'},
            {text: 'JSON', value: 'json'},
            {text: 'Markdown', value: 'markdown'},
            {text: 'TypeScript', value: 'typescript'},
            {text: 'ASP.NET (C#)', value: 'aspnet'},
            {text: 'Rust', value: 'rust'}
          ],
          toolbar: 'preview searchreplace | codesample image link | lists hr | bold italic textcolor | h1 h2 h3 h4 | alignleft aligncenter alignright | bullist numlist outdent indent | undo red | wordcount-',
          // content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        });

    
});

Also very important, for some weird reason i have to paste this code into the console for it to work, the problem is that the funciton runs before this element is added to the page as it is added with js and not purely trough html and im unsure how to account for that.

Solution

You specify plugins using an array...

tinymce.init({
  // ...
  plugins: ["codesample", "autosave", "code", "image", "link", "lists", "media", "preview", "searchreplace", "textcolor", "wordcount", "hr", "lists"],
  // ...
});

... whereas TinyMCE expects a string with blank spaces.

tinymce.init({
  // ...
  plugins: "codesample autosave code image link lists media preview searchreplace textcolor wordcount hr lists",
  // ...
});

EDIT 1

Also, be careful. In the code above, the lists plugin is declared twice...

EDIT 2

I found this in TinyMCE 6 documentation, so indeed, I believe your problem is elsewhere...

Here is my JSFiddle with JavaScript/jQuery to test TinyMCE 5 integration, outside a WordPress context.

As you can see, it is working.

Now I think the issue is on the WordPress side, especially if we take a closer look at this wp-tinymce.php file which seems a bit old:

Not used in core since 5.1.

This is a back-compat for plugins that may be using this method of loading directly.

How did you integrate TinyMCE? Did you use a plugin, like those referenced here or there? What is the version of your WordPress install? What is the exact version of TinyMCE?