Autodesk React Forge problem with forge-dataviz-iot-react-components in a empty project

Question

If you install the official npm package, it works.

But according to the official documentation and simply including import { Viewer } from "forge-dataviz-iot-react-components" (like in this example) in a empty new react project (using npx create-react-app) you will get this error:

./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}

Which loader do I need to add on webpack to avoid this error?

Answer 1

it is not possible to include the package https://www.npmjs.com/package/forge-dataviz-iot-react-components inside a react project made with npx create-react-app (hoping Autodesk is going to fix this problem soon).

You need to edit /node_modules/react-scripts/config/webpack.config.js in 2 parts:

one line about 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 || {}),
      },
...

and another part about /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]',
              },
            },
...

after that on /node_modules/forge-dataviz-iot-react-components/client/components/Viewer.jsx you will get errors about undefined Autodesk variable easily fixable changing Autodesk with window.Autodesk.

Although you will not see any other errors, the package will not work.

Answer 2

I recently tried this package and I got the same problem. So I created a React project from scratch without CRA and followed the webpack.config.js of this repo : Forge Dataviz IOT Reference App

Here's my webpack.config.js file :

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',
    }),
  ],
};

Update :

If you want to use CRA, you can customise your webpack config using Customize-CRA and create a config-overrides.js like this :

/* 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/')
    })
  );

I managed to make this work on a fresh CreateReactApp project, so you should be able to make it working on your project.