Webpack error using Gatsby v3: WebpackError: Unsafe builtin usage fs.existsSync

[mariovde]

Description

Just set up a gatsby v3 project
The "yarn develop" works as expected, no issues or warnings
When running "yarn build" we get the following error:

`warn Unsafe builtin method was used, future builds will need to rebuild all pages
warn WebpackError: Unsafe builtin usage fs.existsSync
at gatsbyv3/node_modules/browserslist/node.js:38:1
at gatsbyv3/node_modules/browserslist/node.js:46:1
at gatsbyv3/node_modules/browserslist/node.js:305:1
at gatsbyv3/node_modules/browserslist/node.js:223:1
at gatsbyv3/node_modules/browserslist/index.js:411:1
at gatsbyv3/node_modules/autoprefixer/lib/browsers.js:63:1
at gatsbyv3/node_modules/autoprefixer/lib/browsers.js:46:1
at gatsbyv3/node_modules/autoprefixer/lib/autoprefixer.js:98:1
at gatsbyv3/node_modules/autoprefixer/lib/autoprefixer.js:109:1
at gatsbyv3/node_modules/postcss/lib/lazy-result.js:288:1
at gatsbyv3/node_modules/postcss/lib/lazy-result.js:274:1
at gatsbyv3/node_modules/postcss/lib/lazy-result.js:298:1
at gatsbyv3/node_modules/postcss/lib/lazy-result.js:343:1
at gatsbyv3/node_modules/gatsby-plugin-material-ui/autoprefixer.js:18:8
at gatsbyv3/node_modules/gatsby-plugin-material-ui/gatsby-ssr.js:54:65
at gatsbyv3/.cache/api-runner-ssr.js:33:41

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 | }`

Steps to reproduce

we've set up a project using these dependencies

"dependencies": { "@babel/core": "^7.4.5", "@babel/plugin-proposal-class-properties": "^7.4.4", "@babel/plugin-proposal-decorators": "^7.4.4", "@babel/plugin-proposal-do-expressions": "^7.2.0", "@babel/plugin-proposal-export-default-from": "^7.2.0", "@babel/plugin-proposal-export-namespace-from": "^7.2.0", "@babel/plugin-proposal-function-bind": "^7.2.0", "@babel/plugin-proposal-json-strings": "^7.2.0", "@babel/plugin-proposal-logical-assignment-operators": "^7.2.0", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4", "@babel/plugin-proposal-numeric-separator": "^7.2.0", "@babel/plugin-proposal-optional-chaining": "^7.2.0", "@babel/plugin-proposal-throw-expressions": "^7.2.0", "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/preset-env": "^7.4.5", "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0", "@babel/register": "^7.4.4", "@danbruegge/gatsby-plugin-stylelint": "^3.4.0", "@date-io/moment": "1.3.13", "@fortawesome/fontawesome-svg-core": "^1.2.19", "@fortawesome/free-brands-svg-icons": "^5.9.0", "@fortawesome/free-regular-svg-icons": "^5.9.0", "@fortawesome/free-solid-svg-icons": "^5.9.0", "@fortawesome/react-fontawesome": "^0.1.4", "@material-ui/core": "^4.9.10", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.54", "@material-ui/pickers": "^3.2.10", "@reach/router": "^1.2.1", "autoprefixer": "^9.6.0", "axios": "^0.19.0", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.0.2", "babel-jest": "^24.8.0", "babel-loader": "^8.0.6", "babel-plugin-module-resolver": "^3.2.0", "bootstrap": "^4.3.1", "camelcase": "^5.3.1", "chart.js": "^2.8.0", "classnames": "^2.2.6", "css-loader": "^3.0.0", "d3-ease": "^1.0.5", "enzyme": "^3.10.0", "enzyme-adapter-react-16": "^1.14.0", "enzyme-to-json": "^3.3.5", "eslint": "^5.0.0", "eslint-config-prettier": "^6.0.0", "eslint-loader": "^2.1.2", "eslint-plugin-flowtype": "^4.7.0", "eslint-plugin-graphql": "^3.0.3", "eslint-plugin-prettier": "^3.1.0", "eslint-plugin-react": "^7.14.2", "eslint-plugin-smells": "^1.0.1", "file-loader": "^4.0.0", "flow-bin": "^0.102.0", "flow-typed": "^2.5.2", "formik": "^2.1.4", "gatsby": "^2.22.0", "gatsby-image": "^2.2.3", "gatsby-link": "^2.2.0", "gatsby-plugin-eslint": "^2.0.5", "gatsby-plugin-manifest": "^2.2.0", "gatsby-plugin-material-ui": "^2.1.10", "gatsby-plugin-offline": "^2.2.0", "gatsby-plugin-react-helmet": "^3.1.0", "gatsby-plugin-sass": "^2.1.0", "gatsby-plugin-sharp": "^2.2.1", "gatsby-react-router-scroll": "^3.0.10", "gatsby-source-contentful": "^2.1.4", "gatsby-source-filesystem": "^2.1.1", "gatsby-transformer-sharp": "^2.2.0", "gatsby-transformer-sqip": "^2.1.3", "graphql": "^14.4.1", "identity-obj-proxy": "^3.0.0", "image-webpack-loader": "^5.0.0", "isomorphic-fetch": "^2.2.1", "jest": "^24.8.0", "jquery": "^3.4.1", "jsinspect": "zakdoek/jsinspect", "lodash.debounce": "^4.0.8", "lodash.isempty": "^4.4.0", "lodash.isequal": "^4.5.0", "lodash.merge": "^4.6.2", "material-table": "^1.59.0", "material-ui-dropzone": "^3.2.1", "moment": "^2.24.0", "node-sass": "^4.13.1", "popper.js": "^1.15.0", "postcss-import": "^12.0.1", "postcss-loader": "^3.0.0", "prettier": "^1.18.2", "query-string": "^6.8.1", "react": "^16.8.6", "react-chartjs-2": "^2.7.6", "react-circular-progressbar": "^2.0.1", "react-docgen": "^4.1.1", "react-dom": "^16.8.6", "react-dropzone-uploader": "mariovde/react-dropzone-uploader#master", "react-helmet": "^5.2.1", "react-input-slider": "^5.0.15", "react-move": "^6.0.0", "react-number-format": "^4.4.4", "react-phone-input-2": "^2.13.7", "react-redux": "^7.1.0", "react-slick": "^0.27.14", "react-sortable-tree": "^2.7.1", "react-spring": "^8.0.27", "react-styleguidist": "^9.1.11", "react-swipeable-views": "^0.13.9", "react-switch": "^5.0.1", "react-window": "^1.8.5", "redux": "^4.0.4", "redux-thunk": "^2.3.0", "resolve-url-loader": "^3.1.0", "sass-loader": "^7.1.0", "slick-carousel": "^1.8.1", "style-loader": "^0.23.1", "styled-components": "^5.1.0", "stylelint": "^10.1.0", "stylelint-config-css-modules": "^1.4.0", "stylelint-config-prettier": "^5.2.0", "stylelint-config-standard": "^18.3.0", "stylelint-webpack-plugin": "^0.10.5", "webpack": "^4.35.2" },

running "yarn develop" builds the project
running "yarn build" shows warnings of deprecated functions.

Expected result

one, clean lookn' build...

Actual result

a list full of warnings about unsafe functions.

Environment

System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
Yarn: 1.22.5 - ~/.yarn/bin/yarn
npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 89.0.4389.90
Edge: 89.0.774.57
Firefox: 85.0.2
Safari: 14.0.3
npmPackages:
gatsby: 3.1.1 => 3.1.1
gatsby-image: ^2.2.3 => 2.11.0
gatsby-link: ^2.2.0 => 2.11.0
gatsby-plugin-eslint: ^2.0.5 => 2.0.8
gatsby-plugin-manifest: ^2.2.0 => 2.12.1
gatsby-plugin-material-ui: ^2.1.10 => 2.1.10
gatsby-plugin-offline: ^2.2.0 => 2.2.10
gatsby-plugin-react-helmet: ^3.1.0 => 3.10.0
gatsby-plugin-sass: ^4.1.0 => 4.1.0
gatsby-plugin-sharp: ^2.2.1 => 2.14.3
gatsby-plugin-stylelint: ^3.2.0 => 3.2.0
gatsby-react-router-scroll: ^3.0.10 => 3.7.0
gatsby-source-contentful: ^2.1.4 => 2.3.56
gatsby-source-filesystem: ^3.1.0 => 3.1.0
gatsby-transformer-sharp: ^3.1.0 => 3.1.0
gatsby-transformer-sqip: ^3.1.1 => 3.1.1
npmGlobalPackages:
gatsby-cli: 3.1.0

[LekoArts]

Please see hupe1980/gatsby-plugin-material-ui#65