如何使用React构建Atlaskit编辑器

Question

我对 React 比较陌生，在构建简单的 Atlaskit 编辑器时遇到问题。我正在尝试使用 Vite 来做到这一点，详细信息如下：

// package.json
{
"name": "atlaskit-editor",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
},
"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@atlaskit/editor-core": "^185.8.0"
},
"devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.59.0",
    "@typescript-eslint/parser": "^5.59.0",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "typescript": "^5.0.2",
    "vite": "^4.3.9"
}
}

这里App.tsx

// App.txs
import { Editor } from "@atlaskit/editor-core";
import "./App.css";

function App() {
    return (
        <>
            <div>
                <Editor />
            </div>
        </>
    );
}

export default App;

主要.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

索引.tsx

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

输出为空白页，控制台中出现以下错误：

这是一个简单的例子，有人可以帮忙重现吗？ https://atlaskit.atlassian.com/packages/editor/editor-core/example/basic

Answer 1

您将流程对象声明为空项目以避免出现问题

如果您正在使用 vite 这可能适合您

import { defineConfig } from "vite";

const processEnv = {};

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    "process.env": processEnv,
  },
  // ...the rest of your config
});

如何使用React构建Atlaskit编辑器

问题描述投票：0回答：1

1个回答

最新问题

如何使用React构建Atlaskit编辑器

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1