Forum Discussion

Joseff's avatar
Joseff
Copper Contributor
Mar 01, 2024
Solved

ShadCN ui issues using tailwind-merge

Hey guys,

I am trying to use the shadcn ui components in my SPFX solution but have hit a wall.

There is a util function it uses to merge tailwind that looks like this

import { type ClassValue, clsx } from "clsx"
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

When I try to serve I get the following error
Error - [webpack] 'dist':
./node_modules/tailwind-merge/dist/bundle-cjs.js 49:30
Module parse failed: Unexpected token (49:30)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| return classPartObject.validators.find(({
| validator
> }) => validator(classRest))?.classGroupId;
| }
| const arbitraryPropertyRegex = /^/[(.+)/]$/;

I tried some things found online such as using the es5 version of tailwind merge and adding the babel loader to the webpack but I am not getting anywhere. Any ideas?
  • Joseff's avatar
    Joseff
    Mar 04, 2024
    Think I worked it out

    Setup the config in the gulpfile to:

    build.configureWebpack.mergeConfig({
    additionalConfiguration: (generatedConfiguration) => {
    generatedConfiguration.module.rules.push(
    {
    test: /\.mjs$/,
    include: /node_modules/,
    type: 'javascript/auto'
    },
    {
    // Match `.js`, `.jsx`, `.ts` or `.tsx` files
    test: /\.[jt]sx?$/,
    loader: 'esbuild-loader',
    options: {
    // JavaScript version to compile to
    target: 'es2015'
    }
    },

    );

    generatedConfiguration.resolve.extensions = ['*', '.mjs', '.js', '.json']

    return generatedConfiguration;
    }

    Tried to use the bable loader but didnt have any luck but this all seems to be working ok

1 Reply

  • Joseff's avatar
    Joseff
    Copper Contributor
    Mar 04, 2024
    Think I worked it out

    Setup the config in the gulpfile to:

    build.configureWebpack.mergeConfig({
    additionalConfiguration: (generatedConfiguration) => {
    generatedConfiguration.module.rules.push(
    {
    test: /\.mjs$/,
    include: /node_modules/,
    type: 'javascript/auto'
    },
    {
    // Match `.js`, `.jsx`, `.ts` or `.tsx` files
    test: /\.[jt]sx?$/,
    loader: 'esbuild-loader',
    options: {
    // JavaScript version to compile to
    target: 'es2015'
    }
    },

    );

    generatedConfiguration.resolve.extensions = ['*', '.mjs', '.js', '.json']

    return generatedConfiguration;
    }

    Tried to use the bable loader but didnt have any luck but this all seems to be working ok

Resources