react-xml-viewer 报错：Start tag expected, '<' not found 如何解决？

react-xml-viewer 使用报错 error on line 1 at column 1: Start tag expected, '<' not found，帮忙看下啥问题, 因为单页使用，没有npm install 那些，直接 cdn引入了，是不能这么用么，还是用法上有什么问题呢？

源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@lionelbr/react-xml-view@1.0.1/lib/XmlViewer.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const XmlViewer = window['react-xml-view'].default;
        const App = () => {
            let xmlData = '<?xml version="1.0" encoding="UTF-8"?><hello id="aa">World</hello>';
            return React.createElement('div', null, 
                React.createElement(XmlViewer, { xml: xmlData })
            );
        };
        ReactDOM.render(React.createElement(App), document.getElementById('root'));
    </script>
</body>
</html>

报错如下:

<parsererror style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black">
<h3>
This page contains the following errors:
</h3>
<div style="font-family:monospace;font-size:12px">
error on line 1 at column 1: Start tag expected, '<' not found
</div>
<h3>
Below is a rendering of the page up

正常展示xml信息。

react

阅读 1.6k

AI BotBETA

这个问题是因为 `react-xml-viewer` 库的引用方式不正确导致的。你尝试通过 CDN 引入了一个非 UMD/CommonJS 格式的库（可能是针对 npm 环境的打包格式），这导致在浏览器环境中无法正确解析和使用。

**解决方法**：

1. **使用正确的 CDN 链接**：确保你使用的 CDN 链接是针对浏览器环境的。然而，根据我的检查，`react-xml-viewer` 在 CDN 上可能没有提供适合直接在 HTML 中使用的版本。通常，React 组件库是为 npm/yarn 设计的，并不总是提供浏览器兼容的 CDN 版本。

2. **使用 npm 安装**：尽管你说不想使用 npm，但这是最推荐的方法，因为大多数 React 组件和库都是按照这种方式设计的。你可以在本地项目中初始化一个 npm 环境，然后安装 `react-xml-viewer`。

npm init -y
npm install @lionelbr/react-xml-viewer


然后在你的项目中使用这个库。

3. **手动构建库**：如果你有访问到库的源代码，你可以尝试自己构建一个适合浏览器使用的版本。这通常涉及到设置 Webpack 或其他构建工具来打包库。

4. **查找替代库**：如果 `react-xml-viewer` 不能满足你的 CDN 需求，你可以查找其他提供 CDN 支持的 XML 查看器库。

由于直接使用 CDN 引入 `react-xml-viewer` 似乎不可行，建议考虑使用 npm 安装或使用其他库。

2 个回答

得票最新

Seven

1.5k127

发布于
12 月 10 日广东

更新于
12 月 10 日

`我把你的代码改动了一下`

将let 改为 const ，因为 const 用于声明常量，即值不会改变的变量。在你写的代码中，xmlData 的值在整个程序运行过程中不会被重新赋值，所以使用 const 更合适。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@lionelbr/react-xml-view@1.0.1/lib/XmlViewer.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const XmlViewer = window['react-xml-view'].default;
        const App = () => {
            const xmlData = '<?xml version="1.0" encoding="UTF-8"?><hello id="aa">World</hello>';
            return React.createElement('div', null, 
                React.createElement(XmlViewer, { xml: xmlData })
            );
        };
        ReactDOM.render(React.createElement(App), document.getElementById('root'));
    </script>
</body>
</html>