[Gatsby v3] WebpackError: Unsafe builtin usage fs.readFileSync

[daydream05]

Running into this issue with one of the community plugins that I use.

I added resolutions as mentioned in the migration guide, but that wasn't enough and I was getting this error for gatsby-plugin-loadable-components-ssr

How would someone fs.readFileSync to work with v3?

WebpackError: Unsafe builtin usage fs.readFileSync
    at gatsby-starter-gcn/node_modules/gatsby-plugin-loadable-components-ssr/gatsby-ssr.js:15:87
    at gatsby-starter-gcn/webpack/bootstrap:18:1
    at gatsby-starter-gcn/.cache/api-runner-ssr.js:19:15
    at gatsby-starter-gcn/webpack/bootstrap:18:1
    at gatsby-starter-gcn/.cache/static-entry.js:10:19
    at gatsby-starter-gcn/webpack/bootstrap:18:1
    at gatsby-starter-gcn/webpack/startup:4:1
    at gatsby-starter-gcn/node_modules/@contentful/rich-text-react-renderer/dist/rich-text-react-renderer.es5.js:484:1
    at gatsby-starter-gcn/node_modules/@contentful/rich-text-react-renderer/dist/rich-text-react-renderer.es5.js:512:1
    at gatsby-starter-gcn/node_modules/@contentful/rich-text-react-renderer/dist/rich-text-react-renderer.es5.js:348:1
    at gatsby-starter-gcn/node_modules/@contentful/rich-text-react-renderer/dist/rich-text-react-renderer.es5.js:193:1
    at gatsby-starter-gcn/node_modules/@contentful/rich-text-react-renderer/dist/rich-text-react-renderer.es5.js:372:1

13 |   // Read the stats file generated by webpack loadable plugin.
  14 |   // The file will not exist in develop stages.
> 15 |   stats: (0, _fs.existsSync)(_constants.statsPath) ? JSON.parse((0, _fs.readFileSync)(_constants.statsPath, 'utf8')) : {},
     |                                                                                       ^
  16 |   entrypoints: []
  17 | }); // extractor.collectChunks() will wrap the application in a ChunkExtractorManager
  18 |

[daydream05]

Here's what the file in question looks like:

Just saw using fs in ssr is depracated

import { readFileSync, existsSync } from 'fs';
import { ChunkExtractor } from '@loadable/server';
import { statsPath } from './constants';

const extractor = new ChunkExtractor({
  // Read the stats file generated by webpack loadable plugin.
  // The file will not exist in develop stages.
  stats: existsSync(statsPath) ? JSON.parse(readFileSync(statsPath, 'utf8')) : {},
  entrypoints: [],
});

// extractor.collectChunks() will wrap the application in a ChunkExtractorManager
export const wrapRootElement = ({ element }) => extractor.collectChunks(element);

export const onRenderBody = ({ setPostBodyComponents, setHeadComponents }) => {
  // Set link rel="preload" tags in the head to start the request asap. This will NOT parse the assets fetched
  setHeadComponents(extractor.getLinkElements());

  // Set script and style tags at the end of the document to parse the assets.
  setPostBodyComponents([...extractor.getScriptElements(), ...extractor.getStyleElements()]);

  // Reset collected chunks after each page is rendered
  extractor.chunks = [];
};

[daydream05]

Ok i give up. I think this is impossible

[kimbaudi]

i think you need to replace import { readFileSync, existsSync } from 'fs'; with import stats from '!!raw-loader!/public/loadable-stats-build-javascript.json

and then

const extractor = new ChunkExtractor({
  stats,
  entrypoints: [],
});

basically using webpack's raw-loader instead of fs module to load the .json file

[daydream05]

Thanks! The main issue right now is loading the public folder from a remote plugin. According to the maintainer's notes, there was no way of dynamically importing the public folder in gatsby

[daydream05]

I think that's why he ended up using fs

[josiang]

@daydream05,

You can try import stats from ('/public/loadable-stats-build-javascript.json'); and ditch the use of fs entirely.
No need to use a webpack loader since importing JSON works by default now.

Using the dynamic path ${process.cwd()}/public/${statsFilename} won't work here, webpack does not like that.

[kelvindecosta]

I use this plugin as well, and the last I checked it isn't supporting Gatsby V3 yet, so we can't complain.

[daydream05]

I’m not complaining. I’m asking for help so i can fork the plugin and possibly open a pull request to get it to v3.