在 app.js 中導入 js 文件時出現未知文件擴展名錯誤，使用類型：package.json 中的模塊

Question

從主服務器文件中的路由文件夾調用文件時出現錯誤。

app.js（主服務器文件代碼）

import express from "express"
import cors from "cors"
import mysql from "mysql"
const app = express()
import bcrypt from "bcrypt"
import session from "express-session"
import passport from "passport"
import passportLocalMySql from "passport-local-mysql"

app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

const db = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: '25432900@Meet',
    database: 'quizdb'
})

app.post("/register", cors(), (req, res) => {
    console.log("In server", req.body)
    let userName = req.body.userName
    let userEmail = req.body.userEmail
    const sqlInsert = "INSERT INTO user(user_name, user_email) VALUES (?,?)"
    // const sqlRead = "SELECT * from user"
    const queryResult = db.query(sqlInsert, [userName, userEmail], (err, result) => {
        if (err) {
            console.log("There was some error: ", err)
        } else {
            console.log("Successful")
            res.json(result)
        }
    })
})

import router from "./routes/login"
console.log("Meeet")
app.post("/login", async (req, res) => {
    let userName = req.body.userName
    let userPassword = req.body.password
    const checkQuery = 'SELECT * FROM user WHERE user_id=? AND user_password=?'
    const queryResult = db.query(checkQuery, [userName, userPassword], (err, result) => {
        if (err) {
            console.log("There was some error: ", err)
        } else {
            console.log("Successful")
            res.json(result)
        }
    })
})

app.listen('5000', () => {
    console.log("Listening on port no. 5000")
})

login.js 文件（正在導入的文件）

const express = require("express")
const router = express.Router()

router.post("/login", async (req, res) => {
    console.log("Meets")
    let userName = req.body.userName
    let userPassword = req.body.password
    const checkQuery = 'SELECT * FROM user WHERE user_id=? AND user_password=?'
    const queryResult = db.query(checkQuery, [userName, userPassword], (err, result) => {
        if (err) {
            console.log("There was some error: ", err)
        } else {
            console.log("Successful")
            res.json(result)
        }
    })
})

module.exports = router

package.json 文件

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app",
    "nodemon": "nodemon app"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcrypt": "^5.1.0",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "express-session": "^1.17.3",
    "mysql": "^2.18.1",
    "passport": "^0.6.0",
    "passport-local": "^1.0.0",
    "passport-local-mysql": "^5.0.10",
    "sequelize": "^6.26.0",
    "sequelize-cli": "^6.5.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.20"
  }
}

文件結構：

1. 主文件夾內的 app.js、package.json
2. 主文件夾內的路由器文件夾內的 login.js

我正在嘗試使用 esversion 6 但它拋出錯誤

錯誤：

`TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension "" for M:\react\quiz-app\server\routes\login. Loading extensionless files is not supported inside of "type":"module" package.json contexts. The package.json file M:\react\quiz-app\server\package.json caused this "type":"module" context. Try changing M:\react\quiz-app\server\routes\login to have a file extension. Note the "bin" field of package.json can point to a file with an extension, for example {"type":"module","bin":{"login":".\routes\login.js"}}
    at new NodeError (node:internal/errors:393:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:80:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:122:38)
    at defaultLoad (node:internal/modules/esm/load:81:20)
    at nextLoad (node:internal/modules/esm/loader:164:28)
    at ESMLoader.load (node:internal/modules/esm/loader:603:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:459:22)
    at new ModuleJob (node:internal/modules/esm/module_job:63:26)
    at #createModuleJob (node:internal/modules/esm/loader:478:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:436:34) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Node.js v18.8.0`

Answer 1

如果您使用具有相同文件擴展名的 ESM 和 commonJS 模塊，它將無法工作。 您應該將 login.js 重命名為 login.cjs，然后將import router from "./routes/login"行更改為import * as router from "./routes/login.cjs" 。 它應該有所幫助。

或者在項目的任何地方都只使用 ESM 模塊。