Autodesk React Forge 问题与 forge-dataviz-iot-react-components 在空项目中

Posted 2023-03-16

【中文标题】Autodesk React Forge 问题与 forge-dataviz-iot-react-components 在空项目中

【英文标题】：Autodesk React Forge problem with forge-dataviz-iot-react-components in a empty project

【发布时间】：2021-11-01 03:08:19

【问题描述】：

如果你安装官方的npm package，就可以了。

但根据official documentation 并简单地将import Viewer from "forge-dataviz-iot-react-components"（如this 示例）包含在一个空的新反应项目中（使用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 来避免这个错误？

【参考方案1】：

我最近尝试了这个包，我遇到了同样的问题。 所以我从头开始创建了一个没有 CRA 的 React 项目，并遵循了这个 repo 的webpack.config.js：Forge Dataviz IOT Reference App

这是我的webpack.config.js 文件：

const path = require('path');
const htmlWebPackPlugin = require('html-webpack-plugin');

module.exports = 
  output: 
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  ,
  resolve: 
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    alias: 
      react: path.join(__dirname, 'node_modules', 'react'),
      PIXI: path.resolve(__dirname, "node_modules/pixi.js/"),
    ,
  ,
  devServer: 
    port: process.env.PORT || 3000
  ,
  module: 
    rules: [
      
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
           loader: "babel-loader" 
        ]
      ,
      
        test: /forge-dataviz-iot-react-component.*.jsx?$/,
        use: [
          
            loader: "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"),
      ,
      
        test: /\.css$/,
        use: [
          
            loader: 'style-loader',
          ,
          
            loader: 'css-loader',
          ,
        ],
      ,

      
        test: /\.svg$/i,
        use: 
          loader: "svg-url-loader",
          options: 
            // make loader to behave like url-loader, for all svg files
            encoding: "base64",
          ,
        ,
      ,
    ],
  ,
  plugins: [
    new HtmlWebPackPlugin(
      template: './src/index.html',
    ),
  ],
;

更新：

如果你想使用 CRA，你可以使用 Customize-CRA 自定义你的 webpack 配置并像这样创建一个 config-overrides.js：

/* config-overrides.js */
const path = require("path");
 
const 
    override,
    addExternalBabelPlugins,
    babelInclude,
    babelExclude,
    addWebpackAlias
 = require("customize-cra");



module.exports = override(
    babelInclude([
        path.resolve("src"), // make sure you link your own source
        path.resolve("node_modules")
      ]),
    babelExclude([path.resolve("node_modules/forge-dataviz-iot-react-components/node_modules")]),
    addWebpackAlias(
        ['PIXI']: path.resolve(__dirname, 'node_modules/pixi.js/')
    )
  );

我设法在一个新的 CreateReactApp 项目上完成了这项工作，所以你应该能够让它在你的项目上工作。

【讨论】：

谢谢你，你的 PIXI 代码行帮助我找到了一个使用 npx create-react-app 制作的标准包的解决方案（之前我只是从他们的 webpack 中复制了另一部分。配置）。不幸的是，我从官方的 react 包做了一个大项目.. 直到 Autodesk 不打算让他们的代码与之兼容，我不能使用这个功能（我真的很失望，因为我认为这是一个常见的问题，我可以'不明白 Autodesk 从一开始就不关心它）:)

我用自定义 CRA webpack 配置的方法更新了我的回复；)

【参考方案2】：

不可能将包 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 变量的错误，可轻松修复将 Autodesk 更改为 window.Autodesk。

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