Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gatsby v3 support? #709

Open
Kilian opened this issue Jun 29, 2021 · 1 comment
Open

Gatsby v3 support? #709

Kilian opened this issue Jun 29, 2021 · 1 comment

Comments

@Kilian
Copy link

Kilian commented Jun 29, 2021

I've been juggling configurations to get Astroturf (via gatsby-plugin-astroturf) to play nicely with Gatsby v3 but to no avail.

There's this change which is the primary cause (I think): CSS Modules are imported as ES Modules.

Setting these options in the gatsby-plugin-postcss should solve that:

options: {
  cssLoaderOptions: {
    esModule: false,
    modules: {
      namedExport: true,
    },
  },
},

But that results in styles being a string (Component-styles-module--cls2--C4dLH Component-styles-module--cls1--2BuO7) instead of an object so none of the classes are added to the DOM.

Gatsby v3 wants css module imports in the form of import * as ..., and that options configuration disables that.

If you look here: https://github.com/4Catalyzer/astroturf/blob/master/src/utils/ImportInjector.ts#L58 then you see it does not use the import * as module notation. If I change that however (and set esModule: true) it results in the follow error:

Attempted import error: 'cls2' is not exported from './Component-styles.module.css' (imported as '_styles').

On the other hand, I saw the altLoader option mentioned in a few tickets. Trying that (without the above options) results in the following error in the console during build:

Attempted import error: './Component-styles.module.css' does not contain a default export (imported as '_styles').

And likewise no styles.

Combining both the altLoader and the esModule: false option behave the same as just setting esModules: false, in that styles is a string and not an object.

So, eh, I'm out of ideas. Is Gatsby v3 supported at all and if so, what is the correct configuration?

@Weeee04
Copy link

Weeee04 commented Dec 9, 2021

@Kilian have you tried setting namedExports to false?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants