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信息。
共有3个答案
XmlViewer的CDN地址有问题吧? 访问不了啊
换一个吧 https://github.com/alissonmbr/react-xml-viewer#readme
我把你的代码改动了一下
将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>
修改内容：
1.将 let 改为 const，因为 xmlData 的值不会改变。
2.调整了下代码的缩进。
这个问题是因为 `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 安装或使用其他库。-
React PDF viewer 是用于查看 PDF 文档的 React 组件，采用 TypeScript 编写，完全基于 React hooks。 特性 支持密码保护的文档 缩放：支持自定义级别，例如实际大小、页面适合度和页面宽度 支持页面间导航 支持快速跳转到第一页和最后一页 搜索文本 预览页面缩略图 查看和导航目录 罗列和下载附件 支持文本选择和手动工具模式 支持不同的滚动模式 支持全屏模式
-
我在项目的根目录执行 yarn ios --simulator 'iPhone 14 Pro'命令时，报了如下的错误： React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: react-native-doc-viewer (to unlink
-
我们正在使用JPA从数据库加载一些内容。一些实体之间可能具有可选的关系，例如。 当数据库中存在此关联时，一切工作正常。如果不是，我将得到 我想要的是，如果关联不存在，则该字段为空，而不是例外。 非常感谢您的帮助！
-
使用RN创建了一个新的项目 node版本18 java Jdk 17 Android SDK Builds-tools 34.00 环境变量按照官方文档配置， 没有问题 使用npx命令创建并且打包成andriod后，将apk文件运行在夜神模拟器， 此时都是正常的，但是我按照React Navigation的文档引入路由之后就开始报错 下面是报错信息! 尝试了删除node_modules重新inst
-
当在我的WebApi GET操作中未找到某些内容时，我正在返回NotFind。伴随此响应，我想发送自定义消息和/或异常消息（如果有）。当前的的方法不提供传递消息的重载。 有什么办法可以做到这一点吗？或者我将不得不编写自己的自定义？
-
react中使用antd的组件运行报错Error: Invalid hook call和Uncaught TypeError: Cannot read properties of null (reading 'useContext') 网上搜索该问题，未能解决。希望得到解决方案。
-
使用labelInValue想获取value和label，能拿到结果了，但是这个警告报错如何解决 报错： Warning: value should in shape of { value: string | number, label?: ReactNode } when you set labelInValue to true 求过来人。。。
-
本文向大家介绍启动hadoop报如下错误，该如何解决？相关面试题，主要包含被问及启动hadoop报如下错误，该如何解决？时的应答技巧和注意事项，需要的朋友参考一下 --1.error org.apache.hadoop.hdfs.server.namenode.NameNode --找不到主类，应该是配置文件的hadoop的安装位置配置错误，对hadoop-env.sh文件进行检查修改 --2.o