search

visgl / deck.gl

WebGL2 powered visualization framework
https://deck.gl
MIT License
12.05k stars 2.08k forks source link

[Bug] Webpack bundle error #8580

Closed andylim0221 closed 6 months ago

andylim0221 commented 6 months ago

Description

Facing webpack bundle issue:

ERROR in ./node_modules/@loaders.gl/core/node_modules/@probe.gl/log/dist/utils/hi-res-timestamp.js 7:27
Module parse failed: Unexpected token (7:27)
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
|     let timestamp;
|     if (isBrowser() && window.performance) {
>         timestamp = window?.performance?.now?.();
|     }
|     else if ('hrtime' in process) {
 @ ./node_modules/@loaders.gl/core/node_modules/@probe.gl/log/dist/index.js 12:0-64 12:0-64
 @ ./node_modules/@loaders.gl/core/dist/esm/lib/utils/log.js
 @ ./node_modules/@loaders.gl/core/dist/esm/lib/api/select-loader.js
 @ ./node_modules/@loaders.gl/core/dist/esm/index.js
 @ ./node_modules/@deck.gl/layers/dist/esm/icon-layer/icon-manager.js
 @ ./node_modules/@deck.gl/layers/dist/esm/icon-layer/icon-layer.js
 @ ./node_modules/@deck.gl/layers/dist/esm/index.js
 @ ./src/pages/Dashboard/useIncidentLayer.js

Flavors

Expected Behavior

The webpack should be working.

Steps to Reproduce

node version: lts/gallium / v16.20.2 package.json:

  "dependencies": {
    "@apollo/react-hooks": "^4.0.0",
    "@deck.gl/aggregation-layers": "^8.4.11",
    "@deck.gl/core": "^8.4.11",
    "@deck.gl/layers": "^8.4.11",
    "@deck.gl/react": "^8.4.11",
    "@loadable/component": "^5.13.1",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@react-pdf/renderer": "^1.6.12",
    "@sentry/react": "^5.24.2",
    "@sentry/tracing": "^5.24.2",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-link-http": "^1.5.17",
    "aws-amplify": "^5.3.5",
    "aws-appsync-auth-link": "^3.0.7",
    "clsx": "^1.1.1",
    "final-form-calculate": "^1.3.2",
    "fscreen": "^1.0.2",
    "graphql": "^15.2.0",
    "idle-js": "^1.2.0",
    "inflection": "^1.12.0",
    "latlon-geohash": "^2.0.0",
    "lodash": "^4.17.19",
    "mapbox-gl": "^1.11.0",
    "material-table": "^1.69.3",
    "moment": "^2.27.0",
    "nanoid": "^4.0.2",
    "pad": "^3.2.0",
    "page-lifecycle": "^0.1.2",
    "prop-types": "^15.7.2",
    "ra-aws-amplify": "^0.1.4",
    "ra-core": "^3.6.2",
    "ra-i18n-polyglot": "^3.6.1",
    "ra-language-english": "^3.6.1",
    "ra-ui-materialui": "^3.8.5",
    "random-location": "^1.1.3",
    "react": "^16.10.1",
    "react-admin": "^3.19.11",
    "react-admin-amplify": "^1.3.3",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "^16.13.1",
    "react-ellipsis-component": "^1.2.0-alpha.0",
    "react-error-boundary": "^3.1.0",
    "react-final-form": "^6.5.9",
    "react-helmet": "^6.1.0",
    "react-highlighter": "^0.4.3",
    "react-map-gl": "^6.1.11",
    "react-mapbox-gl": "^4.8.6",
    "react-player": "^2.5.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "rxjs": "^6.6.3",
    "sass": "^1.62.1",
    "sass-loader": "^10.2.0",
    "screenfull": "^5.0.2",
    "socket.io-client": "^3.0.3",
    "title-case": "^3.0.2"
  },
  "peerDependencies": {
    "react": "^16.10.1"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/node": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-flow-strip-types": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/polyfill": "^7.6.0",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@svgr/webpack": "^5.4.0",
    "babel-eslint": "^10.0.2",
    "babel-loader": "^8.0.6",
    "babel-plugin-import": "^1.12.2",
    "clean-webpack-plugin": "^3.0.0",
    "compression-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^6.0.3",
    "css-loader": "^3.2.0",
    "dotenv-webpack": "^1.7.0",
    "eslint": "^6.2.1",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-import-resolver-webpack": "^0.12.2",
    "eslint-plugin-flowtype": "^4.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-node": "^9.1.0",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^1.7.0",
    "eslint-plugin-standard": "^4.0.1",
    "file-loader": "^6.0.0",
    "flow-bin": "^0.106.0",
    "flow-coverage-report": "^0.6.1",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^3.1.0",
    "image-webpack-loader": "^6.0.0",
    "less": "^3.11.3",
    "less-loader": "^6.1.3",
    "lint-staged": "^9.4.1",
    "moment-locales-webpack-plugin": "^1.2.0",
    "node-sass": "^6.0.1",
    "npm-check": "^5.9.0",
    "react-hot-loader": "^4.12.21",
    "retire": "^2.0.3",
    "serve": "^11.2.0",
    "style-loader": "^1.0.0",
    "terser-webpack-plugin": "^3.0.6",
    "webpack": "^4.41.0",
    "webpack-bundle-analyzer": "^3.5.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.1",
    "webpack-merge": "^4.2.2",
    "webpack-node-externals": "^3.0.0",
    "worker-loader": "^2.0.0"
  }

Environment

Logs

No response

Pessimistress commented 6 months ago

I assume you are using Webpack 4, which is outdated and does not support optional chaining. If you don't want to upgrade Webpack, you can either

Our modules are only lightly transpiled to give users more control of their bundle. And optional chaining is supported by all undead browsers.