Have you ever experienced the uncaught reference error: package is not defined?
This means that as requests were sent by different packages and plugins, the web page loaded, but no package could be found. The order of execution – where elements are in the DOM lifecycle – on the web page is missing something. And that missing something is relied on by a script or function or similar that references it. The browser was not able to "catch" the error, hence uncaught reference.
There's an essential troubleshooting step to take to solve the problem.
No matter what language or framework you’re using, you want to make sure it is following all the steps of the DOM lifecycle, and that you provide any additional Content Delivery Network (CDN) links or libraries the plugin needs to load. And that these are available when they're referenced, or you've set up a callback to handle it.
Otherwise, you can run into a brick wall of errors.
Here's a real example
With JQuery, and when loading your website, you receive the following error message:
Uncaught ReferenceError: tinymce is not defined
at HTMLDocument.<anonymous> ((index):54)
at j (jquery.min.js:2)
at Object.add [as done] (jquery.min.js:2)
at m.fn.init.m.fn.ready (jquery.min.js:2)
at window.onload ((index):53
Annoying, and avoidable. Thankfully, it’s easy to pull up, course correct, and remove the error.
To get TinyMCE to build for you, though is the goal. That’s what this post explains - how to fix the uncaught reference error if you encounter it when adding TinyMCE to an app or website.
The integrations covered in this post:
- TinyMCE reference errors in jQuery
- Wordpress uncaught reference errors
- React uncaught reference errors
- Angular uncaught reference errors
Uncaught reference errors with TinyMCE
Tasks can’t start until another statement or function has finished. When TinyMCE is not working, and you get the uncaught reference erorr, the way to debug and fix the error starts with checking your JavaScript order of execution.
Where you configure your tinymce.init script matters.
While It’s important to check other sources of trouble like the scope of your variables, the error that's likely to need attention when it comes to configuring your rich text editor is the or order of execution - when the TinyMCE init happens on the page in the DOM lifecycle.
For instance:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TinyMCE Uncaught Reference error</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/Add-your-API-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: "#myTextarea",
</script>
</head>
<body>
<form method="post" action="dump.php">
<textarea id=’myTextarea’'></textarea>
</form>
<script>
tinymce.get('myTextarea').setContent("<p>Shouldn’t this be working?</p>");
</script>
</body>
</html>This script is not going to run because the text area is not yet available to recieve the setContent method. Situations like this are handled by adding set content to a trigger event on the page, like the init script running, or even building a listener to react when customers interact with an element.
Uncaught reference errors with TinyMCE and jQuery
But what about that jQuery example from earlier?
To continue our jQuery example, the solution is to check that the reference to the Tiny CDN appears in your application code. While you may have the JQuery wrapper complete, make sure the following appears in your JQuery:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/tinymce.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/jquery.tinymce.min.js"></script>
It’s a common mistake to include the jquery CDN links, but to forget the tinymce.min.js CDN link. Don’t forget to include it to solve the uncaught reference error.
Uncaught reference errors in Wordpress
But what if you’re using something other than jQuery?
For example, Wordpress powers more than 37% of all websites, so it’s likely you’ll need to know how to handle any uncaught reference errors when adding TinyMCE to Wordpress. Most issues can be solved by checking the wp-config.php and the class-wp-editor.php files, depending on which version of Wordpress you are using.
Adjusting the wp-config.php
If you’re using a version of Wordpress from the 3.0 and up series, investigate the wp-config.php file, and complete the following steps:
- Open the
wp-config.phpfile - Find the line
define('CONCATENATE_SCRIPTS', true); - Change
truetofalse - Save and reload the WordPress site.
Adjusting the class-wp-editor.php files
Another troubleshooting solution, for version 3.0 and up, is to adjust the class-wp-editor.php file:
- Open the
class-wp-editor.phpfile - Find the line
if ( $compressed ) {... - Locate the
$compressed = 1above this if statement - Set the 1 to 0
- Save and reload the WordPress site.
General Wordpress troubleshooting for TinyMCE
Solving the uncaught reference error for TinyMCE with WordPress can also be addressed by attempting the following:
- Revise the plugins loaded into your WordPress site, by switching them on and off one at a time – to confirm that there is no conflict between TinyMCE and another plugin.
- Check to see if you’re installing the TinyMCE plugin on a parent site, and then attempting to run the plugin on a child site. You’ll need to add the plugin to any separate subdomains.
- Clear your browser cache, and then clear your WordPress environment cache (you can use a plugin like WP Super Cache to clean server files).
Uncaught reference errors in Angular
Angular is another popular framework for building websites. The solution to uncaught reference errors when using an Angular app is to check for the TinyMCE CDN link.
You may have correctly loaded the TinyMCE rich text editor into the component.ts file, but the index.html file may be missing the TinyMCE CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5/tinymce.min.js"></script>;
Uncaught reference errors in React
Similar to the other frameworks, check the React application’s index.html file to make sure that the tinymce.min.js CDN is included in the application index.html file.
TinyMCE-react integration offers editor source configuration. It will first source the Tiny rich text editor globally, and will then check for the tinymceScriptSrc prop. Check on the React integration documentation for more detail.
Don’t forget to check your CDN links
The key troubleshooting tip to try when running into an uncaught reference error, is to check on the CDN link for the tinymce.min.js. Confirm that you have referenced TinyMCE, along with any wrappers or other integration scripts.
If you'd like to try TinyMCE with one of the framework integrations, start by signing up for a FREE API key, and then investigate the TinyMCE documentation.
