"fs" dependency was not found?

[ristomcintosh]

I'm trying to 1.0.0-alpha.10 in Gatsby but I keep getting this error

⠀
* fs in ./node_modules/reduce-css-calc/dist/parser.js
⠀
To install it, you can run: npm install --save fs
× ｢wdm｣:
ERROR in ./node_modules/reduce-css-calc/dist/parser.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\risto\Sites\Personal\can-i-kick-it\node_modules\reduce-css-calc\dist'
 @ ./node_modules/reduce-css-calc/dist/parser.js 731:17-30
 @ ./node_modules/reduce-css-calc/dist/index.js
 @ ./node_modules/tailwind.macro/node_modules/tailwindcss/lib/util/negateValue.js
 @ ./node_modules/tailwind.macro/node_modules/tailwindcss/lib/util/resolveConfig.js
 @ ./node_modules/tailwind.macro/utils.umd.js
 @ ./src/pages/index.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi ./node_modules/event-source-polyfill/src/eventsource.js (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false C://Users//risto//Sites//Personal//can-i-kick-it//.cache//app
i ｢wdm｣: Failed to compile.

My code is

import styled from "styled-components"
import tw from "tailwind.macro"

const Button = styled.button`
  ${tw`bg-blue-100`}
` 

babel-plugin-macros.config.js

module.exports = {
  tailwind: {
    styled: "styled-components/macro",
  },
}

[zlokomatic]

I added

config.node = {
        fs: 'empty'
    };

to my webpack config to resolve the error

[spiraljacobs]

I have the same issue. Don't have a webpack.config in my gatsby, not sure how to add @zlokomatic 's code / how to add a webpack.config...

[ristomcintosh]

I just reverted back to the stable build.

@spiraljacobs you can excess Gatsby's Webpack config in the gatsby-node.js file

https://www.gatsbyjs.org/docs/add-custom-webpack-config/

[spiraljacobs]

@Risto-Mcintosh thanks! Got it working with @zlokomatic's suggestion.
What is the last stable build? Went to Alpha9, and it still has this issue.

[ristomcintosh]

@spiraljacobs that's great! I'll use it on my next project

The build I was referring to is the one that only supports Tailwind v0.7.x

[khalwat]

This appears to be due to Tailwind CSS's use of reduce-css-calc starting with Tailwind ^1.1.0, which apparently depends on it being run via Node.

https://www.gitmemory.com/issue/TVke/react-native-tailwindcss/7/523364996

@zlokomatic 's solution above works, which to clarify means adding this to your gatsby-node.js:

exports.onCreateWebpackConfig = ({actions, getConfig}) => {
    // Hack due to Tailwind ^1.1.0 using `reduce-css-calc` which assumes node
    // https://github.com/bradlc/babel-plugin-tailwind-components/issues/39#issuecomment-526892633
    const config = getConfig();
    config.node = {
        fs: 'empty'
    };
};

The only other thing that could help is if tailwindcss was a peer dependency of babel-plugin-tailwind-components so that we could control the version that ends up getting used.

[modulareverything]

What is the suggestion here? To only use Tailwind 1.0.0 for now?

[khalwat]

@n0k5 I updated my answer to be more specific.

[modulareverything]

Thanks @khalwat — the missing thing there for me was the getConfig() line I think. I assume this pulls in the existing config?

[b-d-m-p]

I added

config.node = {
        fs: 'empty'
    };

to my webpack config to resolve the error

@zlokomatic Thanks for the fix. Can you tell me where it should be added in the webpack config?