React Typescript로 Webpack npm 실행 빌드

AWS Linux ec2 서버에 내 앱을 배포하려고 할 때 이 오류가 발생했습니다.
Module parse failed: Unexpected token
File was processed with these loaders:
 * ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| const container = document.getElementById('root');
| const root = createRoot(container);
> root.render(<Provider store={store}>
|               <App />
|       </Provider>);

webpack 5.73.0 compiled with 1 error in 4284 ms


tsconfig.json이 React를 읽지 않았습니다. webpack 및 tsconfig를 설정한 후에도 여전히 누락되었습니다. tsconfig 파일에 2줄의 코드가 있는 것 같습니다.
"jsx": "react-jsx"
그리고 이것은 웹팩에서

     { 
        test: /\.tsx?$/, 
        loader: "ts-loader",
        exclude: /node_modules/,
        options: { allowTsInNodeModules: true }
      }

tsconfig.json
{
  "compilerOptions": {
    "target": "ES5",
    "baseUrl": "./",
    "outDir": "./build",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "rootDir": "src",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "suppressImplicitAnyIndexErrors": true,
    "importHelpers": true,
    "noImplicitAny": true,
    "removeComments": true,
    "module": "es6",
    "preserveConstEnums": true,
    "jsx": "react-jsx"
  },
  "include": ["src/**/*"],
  "exclude": ["build", "scripts"]
}



오류가 수정되었습니다. 여전히 webpack을 최적화해야 하고 devtool이 빌드 프로세스를 죽이고 있으므로 제거해야 했습니다.
webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  // watch: true,
  mode: "production",
  entry: "./src/index.tsx",
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'build')
  },
  optimization: {
    chunkIds: 'named',
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        },
      }),
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [
      new MiniCssExtractPlugin(), 
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, './public/index.html'), // template file
        filename: 'index.html', // output file
   }),
    new CleanWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', "@babel/preset-react"]
          }
        }
      },
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'autoprefixer', {
                      overrideBrowserslist: ['last 3 versions', 'ie >9']
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.scss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "autoprefixer",
                    {
                      overrideBrowserslist: ['last 3 versions', 'ie >9']
                    },
                  ],
                ],
              },
            },
          },
          'sass-loader'
        ],
      },
     {
          test: /\.(svg|eot|woff|woff2|ttf)$/,
          use: ['file-loader']
      },
      { 
        test: /\.tsx?$/, 
        loader: "ts-loader",
        exclude: /node_modules/,
        options: { allowTsInNodeModules: true }
      }
    ]
  },
   resolve: {
     extensions: ["*",".ts", ".tsx", ".js", "jsx"]
  },
}

좋은 웹페이지 즐겨찾기