Webpack warnings on build after upgrade to gatsby v3

[dan-mba]

After updating to gatsby v3 I get a bunch of warnings on build

WebpackError: Unsafe builtin usage fs."insert name of fs command"
They are coming from calls to autoprefixer

gatsby v3 now uses webpack 5 which I think requires autoprefixer@10.2.4

[hupe1980]

Unfortunately, it seems to be more than that: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#using-fs-in-ssr

[daugsbi]

I've tried to upgrade today. With the following resolutions in the package.json, I still get the warning, but it looks like my project builds and work.

{
  "resolutions": {
    "autoprefixer": "^10.2.4",
    "postcss": "^8.2.6",
    "cssnano": "^5.0.0-rc.1"
  }
}

The warning comes from browserslist. It probably tries to read package.json or .browserslistrc to load a users global configuration of supported browsers. This information is needed by autoprefixer, a postcss plugin.

Any idea how and where to fix this?

[hupe1980]

@pieh Do you have any hints how we can migrate to Gatsby3? Unfortunately, the instructions do not help us here

[kimbaudi]

The warnings are caused by the following line of code in gatsby-plugin-material-ui\src\autoprefixer.js

gatsby-plugin-material-ui/gatsby-plugin-material-ui/src/autoprefixer.js

Line 8 in 50e2f7a

return prefixer.process(css, { from: undefined }).css;

Looking into the stack trace shows it is due to usage of fs.* in browserlist/node.js:

  var result = fs.existsSync(file) && fs.statSync(file).isFile()

I'm not sure how to remove these warnings other than to disable autoprefixing (which is not ideal btw) in gatsby-config.js:

{
  resolve: `gatsby-plugin-material-ui`,
  options: {
    disableAutoprefixing: true,
  },
},

BTW, the warnings are generated from tracking-unsafe-module-wrapper.js (see https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/ssr-builtin-trackers/tracking-unsafe-module-wrapper.js#L11). I guess Gatsby is trying to warn us that using fs in SSR will disable incremental builds for HTML generation.

[hupe1980]

Here's what I tried:

import {browserlist} from 'gatsby'

const prefixer = postcss ([
    Autoprefixer ({overrideBrowserslist: browserlist}),
  ]);

Unfortunately, overrrideBrowserlist does not stop the lookup in browserlist/node.js

[daugsbi]

I've tried to load the package.json and the .browserslistrc with webpack and provide them to overrideBrowserslist.

I also changed the from parameter in the process from undefined to null.

See the work in progress here:
master...daugsbi:master

It is working, but I don't know how to load the .browserslistrc optionally. If the file is not available, it throws an error.

[dan-mba]

@hupe1980 Can you try using a constant for browserlist just to see if works.

const browserlist = [">2%"];

const prefixer = postcss ([
    Autoprefixer ({overrideBrowserlist: browserlist}),
]);

If it works with the const, maybe there is a way to get the browserlist in gatsby-node & cache it to use in gatsby-ssr.

[volKate]

@hupe1980 Hey, migrating to v3 I also face that issue. The gatsby-plugin-material-ui is the only one dependency I have that still require postcss7. Is it possible to update?

[pepijn-vanvlaanderen]

+1

[mariovde]

Got build errors, the likes of:

`warn Unsafe builtin method was used, future builds will need to rebuild all pages
warn WebpackError: Unsafe builtin usage fs.existsSync

[mpolinowski]

Confirmed - Warnings are gone after updating to "gatsby-plugin-material-ui": "^3.0.0",. Thank you!

[iDVB]

Still getting this error in gatsby-plugin-material-ui@3.0.1

warn WebpackError: Unsafe builtin usage fs.statSync
    at myproject/node_modules/autoprefixer/node_modules/browserslist
/node.js:38:1

[dungle-scrubs]

I'm still getting the same error mentioned above for both versions 3.0.0 and 3.0.1 (a stack post recommended downgrading to 3.0.0 but it doesn't seem to help)

warning Unsafe builtin method was used, future builds will need to rebuild all pages
warning WebpackError: Unsafe builtin usage fs.existsSync

[dan-mba]

Do you have browserslist set in your package.json?

I use the following in mine & it builds with no error:

"browserslist": [
  ">2%"
],

For more info on browserslist & the Gatsby defaults check the Gatsby docs.

[dungle-scrubs]

@dan-mba I gave that a shot (on 3.0.0 and 3.0.1) but am still experiencing the same error unfortunately. Here's the full error by the way:

warn Unsafe builtin method was used, future builds will need to rebuild all pages
warn WebpackError: Unsafe builtin usage fs.existsSync
    at new-website/node_modules/browserslist/node.js:38:1
    at new-website/node_modules/browserslist/node.js:46:1
    at new-website/node_modules/browserslist/node.js:197:1
    at new-website/node_modules/browserslist/index.js:433:1
    at new-website/node_modules/autoprefixer/lib/browsers.js:54:1
    at new-website/node_modules/autoprefixer/lib/browsers.js:42:1
    at new-website/node_modules/autoprefixer/lib/supports.js:41:1
    at new-website/node_modules/autoprefixer/lib/supports.js:86:1
    at new-website/node_modules/autoprefixer/lib/supports.js:247:1
    at new-website/node_modules/autoprefixer/lib/supports.js:245:1
    at new-website/node_modules/autoprefixer/lib/supports.js:270:1
    at new-website/node_modules/autoprefixer/lib/processor.js:67:1
    at new-website/node_modules/postcss/lib/container.js:138:1
    at new-website/node_modules/postcss/lib/container.js:74:1
    at new-website/node_modules/postcss/lib/container.js:60:1

  36 |     return filenessCache[file]
  37 |   }
> 38 |   var result = fs.existsSync(file) && fs.statSync(file).isFile()
     | ^
  39 |   if (!process.env.BROWSERSLIST_DISABLE_CACHE) {
  40 |     filenessCache[file] = result
  41 |   }

[emilwikstrom]

Bump This issue is currently preventing incremental builds on our site at Gatsby Cloud which affects our content and marketing teams since it takes a long time to get information published.

[dungle-scrubs]

Bump This issue is currently preventing incremental builds on our site at Gatsby Cloud which affects our content and marketing teams since it takes a long time to get information published.

We're working on decoupling from Material-UI for Gatsby projects because of this issue. Build minutes are eaten up very fast for high volume shops without incremental builds. Hoping for a solution 🤞.

[emilwikstrom]

We're working on decoupling from Material-UI for Gatsby projects because of this issue. Build minutes are eaten up very fast for high volume shops without incremental builds. Hoping for a solution 🤞.

I looked at the plugin code now and the issues seems to be that the plugin uses the autoprefixer package which in turn uses the file system. The real problem is that Material UI requires CSS postprocessing. This plugin actually follows the Material UI instructions to use autoprefixer (see https://material-ui.com/getting-started/supported-platforms/#css-prefixing). This means that a fix for Gatsby incremental builds would require this package to use an alternative CSS prefixer (one that does not use any "unsafe builtin" functions).

In my opinion a HTML/CSS ui library like Material UI should include all the CSS-prefixes they need for the features that they use. I also think it should make sense for them to list the features that requires CSS prefixing so that a user can know whether prefixing is needed or not.

[dan-mba]

I am the author of this issue.

My repo which uses gatsby-theme-material-ui builds with no webpack warnings. Here is a link to the gatsby-config it uses to include gatsby-plugin-material-ui. I only override the webfonts settings.

I have no clue why some people are still seeing this issue. It is related to autoprefixer trying to determine your browserslist settings.

You might want to use npm list autoprefixer to see if any other plugins are also using autoprefixer.

Between gatsby & material-ui there are an infinite number of combinations that people could use. Mine seems to be one of the ones that works. Trying to determine which combinations work & which don't is difficult because you aren't going to hear from those who don't see the message anymore after upgrading.

[jkananen]

The comments since Aug 10th 2021 should likely be in #68

[dungle-scrubs]

@dan-mba Thanks for those links. I'm going to try to match your configuration as best I can to see if that helps. Regarding running npm list autoprefixer, for me only gatsby and gatsby-plugin-material-ui are using it and they're both using autoprefixer@10.3.1.

If that doesn't help, I'll work on duplicating my repo into a public one to share. Might take a couple of days.

[dungle-scrubs]

When I remove Mui's accordion component, the error goes away for me. @emilwikstrom are you using the accordion?

[jkananen]

Good catch @dungle-scrubs ! I'm seeing the same. Thanks for the motivation to refactor this around this as we're about to do so anyway 😄

[emilwikstrom]

When I remove Mui's accordion component, the error goes away for me. @emilwikstrom are you using the accordion?

Yes, we are also using Mui accordion and removing that seems to solve our problem!
Thank you @dungle-scrubs

[tudor2004]

I am having the exact same problem, any solutions without removing the Accordion?

[dungle-scrubs]

I am having the exact same problem, any solutions without removing the Accordion?

Not that I know of. Finding an alternative for your accordions is probably your best bet.