christopherbiscardi / gatsby-plugins Goto Github PK

After upgrading our project to Gatsby V3, builds now fail with the following output on Netlify:

error "gatsby-plugin-printer" threw an error while running the onPostBuild lifecycle:
Rollup requires that your Babel configuration keeps ES6 module syntax intact. Unfortunately it looks like your configuration specifies a module transformer to replace ES6 modules with another module format. To continue you have to disable it.
Most commonly it's a CommonJS transform added by @babel/preset-env - in such case you should disable it by adding `modules: false` option to that preset (described in more detail here - https://github.com/rollup/rollup-plugin-babel#modules ).
 
Error: Rollup requires that your Babel configuration keeps ES6 module syntax intact. Unfortunately it looks like your configuration specifies a module transformer to replace ES6 modules with another module format. To continue you have to disable it.
Most commonly it's a CommonJS transform added by @babel/preset-env - in such case you should disable it by adding `modules: false` option to that preset (described in more detail here - https://github.com/rollup/rollup-plugin-babel#modules ).

Says they have improved page.screenshot. May cause behavioral differences, need to look into it. (heads up @trevorblades)

https://twitter.com/mathias/status/1187642693469560833

After implementing gatsby-plugin-printer for my blog posts, I'd also like to use it for regular pages.

There is a different plugin that has code for it here, by updating the generated HTML after compilation: https://github.com/benborgers/gatsby-plugin-og-image/blob/master/gatsby-node.js but if that could be done by gatsby-plugin-printer in some way that would be great.

Implementing this all locally was a breeze, but unfortunately, I had to bypass running "gatsby-plugin-printer" on my Netlify build because it doesn't work out of the box with it.

There is a way to enable puppeteer on a Netlify build utilizing lambda functions, see here: https://bitsofco.de/how-to-use-puppeteer-in-a-netlify-aws-lambda-function/

I am wondering if there is an easy way to implement something like this or at least some first thoughts on how I could go about achieving this.

Thanks so much! This plugin is an absolute lifesaver!

Hi!

I followed along with https://lannonbr.com/blog/2019-11-10-og-images/ to get screenshots.

No screenshots are being taken.
After some investigating it appears the internal graphql query (in gatsby-node of this plugin) is not returning any results, hence puppeteer never tries to take screenshots.

More info here:
NickyMeuleman/gatsby-theme-nicky-blog#2

edit: after way too long I double checked myself and discovered that while I was running gatsby clean && gatsby develop, I did not do the clean step before build.
You even told me to rm -rf .cache && gatsby build in discord (emphasis mine).

After 3 times (why 3? That's odd. Definition of insanity etc, etc.) times running gatsby clean && gatsby build the images started showing up in the public folder.

Not a clue what's happening here. everything works on a clean build, but if there's a .cache, the printer nodes don't get created

cc @trevorblades who ran into this

Puppeteer v2 changed how screenshots work and broke everything anyway, so might as well move to something that's more lambda-friendly, etc

https://github.com/microsoft/playwright

currently you have to build to use the tool, it'd be nice if you could see all the images on a page or something, maybe iframe them all and execute just like we do in puppeteer? but on a ___printer gatsby page

The devtips.json file should include the group name or a slug to enable linking back to the collection:

{
    "id": "b6d4df74-dcb0-54a6-9225-ab7c4e43ac53",
    "tweet": "bat (https://github.com/sharkdp/bat) is a cat replacement that includes syntax highlighting, line numbers, and more.",
    "images": [
      "/devtip-images/cli-bat-replaces-cat-0.png"
    ],
+  collection: 'cli',
+  url: '/devtips/cli'
  }

Build a single site that's like gatsby-plugins.christopherbiscardi.com or something for docs. Maybe christopherbiscardi.com/gatsby-plugins/<plugin>?

should move to

I believe this will need to be put in as a peer dependency, but was not sure.

I am using Gatsby Theme Apollo. On this line: https://github.com/apollographql/gatsby-theme-apollo/blob/master/packages/gatsby-theme-apollo-docs/gatsby-node.js#L53 it's using gatsby-plugin-printer.

I'm trying to use component shadowing to change the social-card.js file it's using here: https://github.com/apollographql/gatsby-theme-apollo/blob/master/packages/gatsby-theme-apollo-docs/gatsby-node.js#L53 but cannot get it to work. Shadowing regular react components does work.

Is it because this resolve is sent to rollup? Chasing it down the rabbit hole here: https://github.com/ChristopherBiscardi/gatsby-plugins/blob/master/packages/gatsby-plugin-printer/gen-code-bundle.js#L46