यदि आप आधिकारिक npm पैकेज स्थापित करते हैं, तो यह काम करता है (https://www .npmjs.com/package/forge-dataviz-iot-react-components)।

लेकिन https://forge पर आधिकारिक दस्तावेज के अनुसार। autodesk.com/en/docs/dataviz/v1/developers_guide/npm_packages/react_components/ और केवल import { Viewer } from "forge-dataviz-iot-react-components" सहित (जैसे https://github.com/Autodesk-Forge/forge-dataviz-iot- Reference-app/blob/main/client/pages/Heatmap.jsx) एक खाली नए रिएक्ट प्रोजेक्ट (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}

इस त्रुटि से बचने के लिए मुझे वेबपैक पर कौन सा लोडर जोड़ने की आवश्यकता है?

2
Francesco Orsi 2 सितंबर 2021, 19:01

2 जवाब

सबसे बढ़िया उत्तर

पैकेज को शामिल करना संभव नहीं है https://www.npmjs. com/package/forge-dataviz-iot-react-components npx create-react-app के साथ बनाई गई एक प्रतिक्रिया परियोजना के अंदर (उम्मीद है कि Autodesk जल्द ही इस समस्या को ठीक करने जा रहा है)।

आपको /node_modules/react-scripts/config/webpack.config.js को 2 भागों में संपादित करना होगा:

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 पर आपको window.Autodesk के साथ अपरिभाषित Autodesk चर आसानी से ठीक करने योग्य Autodesk में त्रुटियाँ मिलेंगी।

हालांकि आपको कोई अन्य त्रुटि नहीं दिखाई देगी, पैकेज काम नहीं करेगा।

2
Francesco Orsi 4 सितंबर 2021, 15:00

मैंने हाल ही में इस पैकेज की कोशिश की और मुझे वही समस्या मिली। इसलिए मैंने सीआरए के बिना स्क्रैच से एक रिएक्ट प्रोजेक्ट बनाया और इस रेपो के webpack.config.js का पालन किया: फोर्ज डेटाविज़ IOT संदर्भ ऐप

यहाँ मेरी 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',
    }),
  ],
};
1
Dharman 3 सितंबर 2021, 12:12