How to Fix React Not Defined Error in MapPress Plugin

Troubleshooting the “React is not defined” Error

A script on your site is trying to use React before it’s available. Let’s look at a few things you can check:

1. Confirm React Is Enqueued

• Open your theme’s functions.php or your plugin file and look for code like this:

wp_enqueue_script(
  'react',
  'https://unpkg.com/react@17/umd/react.production.min.js',
  array(),
  '17.0.0',
  true
);
wp_enqueue_script(
  'react-dom',
  'https://unpkg.com/react-dom@17/umd/react-dom.production.min.js',
  array('react'),
  '17.0.0',
  true
);
wp_enqueue_script(
  'mappress-script',
  plugin_dir_url(__FILE__) . 'index_mappress.js',
  array('react', 'react-dom', 'jquery'),
  '2.94.15',
  true
);

Make sure the react and react-dom handles appear before your plugin’s script and that they match the React version you need.

2. Rule Out Plugin or Theme Conflicts

• Deactivate other plugins one at a time and switch to a default theme to see if the error goes away.

3. Check for Multiple React Versions

Search your codebase for other calls to enqueue React. Loading more than one version can break things.

4. Inspect the Script Loading Order

In functions.php, you can dump the script queue in the footer to verify order:

add_action('wp_footer', function() {
  wp_print_scripts();
});

5. JSX and Babel

If index_mappress.js uses JSX, confirm you have a build step (Webpack, Babel) that transpiles it to plain JavaScript.

6. Debug with Console Logs

Add this at the top of your plugin script to see if React is in scope:

console.log('React loaded:', typeof React);

These steps should get you closer to solving the issue.

When React Is Global but the Plugin Can’t See It

If you can type React in the console and get the library, yet MapPress complains it’s undefined, check these areas.

Scope Isolation

Some plugins wrap their code so globals aren’t visible. If MapPress uses Webpack, look for an externals section in webpack.config.js:

externals: {
  react: 'React',
  'react-dom': 'ReactDOM'
}

This tells Webpack to expect React globally rather than bundling it.

Timing (Race Conditions)

You might see React enqueued, yet MapPress runs too soon. Make sure your plugin’s script depends on React and ReactDOM:

wp_enqueue_script(
  'mappress-script',
  plugin_dir_url(__FILE__) . 'index_mappress.js',
  array('react', 'react-dom'),
  '2.94.15',
  true
);

iFrame Context

If MapPress injects an iframe, React must load inside that frame too.

Force a Global React (Last Resort)

Add this to your theme or a small plugin to attach React to window after it loads:

add_action('wp_footer', function() {
  echo '<script>window.React = React;</script>';
});

Further Debugging

• Insert console.log('In MapPress:', typeof React); at the very top of index_mappress.js.
• Review MapPress docs for any notes on React dependencies.

By checking how the plugin is bundled and ensuring React is truly global in the right scope, you’ll get MapPress loading smoothly with React available.