Group in a group with TailwindCSS.

Leave a Comment / Frontend, Snippets

Some time ago, there was a common problem of having multiple nested group classes. Imagine having a main menu dropdown group, where top level elements are groups, and sub-level elements are groups as well. You might be tempted to use something like this:

<ul class="relative">
  <li class="group">
    Top level item
    <ul class="hidden group-hover:block">
      <li class="group">
        Sub level items will be here
        <ul class="hidden group-hover:block">
          <li>Sub-sub level item 1</li>
          <li>Sub-sub level item 2</li>
          <li>Sub-sub level item 3</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

While this looks correct at first glance, but you will have all the nested levels displayed on hover over the top level item. And here’s a solution.

…

Group in a group with TailwindCSS.Read More »

clearTimeout or clearInterval in React Native views with React Navigation

Leave a Comment / Frontend, Snippets

When working on a regular React app, it is common to initialize some hooks after the component is mounted, and unbind them after the component is unmounted. However, while working on a React Native app, you might have noticed that the views are actually not unmounted, and as such your bound events and background tasks continue to run from the previous view. Here’s what you can do.

…

clearTimeout or clearInterval in React Native views with React NavigationRead More »

Next.js ChunkLoadError: Loading chunk failed after deploying.

Leave a Comment / Builds and Pipelines, Frontend

Everything was working fine locally, but the whole console gets red with ChunkLoadError after you deploy to production. Moreover, the frontend becomes blank white and you see Application error: a client-side exception has occurred (see the browser console for more information). The issue seems to be here for a while, and it looks like no-one knows which part exactly is responsible for the error (Next.js or Webpack or both), but the workaround is present.

…

Next.js ChunkLoadError: Loading chunk failed after deploying.Read More »

(0 , _genMapping.maybeAddMapping) is not a function

Leave a Comment / Builds and Pipelines

You run yarn start or yarn dev and you see the error below? Neither running yarn install, nor using a different Node version helps?

Web Bundling complete 2068ms
./index.js
Module build failed (from ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js):
TypeError: /x/index.js: (0 , _genMapping.maybeAddMapping) is not a function
    at SourceMap.mark (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/source-map.ts:150:20)
    at Buffer._mark (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/buffer.ts:308:16)
    at Buffer._append (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/buffer.ts:281:12)
    at Buffer.append (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/buffer.ts:153:10)
    at Generator._append (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/printer.ts:413:15)
    at Generator.word (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/printer.ts:230:10)
    at Generator.ImportDeclaration (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/generators/modules.ts:239:8)
    at Buffer.exactSource (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/buffer.ts:426:5)
    at Generator.exactSource (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/printer.ts:354:15)
    at Generator.print (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/printer.ts:686:10)
    at Generator.printJoin (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/printer.ts:798:12)
    at Generator.printSequence (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/printer.ts:900:10)
    at Generator.Program (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/generators/base.ts:31:8)
    at Generator.exactSource (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/printer.ts:348:7)
    at Generator.print (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/printer.ts:686:10)
    at Generator.File (/x/node_modules/@expo/webpack-config/node_modules/@babel/generator/src/generators/base.ts:11:8)
…

(0 , _genMapping.maybeAddMapping) is not a functionRead More »