Module not found: Error: Can't resolve './App' 에러

Question

안녕하세요. 강의에서 배운 내용 응용해서 사이드 프로젝트 만드는 중인데 Module not found: Error: Can't resolve './App' in '/Users/taetae/Documents/github/PicKIvy/frontend/src' 오류가 고쳐지지 않아 질문드립니다.   (시도해본 해결방법들) [ Tsconfig.json ] “jsx": "react-jsx" 으로 설정됐는지 확인 -> 그래도 안됌 “paths" 확인 >  "baseUrl": "src",  (원래 “.”이었음)     "paths": {       "@pages/*": ["pages/*"],       "@components/*": ["components/*"],       "@layouts/*": ["layouts/*"],       "@hooks/*": ["hooks/*"],       "@utils/*": ["utils/*"],       "@typings/*": ["typings/*"]     },  패스에 전부 src/붙여서  "@pages/*": [“src/pages/*"], 해봤는데 안됨   “moduleResolution": "node", 확인 -> 그래도 안됌   [ Web pack.config] Extensions: [ “.tsx”] 으로 설정됐는지 확인 -> 그래도 안됌 package-lock.json지우고 다시 Npm install 안됌 ( rm -rf node_modules package-lock.json -> npm cache clean --force -> npm install )   [ index.tsx ] import App from './App'; 을 import App from './App.tsx; ‘ 로 해봤는데 안됌 [ 폴더구조, tsconfig ] [ 웹팩 ] import path from 'path'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import webpack, { Configuration as WebpackConfiguration } from 'webpack'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; // import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'; interface Configuration extends WebpackConfiguration { devServer?: WebpackDevServerConfiguration; } const isDevelopment = process.env.NODE_ENV !== 'production'; const config: Configuration = { name: 'PicKivy', mode: isDevelopment ? 'development' : 'production', devtool: isDevelopment ? 'inline-source-map' : 'hidden-source-map', resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], alias: { '@hooks': path.resolve(__dirname, 'src/hooks'), '@components': path.resolve(__dirname, 'src/components'), '@layouts': path.resolve(__dirname, 'src/layouts'), '@pages': path.resolve(__dirname, 'src/pages'), '@utils': path.resolve(__dirname, 'src/utils'), '@typings': path.resolve(__dirname, 'src/typings'), }, }, entry: { app: './src/index.tsx', }, target: ['web', 'es6'], module: { rules: [ { test: /\.tsx?$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: [ [ '@babel/preset-env', { targets: { browsers: ['> 0.25%', 'not dead'] }, // 최신 브라우저 타겟팅 debug: isDevelopment, }, ], '@babel/preset-react', '@babel/preset-typescript', ], plugins: [ '@babel/plugin-transform-runtime', isDevelopment && 'react-refresh/babel', '@emotion/babel-plugin', ].filter(Boolean), }, }, { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.(png|jpg|gif|svg)$/, type: 'asset/resource', }, ], }, plugins: [ new ForkTsCheckerWebpackPlugin({ async: false, }), new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }), ], output: { path: path.join(__dirname, 'dist'), filename: '[name].[contenthash].js', publicPath: '/dist/', }, devServer: { historyApiFallback: true, port: 3000, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname, 'public') }, proxy: { '/api/': { target: 'http://localhost:3000', changeOrigin: true, ws: true, }, }, }, }; if (isDevelopment && config.plugins) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); config.plugins.push( new ReactRefreshWebpackPlugin({ overlay: { useURLPolyfill: true, }, }), ); // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: false })); } if (!isDevelopment && config.plugins) { config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true })); // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' })); } export default config; 코드 복붙하니까 코드가 이상하게 나와서 캡쳐본도 올립니다. (test: /\.tsx? 아래부분부터)   [ App, index ] @page 하니까 에러떠서 ./로 했습니다.   이것때문에 계속 못하고 있는데 저에게 답을 알려주시면 감사하겠습니다...ㅠ.ㅜ

제로초(조현영) · Answer

일단 저 에러가 어떤 상황에서 발생하는 에러인 건가요? 저 에러 밑에 추가적인 다른 스택 트레이스는 없나요?