i am starting learning to create dev env using webpack and MERN

i am doing the same as in this article https://blog.bitsrc.io/an-efficient-way-to-set-up-a-mern-stack-application-12fd87fad90d

but i like to use import in the place of require so i added "type": "module" in packege.json

 "name": "diamond-dev-ecosystem",
  "version": "1.0.0",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon",
    "build": "webpack --config webpack.config.client.production.js && webpack --mode=production --config webpack.config.server.js",
    "start": "NODE_ENV=production node ./dist/server.generated.js"
    },

and in .babelrc

{
"presets": [
    ["@babel/preset-env",
        {
            "targets": {
                "node": "current"
            }
        }
    ],
"@babel/preset-react"
],
"plugins": [
    "react-hot-loader/babel"
]

}

but i have this error: ReferenceError: require is not defined in ES module scope, you can use import instead [error message][1]

because in my code i use import but the generated code from webpack use require

so how i can fixe this probleme will still using import, if possible ?

Note: if you have any advice for creating dev env, i will be thankful

thanks [1]: https://i.stack.imgur.com/2urPo.png