exports is not defined 에러 해결하기 - 웹팩 번들링

얜 뭐죠..?

점진적인 타입을 적용하고, npm run build를 했을때 다음과 같은 오류를 마주했을때, 어떻게 handle하면 되는지 기록하려고 합니다.

---

원인?

해당 원인으로는 Chart.js Bundle 공식문서 링크로 들어가서 보시면

Chart.js is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use.

Tree-Shakeable이라고 하면 프론트엔드에서는 전송 사이즈를 줄이기 위해 사용하지 않는 코드의 제거를 의미합니다. 이를 위해서 es6형식으로 export된 라이브러리가 필요하고, 때문에 반드시 웹팩을 Bundle 해주거나 또는 따로 import를 해주는게 필수입니다.

순서

1. Webpack 설치

bash창에 다음 명령어를 입력합니다.

npm i -D webpack webpack-cli 

설치 후, package.json파일로 이동 후, devDependencies 속성에 webpack과 webpack-cli가 깔렸는지 확인합니다.

2. ts-loader, clean-webpack-plugin 설치

npm install -D ts-loader
npm install --save-dev clean-webpack-plugin

설치 후, 다음과 같이 모두 정상적으로 설치됌을 확인합니다.

3. build script 명령어 변경

package.json에서 scripts의 build 명령어를 webpack으로 변경합니다.

기존에는 tsc로 build하게 했지만, 이제는 웹팩 번들링 작업이 요구되므로 webpack으로 변경합니다.

4. tsconfig.json 설정 일부 추가

"esModuleInterop": true 로 설정합니다.

아래는 해당 설정에 대한 공식 문서입니다.

Emit additional JavaScript to ease support for importing CommonJS modules. This enables allowSyntheticDefaultImports for type compatibility.

간단히는, ES2015와 CommonJS와의 호환성을 돕는 설정이라고 생각하면 됩니다.

5. webpack.config.js 파일 새로 생성

작업하는 프로젝트 폴더 아래에 webpack.config.js 파일을 새로 생성 후, 다음 코드를 작성합니다.

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/app.ts',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    // <-- 추가한 부분
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [new webpack.ProgressPlugin(), new CleanWebpackPlugin()],
};

6. npm run build 재실행

콘솔창에 npm run build를 재실행하여, dist폴더에 존재하는 app.js를 재구성합니다.