News Articles webpack

State of the Web: Bundlers & Build Tools

Ever since Browserify, bundlers have been extremely important in the web ecosystem. They provide the ability to automatically process code, which opens up opportunities for performance optimization and non-native languages. This article looks at the background of bundlers, why they are essential, and their current state. Background of Bundlers The Web Before Bundlers For a […]

Quickest method to have webpack recompile your files

Just today I started noticing that when my react code rebuilds, I get eslint errors in the console, but not in my IDE. Even stranger was the fact that when I run eslint by itself in the commandline, it doesn’t show that anything was wrong: eslint –cache –format stylish –ext ‘.js,.jsx,.ts,.tsx’ –quiet ./ What gives? […]

Using Apache ECharts with React and TypeScript: Optimizing Bundle Size

In our first article on this topic, Using Apache ECharts with React and TypeScript, we received a valuable insight from one of our readers. They suggested looking into Use Apache ECharts with bundler and NPM in order to minimize your bundle size. Now, who doesn’t want that!? We tried out the approach and integrated it […]

What is the use of UseMemo

useMemo is a memorise hook that avoid rendering a Component if there is no change in props let’s take an example when a parent child renders all of it’s children component will render but we can avoid rendering of children if there is no change in the props by wrapping it with a React.useMemo hook […]

Converting to Vite (Part 2)

In this post, I’m going to describe some of the snags that we encountered as we transitioned to Vite – at their best, snags become lessons! Open Sauced is a Progressive Web Application (PWA), and this includes the use of a Service Worker. In my personal understanding, a Service Worker definition should be packaged as […]

Time to say goodbye to Webpack?

Before we answer the big question, lets look at why we are even considering it. If you look at bestofJS data for 2021, you would see that the rising star in the build tools category is Vite, leaving Webpack far behind in terms of popularity. Check out more stats here: 2021 JavaScript Rising Stars Lets […]

Adding Vite to Your Existing Web App

Vite (pronounced “veet”) is a newish JavaScript bundler. It comes batteries-included, requires almost no configuration to be useful, and includes plenty of configuration options. Oh—and it’s fast. Incredibly fast. This post will walk through the process of converting an existing project to Vite. We’ll cover things like aliases, shimming webpack’s dotenv handling, and server proxying. […]

How to Build a Micro Frontend with Webpack's Module Federation Plugin

Web applications can grow in size and complexity over time, making the addition of new features difficult. Micro Frontend architecture helps with scaling and bundle size and allows multiple teams to develop and deploy different parts of the app. Webpack 5 offers the Module Federation Plugin that lets you create multiple separate builds without dependencies […]

The Efficient Way to Create a MERN App

Whether you are a newbie or an expert in the programming space, you‘ve probably wondered how others developers set up and configure their starting project application. This article tackles an efficient and intelligent way to set up a production-ready application. We will look into how to set up a MERN Stack application with tools, frameworks […]

React Micro Frontends with Webpack's Module Federation

Micro Frontends is a very popular topic in today’s frontend world. Most of the teams tend to adopt this micro frontend strategy to develop their large and complex web applications, due to many advantages it provides such as, Separate, decoupled codebases Independent deployment Incremental updates Below diagram showcases some of the important concepts of micro […]

How I Created a Crowdfunding Platform with Web3 & Micro-Frontends

Over the past few months, I was learning about Micro-Frontend & Web3 Technologies. As the best way to learn is to try things hands-on, so I built up a small side-project to test out my understanding of the topics. The aim of the project was to create a Crowdfunding Platform based on the Ethereum Blockchain […]

Disable to load chunk files via bootstrap script

How to disable dynamic loading chunked css files after making production build in VueJs2? Problem here // mini-css-extract-plugin CSS loading var cssChunks = {"chunk-4f730675":1}; if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]); else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) { promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) { var href = "css/" + ({}[chunkId]||chunkId) + "." + {"chunk-4f730675":"ba84c417"}[chunkId] + ".css"; ……….. var head = […]

Building Docker Images Faster for Webpack

At Okteto we are very passionate about increasing developer productivity. We were looking for ways to improve our container build times when we came across an amazing project, BuildKit. BuildKit helps us build Docker images faster than ever. But when getting started we found that there were very few practical examples on how one could […]

Problem with project dependency tree in Create React App

I’ve cloned a GitHub repo and was installing the packages. I first ran yarn install, and then I ran yarn build. But the second command gave me an error: Could somebody help me with this please? I would really appreciate it! Thank you! Source: React – Stack Overflow

ASP.NET 6 with ReactJS – browser not refreshing on hot reload with react-scripts 5.0.0

I have an ASP.NET 6 app with ReactJS, created some time ago using Visual Studio 2022 ASP.NET Core with React.js template. The ClientApp is a React app created with create-react-app. I’ve updated my react-scripts package to version 5.0.0 (from 4.0.3). One of the significant changes, AFAIK, is that it uses webpack 5 now. Since this […]

Simple Amazon Location Service Starter

I’ve published a simple Amazon Location Service starter 🎉 In the previous articles, I’ve shown how to build an Amazon Location Service application on the assumption that it has a login function and a framework, but I’ve built a simple starter called “amazon-location-service-starter” that doesn’t use these functions. amazon-location-service-starter How to use All you have […]

Next js problem with @ant-design/charts, error

I work on a large project (monorepo). The technology stack is next, apollo graphql, antd desing. I wanted to add @ant-design/charts package, but it crashes me error below. I have run out of ideas for repair: c Error on page: ../../node_modules/@antv/xflow/dist/index.css Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm Location: ../../node_modules/@ant-design/flowchart/es/graph/index.js Terminal: […]

How to add @babel/plugin-proposal-optional-chaining to React with Webpack 4.46 or 5.65

I’m trying to bring in some 3rd party code that was converted from Typescript to .jsx files by tsc. When I run my build it cannot find the plugin. I don’t have a webpack.config.js in my root. Instead I have internals/webpack/webpack.base.babel.js internals/webpack/webpack.dev.babel.js internals/webpack/webpack.prod.babel.js I installed the plugin like this: npm install –save-dev @babel/plugin-proposal-optional-chaining In my […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.