Forem: relliv

How to fix `Cannot find module 'bcrypt'` error?

relliv — Thu, 17 Apr 2025 11:05:38 +0000

If you are working with PNPM and getting this error there are many possible solutions (check this stackoverflow post) but many of them not compatible with PNPM. bcrypt has system based dependencies. First you need to install node-gyp package globally and this package is compatible with only stable version of node.

First try with pnpm approve-builds command. Sometimes PNPM excludes (especially if you are working on a monorepo propject) buildable packages and this may cause Cannot find module 'bcrypt' error.

There is one more possible solution: replacing bcrypt with bcryptjs. bcryptjs is more modern solution and supports TypeScript.

Just remove bcrypt and install bcryptjs. Then update imports. API is mostly same. You don't need to update function calls.

Have a nice time.

Update TailwindCSS color palette programmatically

relliv — Tue, 19 Nov 2024 06:30:30 +0000

Tailwind is a highly flexible framework in terms of configuration. I want to show how we can create dynamic color palettes using it. All we need is the tailwind.config.js and CSS Variables. So you can change the color palette as you want at runtime.

Lets define our CSS varaibles in main style.css|scss file:

:root {
  --nx-theme-50: #fffce7;
  --nx-theme-100: #fffac1;
  --nx-theme-200: #fff086;
  --nx-theme-300: #ffe041;
  --nx-theme-400: #ffcb0d;
  --nx-theme-500: #f0b000;
  --nx-theme-600: #d18700;
  --nx-theme-700: #a65f02;
  --nx-theme-800: #894a0a;
  --nx-theme-900: #743d0f;
  --nx-theme-950: #441f04;
}

And TailwindCSS config:

export default {
  content: ['./index.html', './src/**/*.{vue,ts}'],
  theme: {
    extend: {
      colors: {
        'nx-theme': {
          50: 'var(--nx-theme-50)',
          100: 'var(--nx-theme-100)',
          200: 'var(--nx-theme-200)',
          300: 'var(--nx-theme-300)',
          400: 'var(--nx-theme-400)',
          500: 'var(--nx-theme-500)',
          600: 'var(--nx-theme-600)',
          700: 'var(--nx-theme-700)',
          800: 'var(--nx-theme-800)',
          900: 'var(--nx-theme-900)',
          950: 'var(--nx-theme-950)',
        },
      },
    },
  },
  plugins: [],
};

That's all. Then you can set any color to these predefined CSS variables programatically.

But there is a problem with this method. Tailwind can't track CSS variables and with this method we can't use opacity property over colors like bg-nx-theme-100/70. This strategy may useful for third party packages.

Example:

const root = document.documentElement;
root.style.setProperty(`--nx-theme-500`, '#ffffff')

Demo:

Source code: https://github.com/relliv/css-variable-and-tailwind-color-theme-change-example

By the way, you can define transparent colors like this:

:root {
  --nx-theme-50: #fffce7;
  ...
  --nx-theme-950: #441f04;
  --nx-theme-1000: #ffcb0d3e;
}

export default {
  content: ['./index.html', './src/**/*.{vue,ts}'],
  theme: {
    extend: {
      colors: {
        'nx-theme': {
          50: 'var(--nx-theme-50)',
          ...
          1000: 'var(--nx-theme-1000)',
        },
      },
    },
  },
  plugins: [],
};

How to fix `Uncaught TypeError: Cannot read properties of null (reading 'ce')` error?

relliv — Fri, 01 Nov 2024 18:55:27 +0000

I got this error while working on my custom vue package. And if you are experiencing this problem with vue and vite, the solution is quite simple.

Why?

This error occurs when you import packaged components in the Vue project. The error is caused by the Vue project's vite configuration. Vue should define as peerDependency in package's package.json file. At the same time we have to exclude vue code from the bundled output.

Solution

Add rollupOptions block to the vite.config.ts file (also, check official tutorial).

/// <reference types='vitest' />
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import dts from "vite-plugin-dts";
import * as path from "path";
import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
import { nxCopyAssetsPlugin } from "@nx/vite/plugins/nx-copy-assets.plugin";

export default defineConfig({
  root: __dirname,
  cacheDir: "../../../node_modules/.vite/libs/features/nx-vue-calendar-heatmap",
  plugins: [...]
  build: {
    outDir: "..."
    emptyOutDir: true,
    reportCompressedSize: true,
    commonjsOptions: {
      transformMixedEsModules: true,
    },
    lib: {
      ...
      rollupOptions: {// <--- Add this block start
        // External packages that should not be bundled into your library.
        external: ["vue"],
        output: {
          // Provide global variables to use in the UMD build
          // for externalized deps
          globals: {
            vue: "Vue",
          },
        },
      },// <--- Add this block end
    }
  }
  test: { ... },
});