• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable

24.03.23 21:35 작성 조회수 68

1

TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable

문제 없어보이는데 계속 저 에러가 발생하네요

npm run build 만 입력하면 production이 아니니까 타야할거같은데 환경변수를 집어넣어주면 에러가 발생안하고 안넣어주면 에러가 발생합니다.

 

const path = require("path");

const webpack = require("webpack");
const childProcess = require("child_process");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const isProduction = process.env.NODE_ENV === "production";
module.exports = {
  mode: "development",
  entry: {
    mainSrc: "./app.js",
  },
  output: {
    path: path.resolve("./dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: isProduction
          ? [MiniCssExtractPlugin.loader, "css-loader"]
          : ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: "asset/resource",
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: "/node_modules/",
      },
    ],
  },
  plugins: [
    new webpack.BannerPlugin({
      banner: `
      Build Date : ${new Date().toLocaleString()}
      Commit Version : ${childProcess.execSync("git rev-parse --short HEAD")}
      Author  : ${childProcess.execSync("git config user.name")}
      `,
    }),
    new webpack.DefinePlugin({
      TWO: "1+1",
      TWO_STRING: JSON.stringify("1+1"),
      "api-domain": JSON.stringify("http://dev.api.domain.com"),
    }),

    new HtmlWebpackPlugin({
      template: "./src/index.html",
      templateParameters: {
        env: process.env.NODE_ENV === "development" ? "개발용" : "운영",
      },
      minify: process.env.NODE_ENV === "production" && {
        collapseWhitespace: true,
        removeComments: true,
      },
    }),

    new CleanWebpackPlugin(),

    ...(process.env.NODE_ENV === "production" && [
      new MiniCssExtractPlugin({
        filename: "[name].css",
      }),
    ]),
  ],
};

 

답변 1

답변을 작성해보세요.

0

코드 맨 아래 플러그인 지정하는 부분에서 발생한 원인이네요.

    ...(process.env.NODE_ENV === "production" && [
      new MiniCssExtractPlugin({
        filename: "[name].css",
      }),
    ]), 

첫 번째 표현식이 false 이기 때문에 전체 문장은 false가 될 겁니다. [...false] 로 평가되어 불리언 타입에 나머지 연산을 시도하다가 TypeError 가 발생했을 것 같아요.

삼항 연산자로 한 번 바꿔보시겠습니까?

    ...(mode === "production"
      ? [new MiniCssExtractPlugin({ filename: `[name].css` })]
      : [])