Question

Getting error in React Js application - App Platform

Posted on September 26, 2024
Websites Deployment React Cloud Website Hosting Developer Tools Application Development Website Development
Asked by Samiuddin Mohammed

Hi, I am new to DigitalOcean I created an reactjs app connecting to flask app on the same App Platform, when deployed and access the reatJS site

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /workspace/client/src/index.js: Cannot find module '@babel/plugin-proposal-private-property-in-object'
Require stack:
- /workspace/client/node_modules/babel-preset-react-app/create.js
- /workspace/client/node_modules/babel-preset-react-app/index.js
- /workspace/client/node_modules/@babel/core/lib/config/files/module-types.js
- /workspace/client/node_modules/@babel/core/lib/config/files/configuration.js
- /workspace/client/node_modules/@babel/core/lib/config/files/index.js
- /workspace/client/node_modules/@babel/core/lib/index.js
- /workspace/client/node_modules/@rollup/plugin-babel/dist/index.js
- /workspace/client/node_modules/workbox-build/build/lib/bundle.js
- /workspace/client/node_modules/workbox-webpack-plugin/build/generate-sw.js
- /workspace/client/node_modules/workbox-webpack-plugin/build/index.js
- /workspace/client/node_modules/react-scripts/config/webpack.config.js
- /workspace/client/node_modules/react-scripts/scripts/start.js (While processing: "/workspace/client/node_modules/babel-preset-react-app/index.js")
    at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15)
    at Module._load (node:internal/modules/cjs/loader:986:27)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at module.exports (/workspace/client/node_modules/babel-preset-react-app/create.js:168:9)
    at module.exports (/workspace/client/node_modules/babel-preset-react-app/index.js:19:10)
    at async (/workspace/client/node_modules/@babel/core/lib/gensync-utils/async.js:35:33)
    at async (/workspace/client/node_modules/gensync/index.js:186:15)
    at /workspace/client/node_modules/gensync/index.js:216:13
    at Generator.next (<anonymous>)
    at /workspace/client/node_modules/@babel/core/lib/config/full.js:180:21
    at Generator.next (<anonymous>)
    at Function.<anonymous> (/workspace/client/node_modules/@babel/core/lib/gensync-utils/async.js:21:3)
    at Generator.next (<anonymous>)
    at step (/workspace/client/node_modules/gensync/index.js:269:25)
    at evaluateAsync (/workspace/client/node_modules/gensync/index.js:291:5)
    at Function.errback (/workspace/client/node_modules/gensync/index.js:113:7)
    at errback (/workspace/client/node_modules/@babel/core/lib/gensync-utils/async.js:65:18)
    at async (/workspace/client/node_modules/gensync/index.js:188:17)
    at onFirstPause (/workspace/client/node_modules/gensync/index.js:216:13)
    at Generator.next (<anonymous>)
    at cachedFunction (/workspace/client/node_modules/@babel/core/lib/config/caching.js:52:46)
    at cachedFunction.next (<anonymous>)
    at loadPresetDescriptor (/workspace/client/node_modules/@babel/core/lib/config/full.js:292:43)
    at loadPresetDescriptor.next (<anonymous>)
    at recursePresetDescriptors (/workspace/client/node_modules/@babel/core/lib/config/full.js:77:31)
    at recursePresetDescriptors.next (<anonymous>)
    at /workspace/client/node_modules/@babel/core/lib/config/full.js:156:21
    at Generator.next (<anonymous>)
    at loadFullConfig (/workspace/client/node_modules/@babel/core/lib/config/full.js:113:5)
    at loadFullConfig.next (<anonymous>)
    at transform (/workspace/client/node_modules/@babel/core/lib/transform.js:20:44)
    at transform.next (<anonymous>)
    at step (/workspace/client/node_modules/gensync/index.js:269:25)
    at evaluateAsync (/workspace/client/node_modules/gensync/index.js:291:5)
    at errback (/workspace/client/node_modules/gensync/index.js:113:7)
    at stopHiding - secret - don't use this - v1 (/workspace/client/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)
    at transform (/workspace/client/node_modules/@babel/core/lib/transform.js:39:72)
    at node:internal/util:431:7
    at new Promise (<anonymous>)
    at transform (node:internal/util:417:12)
    at /workspace/client/node_modules/babel-loader/lib/transform.js:15:22
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/workspace/client/node_modules/babel-loader/lib/transform.js:3:103)
    at _next (/workspace/client/node_modules/babel-loader/lib/transform.js:4:194)
    at /workspace/client/node_modules/babel-loader/lib/transform.js:4:364
    at new Promise (<anonymous>)
    at /workspace/client/node_modules/babel-loader/lib/transform.js:4:97
    at /workspace/client/node_modules/babel-loader/lib/transform.js:48:17
    at /workspace/client/node_modules/babel-loader/lib/cache.js:130:26
    at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15)
    at Module._load (node:internal/modules/cjs/loader:986:27)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at module.exports (/workspace/client/node_modules/babel-preset-react-app/create.js:168:9)
    at module.exports (/workspace/client/node_modules/babel-preset-react-app/index.js:19:10)
    at async (/workspace/client/node_modules/@babel/core/lib/gensync-utils/async.js:35:33)
    at async (/workspace/client/node_modules/gensync/index.js:186:15)
    at /workspace/client/node_modules/gensync/index.js:216:13
    at Generator.next (<anonymous>)
    at /workspace/client/node_modules/@babel/core/lib/config/full.js:180:21
    at Generator.next (<anonymous>)
    at Function.<anonymous> (/workspace/client/node_modules/@babel/core/lib/gensync-utils/async.js:21:3)
    at Generator.next (<anonymous>)
    at step (/workspace/client/node_modules/gensync/index.js:269:25)
    at evaluateAsync (/workspace/client/node_modules/gensync/index.js:291:5)
    at Function.errback (/workspace/client/node_modules/gensync/index.js:113:7)
    at errback (/workspace/client/node_modules/@babel/core/lib/gensync-utils/async.js:65:18)
    at async (/workspace/client/node_modules/gensync/index.js:188:17)
    at onFirstPause (/workspace/client/node_modules/gensync/index.js:216:13)
    at Generator.next (<anonymous>)
    at cachedFunction (/workspace/client/node_modules/@babel/core/lib/config/caching.js:52:46)
    at cachedFunction.next (<anonymous>)
    at loadPresetDescriptor (/workspace/client/node_modules/@babel/core/lib/config/full.js:292:43)
    at loadPresetDescriptor.next (<anonymous>)
    at recursePresetDescriptors (/workspace/client/node_modules/@babel/core/lib/config/full.js:77:31)
    at recursePresetDescriptors.next (<anonymous>)
    at /workspace/client/node_modules/@babel/core/lib/config/full.js:156:21
    at Generator.next (<anonymous>)
    at loadFullConfig (/workspace/client/node_modules/@babel/core/lib/config/full.js:113:5)
    at loadFullConfig.next (<anonymous>)
    at transform (/workspace/client/node_modules/@babel/core/lib/transform.js:20:44)
    at transform.next (<anonymous>)
    at step (/workspace/client/node_modules/gensync/index.js:269:25)
    at evaluateAsync (/workspace/client/node_modules/gensync/index.js:291:5)
    at errback (/workspace/client/node_modules/gensync/index.js:113:7)
    at stopHiding - secret - don't use this - v1 (/workspace/client/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)
    at transform (/workspace/client/node_modules/@babel/core/lib/transform.js:39:72)
    at node:internal/util:431:7
    at new Promise (<anonymous>)
    at transform (node:internal/util:417:12)
    at /workspace/client/node_modules/babel-loader/lib/transform.js:15:22
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/workspace/client/node_modules/babel-loader/lib/transform.js:3:103)
    at _next (/workspace/client/node_modules/babel-loader/lib/transform.js:4:194)
    at /workspace/client/node_modules/babel-loader/lib/transform.js:4:364
    at new Promise (<anonymous>)
    at /workspace/client/node_modules/babel-loader/lib/transform.js:4:97
    at /workspace/client/node_modules/babel-loader/lib/transform.js:48:17
    at /workspace/client/node_modules/babel-loader/lib/cache.js:130:26
    at ./src/index.js (https://octopus-app-bguru.ondigitalocean.app/static/js/bundle.js:10:7)
    at options.factory (https://octopus-app-bguru.ondigitalocean.app/static/js/bundle.js:10476:31)
    at __webpack_require__ (https://octopus-app-bguru.ondigitalocean.app/static/js/bundle.js:9939:32)
    at https://octopus-app-bguru.ondigitalocean.app/static/js/bundle.js:11053:37
    at https://octopus-app-bguru.ondigitalocean.app/static/js/bundle.js:11055:12
./src/index.js @ bundle.js:10
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:22
(anonymous) @ startup:7
(anonymous) @ startup:7Understand this error
react refresh:6 WebSocket connection to 'wss://octopus-app-bguru.ondigitalocean.app:8080/ws' failed: 
WebSocketClient @ WebSocketClient.js:13
initSocket @ socket.js:27
./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=none&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true @ index.js:320
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:22
(anonymous) @ startup:5
(anonymous) @ startup:7
Show 3 more frames
Show lessUnderstand this error
WebSocketClient.js:13 WebSocket connection to 'wss://octopus-app-bguru.ondigitalocean.app:8080/ws' failed: 
WebSocketClient @ WebSocketClient.js:13
initSocket @ socket.js:27
(anonymous) @ socket.js:51
Show 3 more frames
Show lessUnderstand this error
WebSocketClient.js:13 WebSocket connection to 'wss://octopus-app-bguru.ondigitalocean.app:8080/ws' failed: 
WebSocketClient @ WebSocketClient.js:13
initSocket @ socket.js:27
(anonymous) @ socket.js:51
Show 3 more frames
Show lessUnderstand this error
WebSocketClient.js:13 WebSocket connection to 'wss://octopus-app-bguru.ondigitalocean.app:8080/ws' failed: 
WebSocketClient @ WebSocketClient.js:13
initSocket @ socket.js:27
(anonymous) @ socket.js:51
Show 3 more frames
Show lessUnderstand this error

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Bobby Iliev

Site Moderator

• November 18, 2024

Hey,

I’ve not seen this one before, but it sounds like an issue where your React app is looking for the @babel/plugin-proposal-private-property-in-object plugin, which isn’t available and you need to make sure that you have it installed.

In your React project, open your terminal and install the missing plugin by running:

npm install @babel/plugin-proposal-private-property-in-object --save-dev

After making that change, push your code to your GitHub repository and force-redeploy your application on App Platform.

- Bobby

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Learn more

Resources for startups and SMBs

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Learn more

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

View all products

Get started for free

Get started

*This promotional offer applies to new accounts only.