DEV Community: Sekti Wicaksono

If you had the same issue this could be the medicine for your tanstack-router project

Sekti Wicaksono — Wed, 08 Jul 2026 23:02:24 +0000

Sekti Wicaksono

Jul 8

Tanstack Router + Vite race condition in filewatcher (EPERM)

#vite #tanstackrouter #tanstackstart

1 min read

Tanstack Router + Vite race condition in filewatcher (EPERM)

Sekti Wicaksono — Wed, 08 Jul 2026 22:57:38 +0000

Recently I got an issue when creating a new route using Tanstack Router + Vite

So by adding this config could solved the issue of EPERM: operation not permitted like below:

Error: EPERM: operation not permitted, rename 'D:\IMT\imt-fe\.tanstack\tmp\884d3334-4715af826dad72bfa663dbba03a36060' -> 'D:\IMT\imt-fe\src\routes\users\$phone_number\edit.tsx'
>     at file:///D:/IMT/imt-fe/node_modules/@tanstack/router-generator/dist/esm/generator.js:143:13
>     at async generate (file:///D:/IMT/imt-fe/node_modules/@tanstack/router-plugin/dist/esm/core/router-generator-plugin.js:39:4)
>     at async PluginContext.watchChange (file:///D:/IMT/imt-fe/node_modules/@tanstack/router-plugin/dist/esm/core/router-generator-plugin.js:49:4)
>     at async Promise.all (index 1)
>     at async EnvironmentPluginContainer.hookParallel (file:///D:/IMT/imt-fe/node_modules/vite/dist/node/chunks/node.js:29604:3)
>     at async EnvironmentPluginContainer.watchChange (file:///D:/IMT/imt-fe/node_modules/vite/dist/node/chunks/node.js:29771:3)
>     at async Promise.all (index 0)
>     at async onFileAddUnlink (file:///D:/IMT/imt-fe/node_modules/vite/dist/node/chunks/node.js:25530:3)

By adding usePolling and stabilityThreshold props into vite.config.ts, the route creation happen like magic during development process (a bit slow but your server won't shut)

vite.config.ts

const config = defineConfig({
  .... your other config ....
  // solves EPERM 
  server: {
    watch: {
      usePolling: true,
      interval: 300,
      awaitWriteFinish: {
        stabilityThreshold: 500,
        pollInterval: 100,
      },
    }
  }
})

Note: This config doesn't depend on specific OS/hardware settings. If you still encounter similar issues when generating multiple routes at once, simply increase the stabilityThreshold interval slightly (e.g., 500 → 800) as a further adjustment.

How to Allow Your JavaScript Web App to Be Accessed by Other Devices on Windows

Sekti Wicaksono — Wed, 31 Dec 2025 20:33:16 +0000

Recently, I encountered an issue where a Next.js/React app running in development on Windows could not be accessed from other devices.
After adjusting the firewall settings, the solution was simply to allow the application (node.exe) to communicate through the firewall, enabling access from other devices on the same network.

Go to Windows Settings -> Search Firewall
Click Firewall & Network Protection -> Allow an apps... -> Change settings -> check node.exe -> OK
Better Size Image
Run your app on VSCode
e.g: npm run dev / pnpm dev
Try accessing it via the ip_address:port shown in the terminal.
Then, from another device (phone or computer) connected to the same access point (AP) or network, open the app in a browser.
For example, open Chrome on your mobile device and navigate to http://192.168.0.6:3000

Getting MonthName from new Date()

Sekti Wicaksono — Tue, 09 Feb 2021 08:14:34 +0000

const today = new Date()

// Default
today.toLocaleString('default', { month: 'long' }) // February
today.toLocaleString('default', { month: 'short' }) // Feb

// Indonesia
today.toLocaleString('id-ID', { month: 'long' }) // Februari
today.toLocaleString('id-ID', { month: 'short' }) // Feb

// English - GB
today.toLocaleString('en-GB', { month: 'long' }) // February
today.toLocaleString('en-GB', { month: 'short' }) // Feb

// English - US
today.toLocaleString('en-US', { month: 'long' }) // February
today.toLocaleString('en-US', { month: 'short' }) // Feb

CSS Battle - #12 Wiggly Moustache

Sekti Wicaksono — Fri, 05 Feb 2021 12:39:30 +0000

HTML

<div class="wrapper">
  <div class="c-1"></div>
  <div class="c-2"></div>
  <div class="c-3"></div>
</div>

CSS

  body {
    margin: 0;
    background: #F5D6B4;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .wrapper {
    position: relative;
    width: 255px;
    height: 100px
  }

  .c-1 {
    width: 100px;
    height: 50px;
    background: #dd6b4d;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: rotate(180deg);
  }

  .c-1:after {
    content: '';
    width: 60px;
    height: 30px;
    background: #F5D6B4;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 20px;
    bottom: 0;
  }

  .c-1:before {
    content: '';
    width: 20px;
    height: 10px;
    background: #D86F45;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    right: 0;
    bottom: -10px;
    transform: rotate(180deg);
  }

  .c-2 {
    width: 99px;
    height: 50px;
    background: #dd6b4d;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 80px;
    top: 0;
  }

  .c-2:before {
    content: '';
    width: 55px;
    height: 30px;
    background: #F5D6B4;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 20px;
    bottom: 0;
  }

  .c-3 {
    width: 100px;
    height: 50px;
    background: #dd6b4d;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(180deg);
  }

  .c-3:after {
    content: '';
    width: 59px;
    height: 30px;
    background: #F5D6B4;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    right: 24px;
    bottom: 0;
  }

  .c-3:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 17px;
    height: 10px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    background: #D86F45;
    transform: rotate(180deg);
  }

CSS Battle - #11 Eye of Sauron

Sekti Wicaksono — Fri, 05 Feb 2021 12:38:37 +0000

HTML

<div class="sm-circle-1"></div>
<div class="bg-circle"></div>
<div class="sm-circle-2"></div>

CSS

  body {
    background: #191210;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .sm-circle-1 {
    height: 50px;
    width: 100px;
    background: #ECA03D;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    position: absolute;
    bottom: 92px;
    left: 41px;
  }

  .sm-circle-1:before {
    content: '';
    height: 30px;
    width: 60px;
    background: #191210;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    position: absolute;
    bottom: 20px;
    left: 21px;
  }

  .sm-circle-2 {
    height: 50px;
    width: 100px;
    background: #ECA03D;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    position: absolute;
    bottom: 142px;
    left: 243px;
    transform: rotate(180deg);
  }

  .sm-circle-2:before {
    content: '';
    height: 30px;
    width: 60px;
    background: #191210;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    position: absolute;
    bottom: 20px;
    left: 21px;
  }

  .bg-circle {
    width: 140px;
    height: 140px;
    background: #ECA03D;
    border-radius: 50%;
    position: relative;
  }

  .bg-circle:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100px;
    height: 100px;
    background: #191210;
    border-radius: inherit;
  }

  .bg-circle:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50px;
    height: 50px;
    background: #84271C;
    border-radius: inherit;
  }

CSS Battle - #10 Cloaked Spirits

Sekti Wicaksono — Fri, 05 Feb 2021 12:38:13 +0000

HTML

<div class="wrapper">
  <div class="column-1"></div>
  <div class="column-2"></div>
  <div class="column-3"></div>
  <div class="circle-1"></div>
  <div class="circle-2"></div>
  <div class="circle-3"></div>
</div>

CSS

  body {
    margin: 0;
    background: #62306D;
  }

  .wrapper {
    height: 100%;
    margin: 50px;

    position: relative;
  }

  .column-1 {
    position: absolute;
    left: 0;
    bottom:0;
    width: 33.3%;
    height: 50%;
    background: #F7EC7D;
  }

  .circle-1 {
    position: absolute;
    left: 0;
    bottom:33.5%;
    width: 100px;
    height: 100px;
    background: #AA445F;
    border-radius: 50%;    
  }

  .circle-1:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    background: #E38F66;
    border-radius: 50%;
  }

  .circle-3 {
    position: absolute;
    right: 0;
    bottom:33.5%;
    width: 100px;
    height: 100px;
    background: #AA445F;
    border-radius: 50%;    
  }

  .circle-3:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    background: #E38F66;
    border-radius: 50%;
  }

  .circle-2 {
    position: absolute;
    left: 33.3%;
    top: -0.15%;
    bottom:33.5%;
    width: 100px;
    height: 100px;
    background: #E38F66;
    border-radius: 50%;    
  }

  .circle-2:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    background: #AA445F;
    border-radius: 50%;    
  }

  .column-2 {
    position: absolute;
    left: 33.3%;
    bottom:0;
    width: 33.4%;
    height: 82.5%;
    background: #F7EC7D;
  }

  .column-3 {
    position: absolute;
    right: 0;
    bottom:0;
    width: 33.3%;
    height: 50%;
    background: #F7EC7D;
  }

CSS Battle - #9 Tesseract

Sekti Wicaksono — Fri, 05 Feb 2021 12:37:25 +0000

HTML

<div class="box-bg"></div>
<div class="square"></div>
<div class="square small"></div>
<div class="square circle"></div>

CSS

  body {
    margin: 0;
    background: #222730;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .box-bg {
    background: #4CAAB3;
    height: 150px;
    width: 100%;
  }

  .square {
    position: absolute;
    background: #222730;
    height: 250px;
    width: 250px;
    transform: rotate(45deg);
  }

  .small {
    background: #4CAAB3;
    height: 150px;
    width: 150px;
  }

  .circle {
    background: #393E46;
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }

CSS Battle - #8 Forking Crazy

Sekti Wicaksono — Fri, 05 Feb 2021 12:37:22 +0000

HTML

<div class="handle"></div>
<div class="base"></div>
<div class="prong first"></div>
<div class="prong second down"></div>
<div class="prong third"></div>
<div class="prong fourth down"></div>
<div class="prong fifth"></div>
<div class="prong sixth down"></div>
<div class="prong seventh"></div>

CSS

  body {
    margin: 0;
    background: #6592CF;
    position: relative;
  }

  .handle {
    position: absolute;
    bottom: 0;
    left: 48%;
    content: '';
    width: 20px;
    height: 55px;
    background: #060F55;
    margin: 0 auto;
  }
  .base {
    position: absolute;
    bottom: 50px;
    left: 33%;
    content: '';
    width: 140px;
    height: 95px;
    background: #060F55;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
  }
  .prong {
    position: absolute;
    bottom: 132px;
    content: '';
    width: 20px;
    height: 118px;
    background: #060F55;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
  }

  .first { left: 33%; }
  .second {left: calc(33% + 20px); }
  .third { left: calc(33% + 40px); }
  .fourth { left: calc(33% + 60px); }
  .fifth { left: calc(33% + 80px); }
  .sixth { left: calc(33% + 100px); }
  .seventh { left: calc(33% + 120px); }

  .down {
    bottom: 140px;
    background: #6592CF; 
    transform: rotate(180deg);
  }

CSS Battle - #7 Leafy Trail

Sekti Wicaksono — Fri, 05 Feb 2021 12:31:23 +0000

HTML

<div></div>

CSS

  body {
    background: #0B2429;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  div {
    width: 150px;
    height: 150px;
    border-radius: 68%;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    background: #998235;

    position: relative;
  }

  div:after {
    position: absolute;
    content: '';
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: #F3AC3C;
    left: 50px;
  }

  div:before {
    position: absolute;
    content: '';
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: #1A4341;
    left: -50px;
    z-index: -1;
  }

CSS Battle - #6 Missing Slice

Sekti Wicaksono — Fri, 05 Feb 2021 12:30:31 +0000

HTML

<div class="outer">
  <div class="inner first"></div>
  <div class="inner second"></div>
  <div class="inner third"></div>
</div>

CSS

  body {
    background: #E3516E;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .outer {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #E3516E;
    position: relative;

    display:flex;
    flex-wrap: wrap;
    overflow: hidden;
  }

  .inner {
    width: 50%;
    height: 50%;
  }
  .first { background: #51B5A9; }
  .second { background: #FADE8B; }
  .third { background: #F7F3D7; }

CSS Battle - #5 Acid Rains

Sekti Wicaksono — Fri, 05 Feb 2021 12:29:34 +0000

HTML

<div></div>

CSS

  body {
    background: #0B2429;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  div {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border-top-right-radius: 0;
    background: #998235;

    position: relative;
  }

  div::after, div::before {
    position: absolute;
    content: '';
    width: inherit;
    height: inherit;
    background: #F3AC3C;
  }

  div::after {
    top: 60px;
    right: 60px;
    border-radius: inherit;
  }

  div::before {
    top: -60px;
    right: -60px;
    border-radius: 50%;
    z-index: -1;
  }