search

iTwin / viewer

Monorepo that contains the iTwin Viewer npm packages and their related packages
MIT License
24 stars 15 forks source link

Viewer application failing to run built version of app #283

Closed Jake-Screen closed 1 year ago

Jake-Screen commented 1 year ago

Initially reported by @am-work-1 and also reported by EarthCam

When working with a viewer application, it works properly when starting in dev mode, by running npm start. When running npm run build and then trying to serve the built application, the application will succeed at building but fail when running. The error that occurs is that SparseTree.ts from components-react fails to load properly. The application will will get to the end of the index.tsx file before throwing the error seen below.

minify-error

It was found that the issue is occurring when the viewer does not use tree-widget from @itwin/viewer-components-react. If tree-widget is initialized, the above error does not occur.

From investigation by @saskliutas, If tree-widget from viewer-components-react is commented out it tries to remove all unused code from the final bundle. Code from components-react that is related to ControlledTree is then removed. However, there are some leftover code that is causing this error. It has been found that unless the user initializes tree-widget from viewer-components, then the minimizer from react-scripts does not remove code related to ControlledTree from the bundle and everything works fine.

Reproducible steps:

  1. create a new viewer application with npx create-react-app@latest my-app-name --template @itwin/web-viewer --scripts-version @bentley/react-scripts
  2. Set up .env file according to the README.md
  3. run npm run build
  4. run serve -s build, will work properly
  5. In App.tsx, comment out code related to TreeWidget and its UI provider
  6. run npm run build
  7. run serve -s build, will start up, but fail before loading any components

Currently known ways to workaround: Modify node_modules/@bentley/react-scripts/config/webpack.config.js by adding module: true to the terserOptions object path

terser_option

Another way is by setting the environment variable of "DISABLE_TERSER" to true, this allows the built application to run properly. This can be set in the command line, or in the .env file env_screenshot

Jake-Screen commented 1 year ago

@Alfonso-Martello @aruniverse

saskliutas commented 1 year ago

This should by fixed with "@itwin/components-react": 4.2.1