Suggestion: provide an example react project containing necessary configs like webpack.config.js

pkulijing commented 2 years ago

I've been able to understand the basic concepts of worldview following the tutorial (which is well written and organized) but when I attempted to use worldview locally, a lot of config issues prevented the code from running correctly. The problem is made worse by the break change of webpack 5, because a lot of solutions for webpack 4 no longer work. Plus, some of the problems are nontrivial even for front end experts familiar with webpack, such as the config for draco3d.

So I think it would be better to provide an example project to start with. I personally spent 2 days figuring out all the config issues. I hereby provide the webpack.config.js file that finally worked:

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}),
    new webpack.DefinePlugin({process: {env: {}}}) 
  ],
  resolve: {
    modules: [__dirname, 'src', 'node_modules'],
    extensions: ['.js'],
    fallback: {
      "path": require.resolve("path-browserify"),
      "fs": false
    }
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.png|svg|jpg|gif$/,
        use: ['file-loader'],
      },
      {
        test: /draco_decoder\.wasm$/,
        loader: 'file-loader',
        type: 'javascript/auto',
        options: {
          publicPath: "dist/"
        }
      }
    ]
  }
}

Some references that helped:

raghavpillai commented 2 years ago

Hey! I'm pretty new to this, but I'm still getting this: ./node_modules/draco3d/draco_decoder.wasm Module parse failed: magic header not detected You may need an appropriate loader to handle this file type. Error: magic header not detected

I'm just trying to get the beginning template working, do you have a copy that I can see?

pkulijing commented 2 years ago

Hey! I'm pretty new to this, but I'm still getting this: ./node_modules/draco3d/draco_decoder.wasm Module parse failed: magic header not detected You may need an appropriate loader to handle this file type. Error: magic header not detected

I'm just trying to get the beginning template working, do you have a copy that I can see?

Hi, the message says clearly that it's a loader issue. Have you tried adding the rule concerning darco in my webpack file? i.e. this part

{
  test: /draco_decoder\.wasm$/,
  loader: 'file-loader',
  type: 'javascript/auto',
  options: {
    publicPath: "dist/"
  }
}

DornAres commented 2 years ago

Hey, also new to this React stuff. Simply copypasting and replacing the webpack.config.js in node_modules/react_scripts/config/ doesn't do it for me - npm start won't run anymore. After googling, it seems it's still not easy to change anything after using create-app. Even after ejecting and then replacing the content from the configurable config/webpack.config.js it doesn't start anymore.

Is there by any chance a webpackDevServer.config.js depency, meaning that file also needs to change?

Also, concerning the Draco3D changes (setting the variables), am I right in assuming that this means only the webpack solution will work with the visualizer, since draco3D is basically broken and needs to be modified, which is only possible when having the library locally?

Thanks for your efforts in making this (probably) awesome library work for non-ROS uses!

cruise-automation / webviz

Suggestion: provide an example react project containing necessary configs like webpack.config.js #699