无法在Observable Framework中导入本地React组件JS文件求助

问题背景 #

我正尝试将自行创建的React组件引入Observable Framework，文件结构如下：

• Observable Markdown文件：my_project/docs/test.md
• React组件文件：my_project/docs/components/MyComponent.js
• 渲染逻辑文件：my_project/docs/components/renderComponent.js

相关文件内容 #

1. MyComponent.js

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Hello, Observable!</h1>
      <p>This is a React component embedded in Observable Markdown.</p>
    </div>
  );
}

export default MyComponent;

2. renderComponent.js

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

export function renderMyComponent(container) {
  ReactDOM.render(<MyComponent />, container);
}

报错信息 #

服务器控制台出现语法错误：

GET /_import/components/renderComponent.js?sha=e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855
GET /_observablehq/stdlib/inputs.css
GET /_npm/isoformat@0.2.1/_esm.js
GET /_npm/canvas-confetti@1.9.3/_esm.js
GET /_observablehq/stdlib/inputs.js
GET /_npm/htl@0.3.1/_esm.js
SyntaxError: Unexpected token (6:18)
    at pp$4.raise (file:///Users/senthil/Library/CloudStorage/Dropbox/Parent/workspace/test_observable/quicktest/node_modules/acorn/dist/acorn.mjs:3567:13)
    at pp$9.unexpected (file:///Users/senthil/Library/CloudStorage/Dropbox/Parent/workspace/test_observable/quicktest/node_modules/acorn/dist/acorn.mjs:766:8)
    at pp$5.parseExprAtomDefault (file:///Users/senthil/Library/CloudStorage/Dropbox/Parent/workspace/test_observable/quicktest/node_modules/acorn/dist/acorn.mjs:2930:8)
    at pp$5.parseExprAtom (file:///Users/senthil/Library/CloudStorage/Dropbox/Parent/workspace/test_observable/quicktest/node_modules/acorn/dist/acorn.mjs:2925:17)
    at pp$5.parseExprSubscripts (file:///Users/senthil/Library/CloudStorage/Dropbox/Parent/workspace/test_observable/quicktest/node_modules/acorn/dist/acorn.mjs:2709:19)
    at pp$5.parseMaybeUnary (file:///Users/senthil/Library/CloudStorage/Dropbox/Parent/workspace/test_observable/quicktest/node_modules/acorn/dist/acorn.mjs:2675:17)
    at pp$5.parseExprOps (file:///Users/senthil/Library/CloudStorage/Dropbox/Parent/workspace/test_observable/quicktest/node_modules/acorn/dist/acorn.mjs:2602:19)
    at pp$5.parseMaybeConditional (file:///Users/senthil/Library/CloudStorage/Dropbox/Parent/workspace/test_observable/quicktest/node_modules/acorn/dist/acorn.mjs:2585:19)
    at pp$5.parseMaybeAssign (file:///Users/senthil/Library/CloudStorage/Dropbox/Parent/workspace/test_observable/quicktest/node_modules/acorn/dist/acorn.mjs:2552:19)
    at pp$5.parseExprList (file:///Users/senthil/Library/CloudStorage/Dropbox/Parent/workspace/test_observable/quicktest/node_modules/acorn/dist/acorn.mjs:3438:18) {
  pos: 168,
  loc: Position { line: 6, column: 18 },
  raisedAt: 169
}

我是JS/React/Observable新手，需要解决这个报错，或者提供Observable Framework中导入本地JS文件的可运行示例。

解决办法与可运行示例 #

报错原因 #

Observable Framework默认不直接解析JSX语法，你的renderComponent.js第6行的<MyComponent />属于JSX，未经编译就被解析，导致语法错误。

方案1：改用React.createElement替代JSX #

修改两个组件文件，去掉JSX语法，改用React原生API创建元素：

修改后的MyComponent.js

import React from 'react';

function MyComponent() {
  return React.createElement('div', null,
    React.createElement('h1', null, 'Hello, Observable!'),
    React.createElement('p', null, 'This is a React component embedded in Observable Markdown.')
  );
}

export default MyComponent;

修改后的renderComponent.js（适配React 18+）

import React from 'react';
import ReactDOM from 'react-dom/client';
import MyComponent from './MyComponent';

export function renderMyComponent(container) {
  const root = ReactDOM.createRoot(container);
  root.render(React.createElement(MyComponent));
}

方案2：使用Observable官方React集成（推荐） #

Observable Framework支持直接识别.jsx文件并编译JSX，无需手动写渲染逻辑：

1. 确保已安装依赖（未安装则执行）：

npm install react react-dom

2. 将MyComponent.js重命名为MyComponent.jsx，保留原有JSX内容不变：

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Hello, Observable!</h1>
      <p>This is a React component embedded in Observable Markdown.</p>
    </div>
  );
}

export default MyComponent;

3. 在test.md中直接导入并使用组件：

---
title: Test React Component
---

import MyComponent from "./components/MyComponent.jsx";

# My React Component

{MyComponent()}

方案3：普通本地JS文件导入示例 #

如果只是需要导入非React的本地JS文件，可参考以下示例：

1. 创建docs/utils/math.js：

export function add(a, b) {
  return a + b;
}

export const PI = 3.14159;

2. 在test.md中导入使用：

---
title: Test Local JS
---

import { add, PI } from "./utils/math.js";

# Local JS Test

2 + 3 = {add(2, 3)}

PI is approximately {PI}

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