Webpack npm run build with React Typescript

Kuko visuals — Fri, 15 Jul 2022 15:02:06 +0000

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

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

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

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

Meet Software Developers

Kuko visuals — Sat, 02 Jul 2022 00:23:44 +0000

Hi all,

I've been searching for a place to meet like minded Software Engineers. But, what I want is a place to interact with someone that have similar projects or frameworks. To dive into a project not about asking questions or teaching. That's why I want to create this project and would like to find programmers who want to collaborate. I have zero intentions on selling this or making a profit. It's only about a place where Software Engineers like me can find similar people to collaborate with and even local people, no need to go to meet ups or discords. Let me walk you through the Idea.

Landing Page/explorer will have different programming languages

Lets say you clicked on JavaScript. It will send you to the JavaScript Page, Where Users from the app will share their repo from Github and display the tech stack used. The size of the circles will be by how many stars they have or something.

This is the coolest part of the App. It will be created with D3js (may be in 3D in the future) so while using the mouse the user can zoom out/in and move around the page regardless of how big it gets.

So, Lets say you filter for repos that have "stock market" in the description and you are curious about Nichols Github and want to check it out so, you click on the circle that says Nichole.

It will take you to Nichol's profile where she describes more about her repo and what it does.

After looking at the description you want to collaborate with her. So the user sends her a message to link up with her, and how he/she can help.

Here is where it gets tricky. She has the option to send the user some sort of challenge. Why? you may ask. Well, one thing I want to avoid is to have people that are not serious about coding or not serious in general. One way to fix that is to give them a challenge. This will let the owner see how he/she codes and if the owner of the repo would want to collaborate with him/her. (I still don't have 100% clear how to make this feature, I think is something to discus) the point of the feature is to filter people that are not serious or lack the technical skills you are looking for.

Let me know if anyone wants to collaborate in this project. I'm comfortable in the Frontend but, lack some skills in the backend. I would love to build this app using TypeScript, React, Redux, GraphQl, Apollo, MongoDb.

I have some spaghetti code in my Github, where I'm trying to get the skeleton of the app up and running. I'll probably change the repo once the basics are done.

https://github.com/kukovisuals/dashboard-tables

DEV Community: Kuko visuals

Webpack npm run build with React Typescript

Meet Software Developers