DEV Community

Cover image for Webpack npm run build with React Typescript
Kuko visuals
Kuko visuals

Posted on

2 1

Webpack npm run build with React Typescript

I was getting this error when I was trying to deploy my app in AWS linux ec2 server.

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
Enter fullscreen mode Exit fullscreen mode

The tsconfig.json wasn't reading any React. After setting up webpack and tsconfig I was still missing I think 2 lines of code in the tsconfig file

"jsx": "react-jsx"

And this in webpack

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

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"]
}

Enter fullscreen mode Exit fullscreen mode

That fixed the error. I still need to optimize webpack and the devtool is killing the build process so, I had to take it out.

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"]
  },
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up