resolveConfig doesn't work in IE11 and Edge

[gilesbutler]

I've just come across this on two sites I've been working on. Using the following code...

import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "@/../tailwind.config";

export const twconfig = resolveConfig(tailwindConfig);

Causes the following error in IE11 and Edge...

Expected identifier, string or number

[garand]

@gilesbutler I ran into this as well, resolved by updating my webpack rule for js files to include the tailwindcss package.

exclude: function(modulePath) {
    return /node_modules/.test(modulePath) &&
        !/node_modules\/tailwindcss/.test(modulePath);
  }

Then I had to configure Babel to transform modules. Using CJS, but UMD worked as well. Ideally I want to use ESM, but that caused other errors.

[gilesbutler]

Hey @garand, thanks for following up and nice find.

I'm not working on that project anymore so I can't test unfortunately.

If I need to use resolveConfig for another client I'll loop back around to this.

Thanks

[schellenbergk]

@gilesbutler I ran into this as well, resolved by updating my webpack rule for js files to include the tailwindcss package.

exclude: function(modulePath) {
    return /node_modules/.test(modulePath) &&
        !/node_modules\/tailwindcss/.test(modulePath);
  }

Then I had to configure Babel to transform modules. Using CJS, but UMD worked as well. Ideally I want to use ESM, but that caused other errors.

Hey @garand , could you share how you've configured Babel to transform modules? I'm having the same issue in Nuxt. Thanks.

[garand]

@schellenbergk Does that above snippet not work for you?

https://babeljs.io/docs/en/babel-preset-env#modules

I set the modules property referenced on that page to cjs.

[schellenbergk]

Thanks @garand , I ended up using a different package which solved the issue already.

[willviles]

I've run into this issue when using tailwindcss/resolveConfig with Next.js.

For anyone using Next.js, next-transpile-modules plugin works great to transpile this down to ES5.

const withTranspiledModules = require('next-transpile-modules')(['tailwindcss'])

module.exports = withTranspiledModules({ 
  // your next.config.js
})