# dotenv-webpack 추가시 에러
###### tags: `trouble shooting`


테스트를 해보니 next.config.js에서 `config.plugins.push(new Dotenv({ silent: true }));`를 해서 dotenv-webpack을 추가하고 나서 styled-component를 import 하면 에러가 발생했다. 버전이 달라지면서 어떤 충돌이 발생하는게 아닌가 싶었다.

const Dotenv = require('dotenv-webpack');

module.exports = {
  webpack: (config) => {
    config.plugins.push(new Dotenv({ silent: true }));

    return config;
  },
};

그런데 [next.js 문서](https://nextjs.org/docs/api-reference/next.config.js/environment-variables)를 찾아보니 .env를 추가할 때 next.js에서 제공하는 방식도 사용할 수 있었는데 next.config.js에 env라는 property를 넣는 방식이었다.

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

이러한 방식을 사용하고 추가적으로 dotenv 패키지를 사용해서 다음과 같은 코드로 해결했다.

require('dotenv').config();

const nextConfig = {
  env: {
    NAVER_CLIENT_ID: process.env.NAVER_CLIENT_ID,
  },
};

module.exports = nextConfig;