-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
npm run dev 할 때 에러발생
24.03.24 15:33 작성 조회수 79
0
에러메세지:
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.module.rules[0] has an unknown property 'mode'. These properties are valid:
object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }
-> A rule description with conditions and effects for modules.
webpack.config.js 파일 코드
const path = require("path"); //path: 노드에서 경로 조작하는 것을 쉽게 해준다.
const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
module.exports = {
name: "wordrelay",
mode: "development", // 실서비스: production
devtool: "eval", // 실서비스: hidden-source-map
resolve: {
extensions: [".js", ".jsx"], //이렇게 적으면 웹펙이 알아서 js나 jsx가 있는지 확인을 하고, react-react-to-dom-word-relay 이거 찾아서 app.js로 만들어준다.
},
// 입력
entry: {
app: ["./client"],
},
module: {
rules: [
{
test: /\.jsx?$/, //정규표현식: JS랑 JSX 파일에 룰을 적용하겠다.
loader: "babel-loader",
mode: "development",
options: {
//babel-loader의 옵션
presets: [
[
"@babel/preset-env",
{
targets: {
browsers: ["> 1% in KR"], // browserslist
},
debug: true,
},
],
"@babel/preset-react",
],
plugins: [
"@babel/plugin-proposal-class-properties",
"react-refresh/babel",
],
},
},
],
},
plugins: [new RefreshWebpackPlugin()],
//출력
output: {
path: path.join(__dirname, "dist"), //컴퓨터 마다 파일 경로가 다 다른데 현재폴더안에 자동으로 dist폴더를 만들어준다.
filename: "app.js",
publicPath: "/dist/",
},
devServer: {
publicPath: '/dist/',
hot: true,
devMiddleware: { publicPath: "/dist" },
static: { directory: path.resolve(__dirname) },
},
//터미널에 webpack쓰면 두 파일을 합쳐준다.
};
package.json 코드
{
"name": "lecture",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack --mode development",
"dev": "webpack serve --env development",
"assets": "webpack --config webpack.config.js --mode development"
},
"author": "tk",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.24.0",
"@babel/preset-env": "^7.24.0",
"@babel/node": "^7.23.9",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
"react-refresh": "^0.14.0",
"webpack": "^5.90.3",
"webpack-cli": "^7.23.9",
"webpack-dev-server": "^5.0.3"
},
"dependencies": {
"babel-loader": "^9.1.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
호환문제인 것같은데 어떤 부분이 호환문제가 생기는건지 잘 모르겠습니다.
답변을 작성해보세요.
1
0
인프런 AI 인턴
2024.03.24
안녕하세요, 인프런 AI 인턴입니다.
질문하신 내용과 유사한 상황을 해결한 내용이 여기 있습니다. webpack dev server option 이 invalid 하답니다. 해당 게시글에서도 webpack configuration object의 오류를 다루고 있으며, 특정 속성이 예상하는 형식과 일치하지 않아 발생하는 문제에 대해 설명하고 있습니다.
질문하신 내용에서 보이는 문제 중 하나는 webpack.config.js
파일 내 module.rules
배열 내의 객체에 mode
속성이 포함된 것입니다. Webpack의 기대하는 rule
객체의 설계와는 맞지 않습니다. rules
는 모듈의 생성 방법을 정의해야 하며 여기엔 loader
와 해당 loader
의 options
, 처리할 파일의 test
정규식 등이 포함될 수 있습니다. 하지만 mode
속성은 module.rules
에 포함되지 않고, 대신 최상위 구성 객체에 선언되어야 합니다. 실제로 이미 module.exports
내에서 mode: "development"
로 적절하게 선언하셨습니다.
이 문제를 해결하기 위해선, module.rules
배열 내 객체에서 mode
를 제거해야 합니다. 나머지 설정은 적절하게 구성된 것으로 보입니다.
위 사례 외에도 문제 해결에 도움이 될 수 있는 다른 유사 질문 사례들입니다:
- webpack-cli에러 질문! - webpack-cli 관련 오류 해결 방법에 대해 다루고 있으며, 여러 다른 설정 관련 문제를 진단하는 데 도움이 될 수 있습니다.
- npm run dev - webpack-cli 에러 - npm run dev 실행 시 발생하는 webpack-cli 오류와 그 해결 방안에 대해 다룹니다.
각 사례는 웹팩 설정과 관련된 유사한 오류를 해결하는 방법에 대한 구체적인 가이드를 제공하며, 이를 통해 설정 파일을 정확히 조정하는 방법에 대해 배울 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
답변 2