Must use import to load ES Module

[bitsmakerde]

Hi JakeNavith,

thank you for the plugin.

But I can not use it in my Project. I get this error

Tailwind CSS: Must use import to load ES Module: /Users/andre/Arbeit/Projekte/js/pointcloud-suite-gui/node_modules/tailwindcss-theme-variants/dist/index.mjs

I Use Tailwindcss 2.0.1.

Here my config file:

` const { themeVariants } = require('tailwindcss-theme-variants');

module.exports = { // purge: [], purge: ['./src/*/.js', './public/index.html'], darkMode: false, // or 'media' or 'class' theme: { extend: { colors: { 'my-color': '#20607E', }, }, }, variants: { extend: { backgroundColor: ['foo', 'baa'], }, }, plugins: [ themeVariants({ themes: { vw: { selector: '.foo-theme', }, audi: { selector: '.baa-theme', }, }, }), ], }; `

[JNavith]

Hi, thanks for the report. I'm going to look into it.

[JNavith]

Just as a status update, university is keeping me busy so I unfortunately haven't looked at this yet 😦 .

As insurance against if I can't reproduce this error on my own (because I think I've tested before to make sure this error wouldn't happen), can you at your leisure share a repository / instructions for how to make it happen?

[Otoris]

Getting this as well

[JNavith]

Getting this as well

I'm really sorry about this 😦 . Can you also create a repository with the problem to help me?

On my own site (e.x. the site directory in this repository), it works. So, I don't know what to do to make the problem appear without help.

[Otoris]

I'm on 1.10.0.beta-8 of your package but Tailwind 1.9.6 as I require IE11 support in my project.

I'm wondering if it's not playing nice with SASS maybe?

const { colors, fontFamily } = require("tailwindcss/defaultTheme")
const { themeVariants } = require("tailwindcss-theme-variants")

module.exports = {
  darkMode: "class",
  purge: [
    "./components/**/*.tsx",
    "./components/**/*.js",
    "./pages/**/*.tsx",
    "./pages/**/*.js",
  ],
  theme: {
    extend: {
     .............
    typography: theme => ({
      sm: {
        css: {
          p: {
            "margin-top": "1.6em",
            "margin-bottom": "1.6em",
          },
          a: {
            "font-weight": "700",
          },
          strong: {
            "font-weight": "700",
          },
        },
      },
      dark: {
        css: {
          color: theme("colors.gray.300"),
          a: {
            color: theme("colors.gray.500"),
            "&:hover": {
              color: theme("colors.gray.600"),
            },
          },

          h1: {
            color: theme("colors.gray.300"),
          },
          h2: {
            color: theme("colors.gray.300"),
          },
          h3: {
            color: theme("colors.gray.300"),
          },
          h4: {
            color: theme("colors.gray.300"),
          },
          h5: {
            color: theme("colors.gray.300"),
          },
          h6: {
            color: theme("colors.gray.300"),
          },

          strong: {
            color: theme("colors.gray.300"),
          },

          code: {
            color: theme("colors.gray.300"),
          },

          figcaption: {
            color: theme("colors.gray.500"),
          },
        },
      },
    }),
  },
  variants: {
    typography: ({ after }) => after(["themes"]),
    backgroundColor: ({ after }) =>
      after([
        "themes",
        "responsive",
        "themes:hover",
        "themes:focus",
        "themes:active",
      ]),
    boxShadow: ({ after }) => after(["themes", "themes:focus"]),
    textColor: ({ after }) =>
      after([
        "themes",
        "themes:group-focus",
        "themes:group-hover",
        "themes:hover",
        "themes:focus",
        "themes:selection",
      ]),
    borderColor: ({ after }) =>
      after(["themes", "themes:hover", "themes:focus"]),
    cursor: ["hover"],
    inset: ["responsive"],
    rotate: ["responsive", "hover"],
    width: ["responsive", "hover"],
  },
  plugins: [
    require("@tailwindcss/typography"),
    themeVariants({
      group: "themes",
      baseSelector: "html",
      themes: {
        light: { selector: ".light" },
        dark: { selector: ".dark" },
      },
      fallback: "compact",
    }),
  ],
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
}

Seeing this as well in VSCode Tailwind CSS intellisense

[JNavith]

I'm suspecting that I haven't made this package work with webpack. (I don't use webpack)

[Otoris]

haha that might be it, thanks for the info here, that helps me a lot.

[JNavith]

I'm sorry to restate it, but a setup for webpack / even if it leaves in other random stuff like React or whatever where this issue happens would help me out for that reason.

[Otoris]

Can't share that for you unfortunately, sorry

[JNavith]

Update on troubleshooting:

I tried the Next.js integration guide because I presume it uses Webpack under the hood. I could not reproduce the problem here (the plugin worked fine).

Same for create-react-app.

Actually, I just got the error you reported with the Tailwind CSS IntelliSense plugin. Now that's something I can work with!

[JNavith]

Thanks for the report and information! This should be fixed in 1.10.0-beta.14

[bitsmakerde]

@JakeNavith thank you for the fix. Its works now :-)

[JNavith]

@bitsmakerde Thank you for your patience and confirming it works again 😊.

@Otoris Let me know at your leisure if it works for you now

[JNavith]

This has been left open without comment, so I'm assuming it actually was successfully fixed! Closing, thanks!