인프런 커뮤니티 질문&답변
작성한 질문수
npx webpack 후 에러
작성
·
70
0
강의를 클론 받은 후, /sleact/setting/ts 경로에서 npm i 후 npx webpack을 입력하면 아래와 같이 에러가 나옵니다.
다른 컴퓨터로 했을때는 작동 되지만, 제가 사용중인 컴퓨터에서는 작동되지 않습니다.
npm i 입력 후 터미널 메세지
ㅡ
up to date, audited 643 packages in 4s
74 packages are looking for funding
run npm fund for details
26 vulnerabilities (3 low, 8 moderate, 12 high, 3 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run npm audit for details.
npx webpack 명령후 입력후 터미널 메세지
[webpack-cli] Failed to load '/Users/kanghyun/Desktop/study/React/zerocho/sleact/setting/ts/webpack.config.ts' config
[webpack-cli] SyntaxError: The requested module 'webpack' does not provide an export named 'Configuration'
at ModuleJobSync.runSync (node:internal/modules/esm/module_job:387:37)
at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:427:47)
at loadESMFromCJS (node:internal/modules/cjs/loader:1565:24)
at Module._compile (node:internal/modules/cjs/loader:1716:5)
at Object.loadTS [as .ts] (node:internal/modules/cjs/loader:1826:10)
at Module.load (node:internal/modules/cjs/loader:1469:32)
at Function._load (node:internal/modules/cjs/loader:1286:12)
at TracingChannel.traceSync (node:diagnostics_channel:322:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
at Module.require (node:internal/modules/cjs/loader:1491:12)
답변 2
0
지금 해본 결과 windows에서 동일 웹팩 버전으로 저는 되는 상황이고요.
import webpack, { type Configuration as WebpackConfiguration } from 'webpack';
import { type Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';이렇게 type을 한 번 붙여서 해보시고, 안 된다면 폴더 지운 후에 다시 clone해서 해보셔야할 것 같습니다.
말씀하신대로 약 10회 클론해보았습니다..
아래와 같이 입력해도 오류 메세지는 변하지 않습니다 ㅜㅜ
import webpack, { type Configuration as WebpackConfiguration } from 'webpack';
import { type Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';노드 버전 문제였네요. 최신 노드 버전에서 ts 처리가 달라졌습니다(이제 노드가 ts를 실행할 수 있습니다)
NODE_OPTIONS="--no-experimental-strip-types" npx webpack
이렇게 노드가 ts를 처리하지 않게 바꿔주어야 합니다.
위의 말씀에 NODE_OPTIONS="--no-experimental-strip-types" npx webpack는 이해하지 못하였습니다. 다만, 노드23 버전에서 22버전으로 다운그레이드 후 문제 해결했습니다. 감사합니다.
npm run dev시 새로운 에러가 발생하여 재질문 드립니다.
http://localhost:3090/Login 연결시, 크롬에서 Failed to compile. 가 발생하였습니다.
Module not found: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/layouts'
layouts/workspace.tsx터미널 메세지입니다.
ERROR in ./pages/Login/index.tsx 17:0-39
Module not found: Error: Can't resolve '@hooks/useInput' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/Login'
@ ./layouts/App.tsx 7:9-31
@ ./client.tsx 9:0-32 12:95-98
ERROR in ./pages/Login/index.tsx 19:0-37
Module not found: Error: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/Login'
@ ./layouts/App.tsx 7:9-31
@ ./client.tsx 9:0-32 12:95-98
ERROR in ./pages/SignUp/index.tsx 17:0-39
Module not found: Error: Can't resolve '@hooks/useInput' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/SignUp'
@ ./layouts/App.tsx 11:9-32
@ ./client.tsx 9:0-32 12:95-98
ERROR in ./pages/SignUp/index.tsx 23:0-37
Module not found: Error: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/SignUp'
@ ./layouts/App.tsx 11:9-32
@ ./client.tsx 9:0-32 12:95-98
ㅡ
tsconfig.json 파일입니다
"paths": { "@hooks/*": ["hooks/*"], "@components/*": ["components/*"], "@layouts/*": ["layouts/*"], "@pages/*": ["pages/*"], "@utils/*": ["utils/*"], "@typings/*": ["typings/*"] }
ㅡ
webpack.config.ts 파일입니다
resolve: { extensions: ['.js', '.jsx', '.front', '.tsx', '.json'], alias: { '@hooks': path.resolve(__dirname, 'hooks'), '@components': path.resolve(__dirname, 'components'), '@layouts': path.resolve(__dirname, 'layouts'), '@pages': path.resolve(__dirname, 'pages'), '@utils': path.resolve(__dirname, 'utils'), '@typings': path.resolve(__dirname, 'typings'), // 경로 폴더들 }, },
ㅡ
현재 터미널 경로입니다
/Desktop/study/react/zerocho/sleact/setting/front
ts 폴더에서 설정 후, front 라는 폴더명으로 바꾸어서 진행중입니다. 감사합니다
0
안녕하세요, 인프런 AI 인턴입니다. taei님께서 직면한 문제는 주로 Webpack 설정이나 TypeScript 설정과 관련이 있을 수 있습니다. 이 문제를 해결하는 방법에 대한 기존의 몇 가지 답변을 안내드릴게요.
webpack-bundle-analyzer 모듈 설치: Webpack 구성을 실행하는 동안 특정 모듈이나 플러그인이 누락된 경우가 있을 수 있습니다. 해당 플러그인 중 하나인 ‘webpack-bundle-analyzer’를 설치해 보세요.
- 명령어:
npm i -D webpack-bundle-analyzer --force
- 관련 답변: npm run dev 를 실행할시 webpack error 가 발생합니다!
- 명령어:
react-refresh 모듈 설치: 특정 플러그인이 빠져있으면 발생하는 에러일 수 있습니다.
- 명령어:
npm i -D react-refresh
- 관련 답변: npm run build시 에러발생
- 명령어:
WebPack 및 관련 모듈 재설치: Webpack과 관련된 패키지를 최신 버전으로 재설치하세요.
node_modules폴더와package-lock.json파일을 삭제한 후,npm install을 다시 시도해 보세요.오류 로그 확인: 로그에 명시된 문제는 주로 TypeScript와 Webpack 설정의 비호환성 때문일 수 있습니다. Webpack 관련 모듈의 버전을 확인하시고 일치하는 버전으로 재설치가 필요합니다.
- 관련 답변: setting/ts폴더 복붙해도 에러가 납니다
- 관련 답변: setting/ts폴더 복붙해도 에러가 납니다
위의 방법을 통해 문제를 해결할 수 있기를 바라며, 추가적으로 궁금하신 점이 있다면 게시판에 이어서 질문해 주세요. 지식공유자 분께서 곧 답변해 주실 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
빠른 답변 감사합니다! npm ls webpack 입력 후 메세지 입니다
├─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.7
│ └── webpack@5.74.0 deduped
├─┬ @types/webpack@5.28.0
│ └── webpack@5.74.0 deduped
├─┬ babel-loader@8.2.5
│ └── webpack@5.74.0 deduped
├─┬ css-loader@6.7.1
│ └── webpack@5.74.0 deduped
├─┬ fork-ts-checker-webpack-plugin@7.2.13
│ └── webpack@5.74.0 deduped
├─┬ style-loader@3.3.1
│ └── webpack@5.74.0 deduped
├─┬ webpack-cli@4.10.0
│ ├─┬ @webpack-cli/configtest@1.2.0
│ │ └── webpack@5.74.0 deduped
│ └── webpack@5.74.0 deduped
├─┬ webpack-dev-server@4.10.1
│ ├─┬ webpack-dev-middleware@5.3.3
│ │ └── webpack@5.74.0 deduped
│ └── webpack@5.74.0 deduped
└─┬ webpack@5.74.0
└─┬ terser-webpack-plugin@5.3.6
└── webpack@5.74.0 deduped
다른 컴퓨터 역시 똑같습니다