SyntaxError: 不能在模块外使用 import 语句

Question

I'm trying to deploy my web app into heroku and I have been getting this problem since I added the "emailjs" module. Before that my deploy worked well and now im getting the same problem every time. to matter what i try. Heroku logs results after trying to deploy

**this is my code in index.js: ** `

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

`

The thing is: when i change the "import" to "require" the code throws me more and more errors.

**this is my packakge.json:

**

{
  "name": "chipsi-puntos",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "18.12.1"
  },
  "dependencies": {
    "@emailjs/browser": "^3.10.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.3",
    "react-scripts": "5.0.1",
    "sass": "^1.56.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "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"
    ]
  }
}

Im deployng thru heroku using github. If you have any advice, ill be so thankfull <3

I've tried all the solutions that are written here: "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6

I also tried to switch the "import" to "require" and didnt work.

I expect my code to do well on heroku.

Pd: it works 100% OK on my localhost.

Answer 1

I think when you're using import statements you should have "type": "module" in the package.json file. Since you don't have it, you should use require statements instead. If I were you, I'll try adding "type": "module" to the package.json. You could also try invoking the flag: --experimental-modules

More info on that can be found here

Answer 2

You need to add "type": "module" in your package.json file.

{
  "name": "Name of your app",
  "version": "0.1.0",
  "homepage": ".",
  "private": true,
  "type": "module",
  ...
}

Change Your index.js file:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);