• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

이전에 코드를 올려달라고 하셔서 코드 올립니다.

20.04.02 08:43 작성 조회수 1.36k

0

질문도 같이 올리겠습니다~

================== 이전 질문입니다. sass 실습 파트입니다. ======================

강의랑 똑같이 한 것 같은데 계속 오류가 떠서 자력으로 해결하기가 어려워 질문을 합니다..

<에러 리포트 > 

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\AndrewLee\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using npm@6.14.4
3 info using node@v13.12.0
4 verbose run-script [ 'prebuild''build''postbuild' ]
5 info lifecycle lecture-frontend-dev-env@1.0.0~prebuild: lecture-frontend-dev-env@1.0.0
6 info lifecycle lecture-frontend-dev-env@1.0.0~build: lecture-frontend-dev-env@1.0.0
7 verbose lifecycle lecture-frontend-dev-env@1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle lecture-frontend-dev-env@1.0.0~build: PATH: C:\Users\AndrewLee\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\AndrewLee\Desktop\example_web\lecture-frontend-dev-env\node_modules\.bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\AndrewLee\bin;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\iCLS;C:\Program Files\Intel\Intel(R) Management Engine Components\iCLS;C:\Program Files\Oculus\Support\oculus-runtime;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Intel\WiFi\bin;C:\Program Files\Common Files\Intel\WirelessCommon;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\WINDOWS\System32\OpenSSH;C:\Program Files\dotnet;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files\Java\jdk1.8.0_201\bin;C:\Program Files\Git\cmd;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn;C:\Program Files\Microsoft SQL Server\140\Tools\Binn;C:\Program Files\Microsoft SQL Server\140\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\150\DTS\Binn;C:\Program Files\Perforce;C:\Program Files\PuTTY;C:\Program Files\nodejs;C:\Program Files\nodejs;C:\Users\AndrewLee\Desktop\파이썬\Scripts;C:\Program Files\Java\jdk1.8.0_201\bi;C:\Users\AndrewLee\AppData\Local\Microsoft\WindowsApps";C:\Program Files\Intel\WiFi\bin;C:\Program Files\Common Files\Intel\WirelessCommon;C:\Program Files\Java\jdk1.8.0_201;C:\Users\AndrewLee\AppData\Local\GitHubDesktop\bin;C:\Users\AndrewLee\AppData\Local\Programs\Microsoft VS Code\bin;C:\Bitnami\wampstack-7.3.15-2\mysql\bin;C:\Program Files\heroku\bin;C:\Users\AndrewLee\AppData\Roaming\npm
9 verbose lifecycle lecture-frontend-dev-env@1.0.0~build: CWD: C:\Users\AndrewLee\Desktop\example_web\lecture-frontend-dev-env
10 silly lifecycle lecture-frontend-dev-env@1.0.0~build: Args: [ '/d /s /c''webpack --progress' ]
11 silly lifecycle lecture-frontend-dev-env@1.0.0~build: Returned: code: 2  signal: null
12 info lifecycle lecture-frontend-dev-env@1.0.0~build: Failed to exec build script
13 verbose stack Error: lecture-frontend-dev-env@1.0.0 build: `webpack --progress`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\AndrewLee\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\AndrewLee\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1026:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid lecture-frontend-dev-env@1.0.0
15 verbose cwd C:\Users\AndrewLee\Desktop\example_web\lecture-frontend-dev-env
16 verbose Windows_NT 10.0.17763
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\AndrewLee\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v13.12.0
19 verbose npm  v6.14.4
20 error code ELIFECYCLE
21 error errno 2
22 error lecture-frontend-dev-env@1.0.0 build: `webpack --progress`
22 error Exit status 2
23 error Failed at the lecture-frontend-dev-env@1.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2true ]

<webpack.config.js>

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",
          "sass-loader"
        ]
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        loader: "url-loader",
        options: {
          name: "[name].[ext]?[hash]",
          limit: 10000
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  },
  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` })]
      : [])
  ]
};

나머지는 커밋한 시점에서 손댄 부분이 없습니다 ㅠ 

좋은 강의 해주셔서 감사합니다. 

 코드는 https://github.com/JoonsongLee/question.git 에 zip 파일로 올렸습니다

답변 2

·

답변을 작성해보세요.

1

올려주신 코드 실행해 봤는데 저는 이런 오류 메세지를 확인했어요. 

ERROR in ./src/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in /Users/jeonghwan/Downloads/lecture-frontend-dev-env/node_modules/@babel/helper-compilation-targets/package.json

구글에 검색해 보니 노드 버전 이슈이거나 패키지 재설치로 해결한 기록이 있네요. 
https://github.com/babel/babel/issues/11216

이렇게 한 번 시도해 보세요.

1) 최신버전 노드로 사용해 주세요 (저는 v13.11.0 입니다)

2) node_modules 폴더를 삭제하고 다시 npm i 로 설치해 주세요

3) 그래도 안되면 package-lock.json과 node_modules 둘다 삭제하고 npm i로 설치해 주세요 

0

혹시 안되시면 이것도 시도해 보세요. 저도 비슷한 문제를 겪었는데 node-sass 리빌드 하니깐 되네요

npm rebuild node-sass