ReferenceError: __dirname is not defined in ES module scope

2024.06.26 - [👩🏻‍💻 dev] - 모듈 시스템에서 모듈 시스템이 무엇인지, 어떤 것들이 있고, 장단점들을 살펴봤다.

모듈 시스템

👩🏻‍💻 오늘은 turborepo로 nextjs에 sass로 스타일링하기 위해 scss을 next.config.mjs에 설정하는 방법에 대해 다뤄보자.

 

sass 가 모노레포에 잘 돌아가기 위해서는 sass compiler 설정을 해줘야 한다.

nextjs 개발 문서에 나온 대로 설정을 해주자.

pnpm --filter $설치하려는_레포 install sass --save-dev

 

다음은 문서에 나온 sass next.config.js 설정이다.

const path = require('path')
 
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

 

하지만 우리는 트리쉐이킹을 포함한 ESM의 장점들을 활용하기 위해 type:"module"로 설정해다.

따라서 CJS 문법인 require을 사용할 수 없다.

require is not defined in ES module scope, you can use import instead

 

따라서 다음과 같이 수정해 주면 문제가 생긴다.

// @ts-check
 
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}
 
export default nextConfig

 

__dirname is not defined in ES module scope

path, __dirname을 모듈 스코프에서 찾지 못하고 있다.

왜 그럴까?

CJS 내에 내장된 글로벌 값들이 ESM에는 존재하지 않기 때문이다. 이 값들에는 __filename, exports, module, require가 있다.

[출처: nodejs.org ] __dirname은 글로벌 변수일 것 같지만 아니다.

 

따라서 다음과 같이 import를 해주자.

// @ts-check

/**
 * https://nextjs.org/docs/app/building-your-application/styling/sass#customizing-sass-options
 */

import path from "path"; //➕
import { fileURLToPath } from "url"; //➕

const __dirname = fileURLToPath(new URL(".", import.meta.url)); //➕

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
};

export default nextConfig;

---

🍀 마치면서

이번에는 아주 간단한 내용인 sass를 next.config.mjs에 설정하는 방법에 대해 살펴봤다.

__filename, exports, module, require가 CJS의 내장 글로벌 변수기 때문에 import를 해줘야 한다는 걸 새롭게 알았다. 

 

---

📚 References

https://nextjs.org/docs/app/building-your-application/styling/sass#customizing-sass-options

Styling: Sass | Next.js

https://nextjs.org/docs/app/api-reference/next-config-js

API Reference: next.config.js Options | Next.js

https://blog.logrocket.com/alternatives-dirname-node-js-es-modules/

Alternatives to __dirname in Node.js with ES modules - LogRocket Blog

https://nodejs.org/docs/latest/api/modules.html#__dirname

Modules: CommonJS modules | Node.js v22.4.1 Documentation

https://nodejs.org/docs/latest/api/globals.html#__dirname

Global objects | Node.js v22.4.1 Documentation