Project failed to compile using node v16.13.1 and npm v8.1.2

[Loufi1]

Expected Behavior

The project is launched after executing the npm start command.

Current Behavior

The projet failed to compile with the error message

./node_modules/value-or-promise/build/module/ValueOrPromise.js 8:7
Module parse failed: Unexpected token (8:7)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| };
| export class ValueOrPromise {
>   state;
|   constructor(executor) {
|     let value;

Steps to Reproduce

1. Install node v16.13.1 and npm v8.1.2
2. Clone flex-ui-sample from the main branch.
3. Runnpm install at the root of the project.
4. Run npm start at the root of the project.

Context (Environment)

node: v16.13.1

npm: v8.1.2

package.json:

{
  "name": "@twilio/flex-ui-sample",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@twilio/flex-ui": "^2.0.0-beta.1",
    "history": "4.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

[quentinhayot]

The issue stays the same with updated versions of @twilio/flex-ui and react-scripts.

I was able to compile and start the project after doing the following, which is clearly not clean:

1. Adding this to package.json

  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "ieee754": "^1.2.1",
    "path-browserify": "^1.0.1"
  }

2. Adding fallback:{path : require.resolve("path-browserify")}, to the resolve property in node_modules/react-scripts/config/webpack.config.js

It's still gives a huge load of warnings:

WARNING in ./node_modules/@gooddata/typings/dist/src/AFM.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/AFM.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/AFM.ts'

WARNING in ./node_modules/@gooddata/typings/dist/src/AnalyticalDashboard.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/AnalyticalDashboard.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/AnalyticalDashboard.ts'

WARNING in ./node_modules/@gooddata/typings/dist/src/DashboardExport.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/DashboardExport.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/DashboardExport.ts'

WARNING in ./node_modules/@gooddata/typings/dist/src/DashboardLayout.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/DashboardLayout.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/DashboardLayout.ts'

WARNING in ./node_modules/@gooddata/typings/dist/src/ExecuteAFM.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/ExecuteAFM.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/ExecuteAFM.ts'

WARNING in ./node_modules/@gooddata/typings/dist/src/Execution.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/Execution.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/Execution.ts'

WARNING in ./node_modules/@gooddata/typings/dist/src/ExtendedDateFilters.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/ExtendedDateFilters.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/ExtendedDateFilters.ts'

WARNING in ./node_modules/@gooddata/typings/dist/src/KPI.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/KPI.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/KPI.ts'

WARNING in ./node_modules/@gooddata/typings/dist/src/Localization.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/Localization.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/Localization.ts'

WARNING in ./node_modules/@gooddata/typings/dist/src/VisualizationClass.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/VisualizationClass.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/VisualizationClass.ts'

WARNING in ./node_modules/@gooddata/typings/dist/src/VisualizationInput.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/VisualizationInput.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/VisualizationInput.ts'

WARNING in ./node_modules/@gooddata/typings/dist/src/VisualizationObject.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/VisualizationObject.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/VisualizationObject.ts'

WARNING in ./node_modules/@gooddata/typings/dist/src/embedding/ad.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/embedding/ad.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/embedding/ad.ts'

WARNING in ./node_modules/@gooddata/typings/dist/src/embedding/common.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/embedding/common.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/embedding/common.ts'

WARNING in ./node_modules/@gooddata/typings/dist/src/embedding/kd.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/embedding/kd.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/embedding/kd.ts'

WARNING in ./node_modules/@gooddata/typings/dist/src/visualizationWidget.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/visualizationWidget.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@gooddata/typings/src/visualizationWidget.ts'

WARNING in ./node_modules/@twilio/flex-ui/bundle/twilio-flex.prod.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/flex-ui/bundle/twilio-flex.prod.js.map' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/flex-ui/bundle/twilio-flex.prod.js.map'

WARNING in ./node_modules/@twilio/flex-ui/node_modules/@twilio/flex-ui-core/bundle/twilio-flex-ui-core.prod.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/flex-ui/node_modules/@twilio/flex-ui-core/bundle/twilio-flex-ui-core.prod.js.map' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/flex-ui/node_modules/@twilio/flex-ui-core/bundle/twilio-flex-ui-core.prod.js.map'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/core/core.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/core/core.ts'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/core/misc.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/core/misc.ts'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/core/plugins/timeline.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/core/plugins/timeline.ts'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/core/plugins/wsTimeline.js' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/core/plugins/wsTimeline.js'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/core/renderer.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/core/renderer.ts'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/core/styles.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/core/styles.ts'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/ui/Mark.tsx' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/ui/Mark.tsx'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/ui/Player.tsx' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/ui/Player.tsx'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/ui/Portal.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/ui/Portal.ts'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/utils.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/@twilio/player/src/utils.ts'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/drawer.canvasentry.js' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/drawer.canvasentry.js'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/drawer.js' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/drawer.js'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/drawer.multicanvas.js' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/drawer.multicanvas.js'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/absMax.js' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/absMax.js'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/clamp.js' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/clamp.js'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/frame.js' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/frame.js'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/get-id.js' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/get-id.js'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/max.js' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/max.js'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/min.js' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/min.js'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/observer.js' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/observer.js'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/request-animation-frame.js' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/request-animation-frame.js'

WARNING in ./node_modules/@twilio/player/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/style.js' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/node_modules/wavesurfer.js/src/util/style.js'

WARNING in ./node_modules/value-or-promise/build/module/ValueOrPromise.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/value-or-promise/src/ValueOrPromise.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/value-or-promise/src/ValueOrPromise.ts'

WARNING in ./node_modules/value-or-promise/build/module/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/value-or-promise/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/quentinhayot/Downloads/flex-ui-sample/node_modules/value-or-promise/src/index.ts'

webpack compiled with 42 warnings

It would be nice to have an update from Twilio. This self-hosted example wasn't updated for 2 years.

[blakecodes]

For those that run into issues, I had to do the above but both comments did not mention needing to upgrade to "react-scripts": "5.0.1" from v3.

This repo really needs to be updated!