Error while self hosting server typescript import React from 'react'; ^^^^^^ SyntaxError: Cannot use import statement outside a module

Technical Issue Reporting
#1

am doing airbnb clone with web3 video by moralis web3 but now in moralis dashboard server functionality is not available so I searched and found the self hosting server video on same channel. and I start working on it but while doing I got some error please help me

{
  "name": "airbnb-clone",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "antd": "^4.18.7",
    "assert": "^2.0.0",
    "crypto-browserify": "^3.12.0",
    "google-maps-react": "^2.0.6",
    "https-browserify": "^1.0.0",
    
    "os-browserify": "^0.3.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-moralis": "^1.3.1",
    "react-router-dom": "6",
    "react-scripts": "4.0.0",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "url": "^0.11.0",
    "web-vitals": "^2.1.4",
    "web3uikit": "^0.1.75",
    "cors": "^2.8.5",
    "dotenv": "^16.0.1",
    "envalid": "7.3.1",
    "express": "^4.18.1",
    "express-rate-limit": "^6.5.1",
    "graphql": "^16.6.0",
    "graphql-ws": "^5.10.1",
    "moralis": "^2.18.0",
    "ngrok": "^4.3.3",
    "parse-server": "^5.4.0"
  },"devDependencies": {
    "@moralisweb3/eslint-config": "^1.0.3",
    "@types/cors": "^2.8.13",
    "@types/jest": "^29.2.5",
    "@types/node": "^18.11.18",
    "@typescript-eslint/eslint-plugin": "^5.48.2",
    "@typescript-eslint/parser": "^5.48.2",
    "axios": "^1.2.1",
    "eslint": "^8.32.0",
    "eslint-plugin-etc": "^2.0.2",
    "eslint-plugin-import": "^2.27.5",
    "jest": "^29.3.1",
    "mongodb-runner": "^4.9.0",
    "prettier": "^2.8.0",
    "ts-jest": "^29.0.4",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4"
  },
  "scripts": {
    "dev": "ts-node src/index.js",
    "start": "react-scripts start",
    "build": "tsc",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import { MoralisProvider } from "react-moralis";
import { NotificationProvider } from 'web3uikit';

// appId={APP_ID} serverUrl={SERVER_URL}

ReactDOM.render(
  <React.StrictMode>
     <MoralisProvider >
      <NotificationProvider>
      <BrowserRouter>
        <App />
      </BrowserRouter>
      </NotificationProvider>
    </MoralisProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
#2

Hi @pratikshelar

Please note that the tutorial which you are referring to may contain depreciated content. So we recommend checking out our latest tutorials on youtube that uses API instead of servers.

Regarding the error, It seems that you are using this in your existing project. In that is your index.js placed in the src folder?
You could try adding type=module in package.json

#5

youtube I followed this tutorial to create this clone. can you suggest best video to follow for API am not getting it right for this clone.
yes, I am using this in the existing project. is it the right way? or do I need to create the server differently? yes, index.js is placed in the src folder.
exactly where I need to add

#6

This current tutorial that you are following is marked as unlisted as it has depreciated content.

Since your existing project is react here is a quick start guide on how you can add moralis to your project. Please note that this would require creating an express.js app to run the moralis sdk functions.