웹팩 에러 문의

캠틴 판교님 안녕하세요. 너무나 훌륭한 강의에 큰 도움이 되었습니다. 감사합니다. :)

다름이 아니라 웹팩 번들링 시 에러가 발생되는데, 관련하여 도움이 될 수 있을만한 정보가 있을지 문의드립니다.

(참고로 빌드 관련 오류 문의를 확인하고 새롭게 올려주신 커밋본에서 수정된 부분을 적용시킨 상태에서 발생한 에러입니다.)

• 기타 컨피그 설정

// tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "target": "ES5",
    "outDir": "./dist",
    "moduleResolution": "Node",
    "lib": ["ES2015", "DOM", "DOM.Iterable"],
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "strict": true,
    "esModuleInterop": true,
    "typeRoots": ["./node_modules/@types", "./types"]
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules", "dist"]
}

// webpack.config.js

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
console.log("path.resolve(__dirname, 'dist')", path.resolve(__dirname, 'dist'))
module.exports = {
  mode: 'production',
  entry: './src/app.ts',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [new webpack.ProgressPlugin(), new CleanWebpackPlugin()],
};

// package.json

{
  "name": "project",
  "version": "1.0.0",
  "description": "최종 프로젝트 폴더입니다",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.7",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-typescript": "^7.12.7",
    "@types/chart.js": "^2.9.30",
    "@typescript-eslint/eslint-plugin": "^4.8.1",
    "@typescript-eslint/parser": "^4.8.1",
    "clean-webpack-plugin": "^3.0.0",
    "eslint": "^7.14.0",
    "eslint-plugin-prettier": "^3.1.4",
    "prettier": "^2.2.0",
    "ts-loader": "^8.0.14",
    "typescript": "^4.1.2",
    "webpack": "^5.18.0",
    "webpack-cli": "^4.4.0"
  },
  "dependencies": {
    "axios": "^1.1.0",
    "chart.js": "^3.9.1"
  }
}

// index.html

...
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script src="./dist/app.js"></script>

• 에러로그

npm run build


> project@1.0.0 build
> webpack

orphan modules 154 KiB [orphan] 41 modules
runtime modules 670 bytes 3 modules
cacheable modules 500 KiB
  ./src/app.ts 11.2 KiB [built] [code generated]
  ./node_modules/axios/index.js + 40 modules 79.7 KiB [built] [code generated]
  ./node_modules/chart.js/dist/chart.mjs + 1 modules 409 KiB [built] [code generated]
  ./node_modules/form-data/lib/browser.js 101 bytes [built] [code generated]

ERROR in ./src/app.ts 44:14-38
Module not found: Error: Can't resolve './covid/index' in '/Users/xxx/Study/typescript/project/src'
resolve './covid/index' in '/Users/xxx/Study/typescript/project/src'
  using description file: /Users/xxx/Study/typescript/project/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/xxx/Study/typescript/project/package.json (relative path: ./src/covid/index)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/xxx/Study/typescript/project/src/covid/index doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/xxx/Study/typescript/project/src/covid/index.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/xxx/Study/typescript/project/src/covid/index.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/xxx/Study/typescript/project/src/covid/index.wasm doesn't exist
      as directory
        /Users/xxx/Study/typescript/project/src/covid/index doesn't exist

webpack 5.74.0 compiled with 1 error in 2589 ms

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
console.log("path.resolve(__dirname, 'dist')", path.resolve(__dirname, 'dist'))
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()],
};