0

I'm working on a exercise react project and i got an error i couldn't fix still. I tried so many ways and didn't work.

This is app.js:

import {AddJob} from './Comps/AddJob.js'
import {JobList} from "./Comps/JobList.js"
import {DoneJobs} from "./Comps/DoneJobs.js"



function App() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col">
                    <AddJob />
                </div>
                <div className="col">
                    <JobList />
                </div>
                <div className="col">
                    <DoneJobs />
                </div>
            </div>
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById('root'))

package.json:

{
  "name": "react-starter-kit",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npx babel src/app.js --out-file=public/scripts/app.js --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.22.10",
    "@babel/core": "^7.22.10",
    "@babel/plugin-transform-modules-commonjs": "^7.22.5",
    "@babel/preset-env": "^7.22.10",
    "@babel/preset-react": "^7.22.5",
    "@babel/register": "^7.22.5"
  },
  "dependencies": {
    "@babel/standalone": "^7.22.10",
    "babel-preset-env": "^1.7.0"
  }
}

Error

.babelrc:

{ "presets": [["@babel/preset-env",{ "modules": false }],"@babel/preset-react"] }

I tried to write "type":"module" in package.json, i expected to work it but it didn't.

Samet Yıldırım
  • 1
  • 1
    https://stackoverflow.com/a/55792651/1377002 - try removing `{"modules": false }` from that presets line. – Andy Aug 19 '23 at 13:14
  • What error are you getting? – Mike Weiss Aug 19 '23 at 13:23
  • @Andy When i remove `{"modules": false }` , i get "Uncaught ReferenceError: require is not defined at app.js:3:15 " error. @MikeWeiss i get https://i.stack.imgur.com/VcrFc.png – Samet Yıldırım Aug 19 '23 at 13:31
  • 1
    Answered here: https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import. I'm guessing you need to remove that modules: false bit and then make sure you don't have anywhere in your app using the "require" way of importing things. Can you check for that and then let us know if you find anything? – Mike Weiss Aug 19 '23 at 13:34
  • 1
    @MikeWeiss i created a project with `npx create-react-app` and there is no error anymore. Thank you and @Andy . – Samet Yıldırım Aug 19 '23 at 14:04

0 Answers0