MVC Full-Stack App Frontend/View wont run ‘npm run start’

Hi All,

I was having an issue on the MVC Architecture project/excercise.
Connecting Front-end to Back-end → MVC Architecture Full-Stack App

Using the instructions, I installed the node modules in both root and view directories. I didn’t run ‘npm audit fix’, as I wanted to try and remain as close to the original setup that was provided.
The backend server started as expected and is happily awaiting for requests on port 8000.

I attempted to start the frontend React using ‘npm run start’. It failed with the following message

Error: error:0308010C:digital envelope routines::unsupported
Fix this using these instructions - opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ] · Issue #15900 · webpack/webpack · GitHub

I then attempted to start with the following error which others have experienced.

src/App.js
  Line 0:  Parsing error: ImportDeclaration should appear when the mode is ES6 and in the module context

src/components/ExpenseList.js
  Line 0:  Parsing error: ImportDeclaration should appear when the mode is ES6 and in the module context

src/components/LogExpense.js
  Line 0:  Parsing error: ImportDeclaration should appear when the mode is ES6 and in the module context

src/components/Modal.js
  Line 0:  Parsing error: ImportDeclaration should appear when the mode is ES6 and in the module context

src/index.js
  Line 0:  Parsing error: ImportDeclaration should appear when the mode is ES6 and in the module context

I was able to sort this issue in the end by doing the following.

  • Removed node_modules directory
  • Removed the package-lock.json file
  • Update the package.json file with following dependency versions
    ** “react”: “^18.2.0”
    ** “react-dom”: “^18.2.0”
    ** “react-scripts”: “5.0.1”
  • I finally started ran the command ‘sudo npm run start’ [this was due to webpack wanting sufficient privileges to create a directory to store cache files]

It took far longer than I wish and had already started writing this post before sorting. And I wanted to share this experience with others should they run into any issues.

Thanks