导入@wordpress/element时出现TypeError的问题求助

问题本质 #

你碰到的错误核心是WordPress全局wp.element对象还未加载，就被你的代码提前引用了。@wordpress/element在浏览器环境下依赖WordPress预先注入的全局wp对象，你的代码执行时机早于这个全局对象的加载完成时间，才会抛出undefined is not an object的报错。

可行解决方案 #

方案1：通过WordPress脚本依赖机制确保加载顺序 #

在WordPress主题或插件开发中，不能直接裸导入@wordpress/element，必须通过官方的脚本注册机制声明依赖：

wp_enqueue_script(
    '你的自定义脚本名称',
    get_template_directory_uri() . '/js/你的脚本文件.js',
    array( 'wp-element' ), // 明确声明依赖wp-element
    '1.0.0',
    true
);

这样WordPress会先加载wp-element对应的核心脚本，确保全局wp.element存在后，再执行你的自定义代码。

方案2：用@wordpress/scripts规范构建流程 #

如果用Webpack/Rollup等现代构建工具，直接使用官方的@wordpress/scripts工具链，它会自动处理WordPress包的全局变量注入：

1. 安装依赖：

npm install @wordpress/scripts --save-dev

2. 修改package.json的脚本命令：

{
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  }
}

3. 之后正常导入即可，构建工具会自动处理全局变量的依赖问题：

import { createRoot } from '@wordpress/element';

方案3：直接使用原生React DOM（若无需WordPress封装） #

如果你的需求只是用createRoot，也可以回到最初的react-dom/client，只要正确安装依赖即可：

npm install react react-dom

然后正常导入：

import { createRoot } from 'react-dom/client';

错误原因补充 #

你提到的自动生成代码module.exports = window["wp"]["element"];，是@wordpress/element在浏览器环境下的导出逻辑——它默认全局wp.element已经存在。但你的代码执行时这个全局对象还未加载，才触发了报错。本质就是脚本加载顺序错误导致的依赖缺失。

内容的提问来源于stack exchange，提问作者Bylxly