리액트를 다루는 기술 node.js esm 에러 해결

장장 8시간의 트러블 슈팅 ..............

여러분 웬만하면 그때그때 버전에 맞는 책을 사서 공부합시다 ....ㅠㅠ......눈물만 줄줄

 

2024년 1월 기준으로 저는 esm을 아예 설치하지 않고 진행했습니다!

node.js version 12부터는 책 내용처럼 main.js에 주요 구현을 한 뒤 index.js에서 불러올 필요 없이

package.json에  "type" : "module"  을  추가해서 사용하면 되는데요, 하지만 이것만 설치한 경우 이렇게 ES modules 에러가 반복됐습니다.

 

 

package.json

{
  "name": "blog-backend",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "dotenv": "^16.3.1",
    "eslint-config-prettier": "^9.1.0",
    "koa": "^2.15.0",
    "koa-bodyparser": "^4.4.1",
    "koa-router": "^12.0.1",
    "mongoose": "^8.0.4",
    "nodemon": "^3.0.2"
  },
  "devDependencies": {
    "eslint": "^8.56.0"
  },
  "scripts": {
    "start": "node src",
    "start:dev": "nodemon --watch src/ src/index.js"
  },
  "type": "module"
}

 

.eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true,
        "node": true
    },
    "extends": ["eslint:recommended", "prettier"],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
        "no-unused-vars" : "warn",
        "no-console" :  "off"
    }
}

그리고 타 블로그에서는 .eslintrc.json에도 "sourceType" :"module" 을 추가했더니 es 에러가 사라졌다고 하시길래,

여기도 추가 했습니다

 

index.js

import dotenv from 'dotenv';
dotenv.config();
import Koa from 'koa';
import Router from 'koa-router';
import bodyParser from 'koa-bodyparser';
import mongoose from 'mongoose';

import api from './api/index.js';

// 비구조화 할당을 통해 process.env 내부 값에 대한 레퍼런스 만들기
const { PORT, MONGO_URI } = process.env;

mongoose
    .connect(MONGO_URI)
        .then(() => {
            console.log('Connected to MongoDB');
        })
        .catch(e => {
            console.error(e);
        });

const app = new Koa();
const router = new Router();

router.use('/api', api.routes()); //api 라우트 적용

// 라우터 적용 전에 bodyParser적용
app.use(bodyParser());

// app 인스턴스에 라우터 적용
app.use(router.routes()).use(router.allowedMethods());

const port = PORT || 4000;
app.listen(port, () => {
    console.log('Listening to port %d', port);
});

dotenv를 불러올때 책에서는 require('dotenv').config() 이지만, import로 불러와 줍니다.

 

 

src/api/posts/index.js 

import Router from 'koa-router';
import * as postsCtrl from './posts.ctrl.js';

const posts = new Router();

posts.get('/', postsCtrl.list);
posts.post('/', postsCtrl.write);
posts.get('/:id', postsCtrl.read);
posts.delete('/:id', postsCtrl.remove);
posts.put('/:id', postsCtrl.replace);
posts.patch('/:id', postsCtrl.update);

export default posts;

es 모듈 시스템에서 디렉터리에 대한 명시적 처리가 필요하므로 파일을 import할 때 확장자를 붙여 사용해 줍니다.

 

src/index.js

import Router from 'koa-router';
import posts from './posts/index.js';

const api = new Router();

api.use('/posts', posts.routes());

export default api;

 

저는 궁극적으로는 import posts from './posts'; 를 import posts from './posts/index.js' 로 수정 해서 에러를 해결했습니다!

 

 

몇시간동안 계속 헤맨 나머지 공식 문서를 하나하나 뜯어 볼 여력이 없어서.. ㅎㅎ 정확한 이유와 근거는 찾지 못했지만

어쨌든 해결했으니 ..^^