Uncaught Error : you might have mixed up default and named imports (tailwind.config.js)

[ShubhamVerma1811]

Hey,
I am using the React-Storybook template with TailwindCSS.
I might be facing this issue because tailwind.config.js uses require syntax, and I am referencing the file in my ts file using the import syntax.
Any idea how can this be fixed? Thanks for your time.

// src/tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  darkMode: false, // or 'media' or 'class'
  theme: {
    fontFamily: {
      karla: ['Karla', 'sans'],
      poppins: ['Poppins', 'sans'],
      montserrat: ['Montserrat', 'sans'],
      dank: ['Dank Mono', 'Fira Code', 'sans'],
      questrial: ['Questrial', 'sans'],
    },
    extend: {
      colors: {
        blueGray: colors.blueGray,
        coolGray: colors.coolGray,
        trueGray: colors.trueGray,
        warmGray: colors.warmGray,
        orange: colors.orange,
        lime: colors.lime,
        emerald: colors.emerald,
        teal: colors.teal,
        cyan: colors.cyan,
        lightBlue: colors.lightBlue,
        violet: colors.violet,
        fuchsia: colors.fuchsia,
        rose: colors.rose,
        amber: colors.amber,
      },
    },
    variants: {},
    plugins: [],
  },
}

// src/index.ts

//https://tailwindcss.com/docs/configuration#referencing-in-java-script
// cause of the error
import * as fullConfig from './tailwind.config'
console.log(fullConfig)

// rest of the code

// package.json
{
  "main": "dist/index.js",
  "name": "cadabraui",
  "files": [
    "dist",
    "src"
  ],
  "husky": {
    "hooks": {
      "pre-commit": "tsdx lint"
    }
  },
  "author": "Shubham Verma",
  "module": "dist/cadabraui.esm.js",
  "version": "0.1.0",
  "license": "MIT",
  "typings": "dist/index.d.ts",
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "dev": "tsdx watch",
    "test": "tsdx test --passWithNoTests",
    "lint": "tsdx lint",
    "size": "size-limit",
    "build": "tsdx build",
    "prepare": "tsdx build",
    "analyze": "size-limit --why",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "size-limit": [
    {
      "path": "dist/cadabraui.cjs.production.min.js",
      "limit": "10 KB"
    },
    {
      "path": "dist/cadabraui.esm.js",
      "limit": "10 KB"
    }
  ],
  "dependencies": {
    "unique-random-array": "^3.0.0"
  },
  "devDependencies": {
    "tsdx": "^0.14.1",
    "husky": "^6.0.0",
    "react": "^17.0.2",
    "tslib": "^2.2.0",
    "postcss": "^7",
    "react-is": "^17.0.2",
    "react-dom": "^17.0.2",
    "size-limit": "^4.10.2",
    "typescript": "^4.2.4",
    "@babel/core": "^7.13.16",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "@types/react": "^17.0.3",
    "autoprefixer": "^9",
    "babel-loader": "^8.2.2",
    "@types/react-is": "^17.0.0",
    "@storybook/react": "^6.2.9",
    "@types/react-dom": "^17.0.3",
    "@storybook/addons": "^6.2.9",
    "@types/babel__core": "^7.1.14",
    "@types/tailwindcss": "^2.0.2",
    "@storybook/addon-info": "^5.3.21",
    "rollup-plugin-postcss": "^4.0.0",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.9",
    "@size-limit/preset-small-lib": "^4.10.2",
    "@tailwindcss/postcss7-compat": "^2.1.2",
    "@types/storybook__addon-info": "^5.2.3"
  },
  "peerDependencies": {
    "react": ">=16"
  }
}

//tsdx.config.js
const postcss = require('rollup-plugin-postcss');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        config: {
          path: './postcss.config.js',
        },
        extensions: ['.css'],
        minimize: true,
        inject: {
          insertAt: 'top',
        },
      })
    );
    return config;
  },
};

THE ERROR MESSAGE

object index.tsx:6:8
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
App react.development.js:220:29
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
App react.development.js:220:29
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
    React 22
    parcelRequire<["index.tsx"]< index.tsx:16
    newRequire example.f69400ca.js:47
    parcelRequire example.f69400ca.js:81
    <anonymous> example.f69400ca.js:120
react-dom.development.js:25058:20
    React 22
    parcelRequire<["index.tsx"]< index.tsx:16
    newRequire example.f69400ca.js:47
    parcelRequire example.f69400ca.js:81
    <anonymous> example.f69400ca.js:120
The above error occurred in the <div> component:

div
App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. react-dom.development.js:20085:14
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
    React 22
    parcelRequire<["index.tsx"]< index.tsx:16
    newRequire example.f69400ca.js:47
    parcelRequire example.f69400ca.js:81
    <anonymous> example.f69400ca.js:120
react-dom.development.js:25058:20

[ShubhamVerma1811]

Alright I got it to work, it is a CJS-ESM issue,
Use this rollup plugin https://github.com/eight04/rollup-plugin-cjs-es and add its config in the tsdx config

//tsdx.config.js
const postcss = require('rollup-plugin-postcss')
const cjs = require('rollup-plugin-cjs-es')

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        config: {
          path: './postcss.config.js',
        },
        extensions: ['.css'],
        minimize: true,
        inject: {
          insertAt: 'top',
        },
      })
    ),
// FROM HERE
      config.plugins.push(
        cjs({
          nested: true,
        })
      )
//TO HERE
    return config
  },
}