인프런 커뮤니티 질문&답변

안녕하세요. 강의에서 배운 내용 응용해서 사이드 프로젝트 만드는 중인데

Module not found: Error: Can't resolve './App' in '/Users/taetae/Documents/github/PicKIvy/frontend/src' 오류가 고쳐지지 않아 질문드립니다.

(시도해본 해결방법들)

[ Tsconfig.json ]

1. “jsx": "react-jsx" 으로 설정됐는지 확인 -> 그래도 안됌

2. “paths" 확인

>  "baseUrl": "src",  (원래 “.”이었음)

    "paths": {

      "@pages/*": ["pages/*"],

      "@components/*": ["components/*"],

      "@layouts/*": ["layouts/*"],

      "@hooks/*": ["hooks/*"],

      "@utils/*": ["utils/*"],

      "@typings/*": ["typings/*"]

    },

 패스에 전부 src/붙여서  "@pages/*": [“src/pages/*"], 해봤는데 안됨

3. “moduleResolution": "node", 확인 -> 그래도 안됌

[ Web pack.config]

1. Extensions: [ “.tsx”] 으로 설정됐는지 확인 -> 그래도 안됌

2. package-lock.json지우고 다시 Npm install

안됌 ( rm -rf node_modules package-lock.json ->

npm cache clean --force -> npm install )

[ index.tsx ]

1. 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 하니까 에러떠서 ./로 했습니다.

이것때문에 계속 못하고 있는데 저에게 답을 알려주시면 감사하겠습니다...ㅠ.ㅜ