I Started learning THREEJS but every time I execute npm run dev the following error comes up and I can't figure out what is wrong with my npm . node v18.7.0

I am learning this course from Threejs journey and the starter pack they gave and told me to run the commands in the terminal I am encountering the error mentioned below

I have no idea how to fix this.

Error

[webpack-cli] Failed to load 'D:\3js\l2\04-webpack\bundler\webpack.dev.js' config
[webpack-cli] Error [ERR_REQUIRE_ESM]: require() of ES Module D:\3js\l2\04-webpack\node_modules\internal-ip\index.js from D:\3js\l2\04-webpack\bundler\webpack.dev.js not supported.
Instead change the require of index.js in D:\3js\l2\04-webpack\bundler\webpack.dev.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (D:\3js\l2\04-webpack\bundler\webpack.dev.js:4:12)
    at async Promise.all (index 0)
    at async WebpackCLI.tryRequireThenImport (D:\3js\l2\04-webpack\node_modules\webpack-cli\lib\webpack-cli.js:254:18)
    at async WebpackCLI.createCompiler (D:\3js\l2\04-webpack\node_modules\webpack-cli\lib\webpack-cli.js:2185:18)
    at async Command.<anonymous> (D:\3js\l2\04-webpack\node_modules\@webpack-cli\serve\lib\index.js:98:30)
    at async Promise.all (index 1)
    at async Command.<anonymous> (D:\3js\l2\04-webpack\node_modules\webpack-cli\lib\webpack-cli.js:1672:7) {
  code: 'ERR_REQUIRE_ESM'
}

package.json

{
    "repository": "#",
    "license": "UNLICENSED",
    "scripts": {
        "build": "webpack --config ./bundler/webpack.prod.js",
        "dev": "webpack serve --config ./bundler/webpack.dev.js"
    },
    "dependencies": {
        "@babel/core": "^7.15.8",
        "@babel/preset-env": "^7.15.8",
        "babel-loader": "^8.2.3",
        "clean-webpack-plugin": "^4.0.0",
        "copy-webpack-plugin": "^9.0.1",
        "css-loader": "^6.5.0",
        "file-loader": "^6.2.0",
        "html-loader": "^3.0.0",
        "html-webpack-plugin": "^5.5.0",
        "internal-ip": "^7.0.0",
        "mini-css-extract-plugin": "^2.4.3",
        "portfinder-sync": "0.0.2",
        "raw-loader": "^4.0.2",
        "style-loader": "^3.3.1",
        "three": "^0.134.0",
        "webpack": "^5.60.0",
        "webpack-cli": "^4.9.1",
        "webpack-dev-server": "^4.4.0",
        "webpack-merge": "^5.8.0"
    }
}

webpack.dev.js

const path = require('path')
const { merge } = require('webpack-merge')
const commonConfiguration = require('./webpack.common.js')
const ip = require('internal-ip')
const portFinderSync = require('portfinder-sync')

const infoColor = (_message) =>
{
    return `\u001b[1m\u001b[34m${_message}\u001b[39m\u001b[22m`
}

module.exports = merge(
    commonConfiguration,
    {
        stats: 'errors-warnings',
        mode: 'development',
        devServer:
        {
            host: 'local-ip',
            port: portFinderSync.getPort(8080),
            open: true,
            https: false,
            allowedHosts: 'all',
            hot: false,
            watchFiles: ['src/**', 'static/**'],
            static:
            {
                watch: true,
                directory: path.join(__dirname, '../static')
            },
            client:
            {
                logging: 'none',
                overlay: true,
                progress: false
            },
            onAfterSetupMiddleware: function(devServer)
            {
                const port = devServer.options.port
                const https = devServer.options.https ? 's' : ''
                const localIp = ip.v4.sync()
                const domain1 = `http${https}://${localIp}:${port}`
                const domain2 = `http${https}://localhost:${port}`
                
                console.log(`Project running at:\n  - ${infoColor(domain1)}\n  - ${infoColor(domain2)}`)
            }
        }
    }
)

CodePudding user response：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

import path from 'path'
import { merge } from 'webpack-merge'
import commonConfiguration from './webpack.common.js'
import ip from 'internal-ip'
import portFinderSync from 'portfinder-sync'