[SOLVED] Why do I get a TypeError when importing @wordpress/element

Why do I get a TypeError when importing @wordpress/element

Same problem as in this question.

But now I'm importing '@wordpress/element' instead of 'react-dom/client' because I've read that you can also use this, as it builds on react.

Now I get a different Error in the console when I write this: import { createRoot } from '@wordpress/element';

Error:

[Error] TypeError: undefined is not an object (evaluating 'window["wp"]["element"]')
    @wordpress/element (index.js:21)
    __webpack_require__ (index.js:45)
    (anonyme Funktion) (index.js:102:96)
    (anonyme Funktion) (index.js:109)
    Globaler Code (index.js:110)

I think this problem is occurring in this file: module.exports = window["wp"]["element"];

which is created automatically.

My goal is just to import createRoot from react-dom and I don't know why it won't work.

(But again I'm a beginner and maybe thinking completely wrong)

Solution

So what you need to do is import the index.asset.php, and pass its dependencies into your script dependency array:



function my_enq_scripts(){
   $inc = require 'build/index.asset.php';
   wp_enqueue_script('my-script-name', '/build/index.js', $inc['dependencies'], $inc['version']);
}

add_action('wp_enqueue_scripts','my_enq_scripts');

you can also make a more development-friendly version like:

$version = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? time() : $inc['version'];
wp_enqueue_script('my-script-name', '/build/index.js', $inc['dependencies'], $version);