gpt4 book ai didi

reactjs - 空项目中 forge-dataviz-iot-react-components 的 Autodesk React Forge 问题

转载 作者:行者123 更新时间:2023-12-05 02:39:35 28 4
gpt4 key购买 nike

如果安装官方npm package , 它有效。

但是根据official documentation并简单地将 import { Viewer } from "forge-dataviz-iot-react-components" (如 this 示例)包含在一个空的新 React 项目中(使用 npx create-react- app) 你会得到这个错误:

./node_modules/forge-dataviz-iot-react-components/client/components/BasicTree.jsx 107:16
Module parse failed: Unexpected token (107:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| if (node.children.length > 0) {
| return (
> <TreeItem
| id={`tree-node-${node.id}`}
| key={node.id}

我需要在 webpack 上添加哪个 loader 才能避免这个错误?

最佳答案

无法包含包 https://www.npmjs.com/package/forge-dataviz-iot-react-components在使用 npx create-react-app 制作的 React 项目中(希望 Autodesk 能尽快解决这个问题)。

您需要分两部分编辑 /node_modules/react-scripts/config/webpack.config.js:

一行关于PIXI

...
alias: {
'PIXI': "pixi.js/",

// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
// Allows for better profiling with ReactDevTools
...(isEnvProductionProfile && {
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling',
}),
...(modules.webpackAliases || {}),
},
...

还有关于/forge-dataviz-iot-react-component的另一部分

...
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [


{
test: /forge-dataviz-iot-react-component.*.jsx?$/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: ["@babel/react", ["@babel/env", { "targets": "defaults" }]],
plugins: ["@babel/plugin-transform-spread"]
}
},
],
exclude: path.resolve(__dirname, "node_modules", "forge-dataviz-iot-react-components", "node_modules"),
},



// TODO: Merge this config once `image/avif` is in the mime-db
// https://github.com/jshttp/mime-db
{
test: [/\.avif$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
mimetype: 'image/avif',
name: 'static/media/[name].[hash:8].[ext]',
},
},
...

在那之后 /node_modules/forge-dataviz-iot-react-components/client/components/Viewer.jsx 你会得到关于未定义的 Autodesk 变量的错误 easily fixable changing Autodeskwindow.Autodesk

虽然您不会看到任何其他错误,但该包将无法运行。

关于reactjs - 空项目中 forge-dataviz-iot-react-components 的 Autodesk React Forge 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69033665/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com