• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

TypeError: __webpack_require__(...) is not a function에러

21.01.21 22:28 작성 조회수 916

0

babel.config.js

module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                ie: '11'
            },
            useBuiltIns: 'usage',  // 폴리필
            corejs: {
                version: 2 // 3
            }
        }]
    ]
}

webpack

const path = require("path");
const webpack = require("webpack");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

process.env.NODE_ENV = process.env.NODE_ENV || "development";

module.exports = {
    mode: "development",
    entry: {
        main: "./src/app.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve("./dist")
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    process.env.NODE_ENV === "production"
                        ? MiniCssExtractPlugin.loader // 프로덕션 환경
                        : "style-loader", // 개발 환경
                    "css-loader"
                ]
            },
            {
                test: /\.(png|jpg|svg|gif)$/,
                loader: "url-loader",
                options: {
                    name: "[name].[ext]?[hash]",
                    limit: 10000 // 10Kb
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: '/node_modules/'
            }

        ]
    },
    plugins: [
        new webpack.BannerPlugin({
            banner: `빌드 날짜: ${new Date().toLocaleString()}`
        }),
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            templateParameters: {
                env: process.env.NODE_ENV === "development" ? "(개발용)" : ""
            },
            minify:
                process.env.NODE_ENV === "production"
                    ? {
                        collapseWhitespace: true, // 빈칸 제거
                        removeComments: true // 주석 제거
                    }
                    : false,
            hash: process.env.NODE_ENV === "production"
        }),
        new CleanWebpackPlugin(),
        ...(process.env.NODE_ENV === "production"
            ? [new MiniCssExtractPlugin({ filename: `[name].css` })]
            : [])
    ]
};

package.json

"devDependencies": {
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.1",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.1.2",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
 },
"dependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "core-js": "^2.6.12",
    "regenerator-runtime": "^0.13.7"
 }

에러로그

ERROR in   Error: C:\Users\Administrator\Desktop\sumin\lecture-frontend-dev-env/node_modules/core-js/modules/_classof.js?:4

  var TAG = __webpack_require__(/*! ./_wks */ "./node_modules/core-js/modules/_wks.js")('toStringTag'); // ES3 wrong her  e

                                                                                       ^

  TypeError: __webpack_require__(...) is not a function

  - _classof.js?:4 eval

    [.]/[core-js]/modules/_classof.js?:4:86

  - index.html:154 Object../node_modules/core-js/modules/_classof.js

    C:/Users/Administrator/Desktop/sumin/lecture-frontend-dev-env/src/index.html:154:1

  - index.html:22 __webpack_require__

    C:/Users/Administrator/Desktop/sumin/lecture-frontend-dev-env/src/index.html:22:30

  - es6.object.to-string.js?:3 eval

    [.]/[core-js]/modules/es6.object.to-string.js?:3:15

  - index.html:924 Object../node_modules/core-js/modules/es6.object.to-string.js

    C:/Users/Administrator/Desktop/sumin/lecture-frontend-dev-env/src/index.html:924:1

  - index.html:22 __webpack_require__

    C:/Users/Administrator/Desktop/sumin/lecture-frontend-dev-env/src/index.html:22:30

  - _cof.js?:3 Module.eval

    [.]/[core-js]/modules/_cof.js?:3:97

  - _cof.js?:12 eval

    [.]/[core-js]/modules/_cof.js?:12:30

  - index.html:166 Module../node_modules/core-js/modules/_cof.js

    C:/Users/Administrator/Desktop/sumin/lecture-frontend-dev-env/src/index.html:166:1

  - index.html:22 __webpack_require__

    C:/Users/Administrator/Desktop/sumin/lecture-frontend-dev-env/src/index.html:22:30

Child html-webpack-plugin for "index.html":

     1 asset

    Entrypoint undefined = index.html

    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 1.04 KiB {0} [built]

    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 1000 bytes {0} [built]

    [./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 631 bytes {0} [built]        

    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {0} [built]

        + 85 hidden modules

npm ERR! code ELIFECYCLE

npm ERR! errno 2

npm ERR! lecture-frontend-dev-env@1.0.0 build: `webpack --progress`

npm ERR! Exit status 2

npm ERR!

npm ERR! Failed at the lecture-frontend-dev-env@1.0.0 build script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2021-01-21T13_23_59_787Z-debug.log

구글링을 했는데도 뚜렷한 원인을 잘 모르겠습니다..ㅜㅜ

course-thumbnail

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

바벨(풀이)

강의실 바로가기

답변 1

답변을 작성해보세요.

0

김정환님의 프로필

김정환

지식공유자

2021.01.22

올려주신걸로는 정확이 파악하기가 어렵네요. 혹시 깃헙 같은걸로 재현되는 코드를 직접 볼 수 있을까요?

이 글과 비슷한 Q&A