Error: Cannot find module ‘gatsby-plugin-utils/polyfill-remote-file’

After updating Gatsby from 3.0.4 to 4.12.1 I got the following error message: Error: Cannot find module 'gatsby-plugin-utils/polyfill-remote-file' and the stack trace below:

$ NODE_OPTIONS="-r esm" gatsby develop -H 0.0.0.0 -o
/Users/esausilva/Development/Projects/andreasilva-design/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

/Users/esausilva/Development/Projects/andreasilva-design/node_modules/gatsby/dist/utils/start-server.js:1
Error: Cannot find module 'gatsby-plugin-utils/polyfill-remote-file'
Require stack:
- /Users/esausilva/Development/Projects/andreasilva-design/node_modules/gatsby/dist/utils/start-server.js
...
Continue reading →

Create a React Custom Lightbox Gallery

With many lightbox gallery solutions on NPM, I ended up writing my own React Custom Lightbox Gallery Component to meet my specific needs.

I was looking for a “lightbox” type gallery that would allow me to display images (multiple images in the same modal), videos, text, and a mix of that, all within the same modal window. All I could find were galleries that could only display a single image in a modal.

This is a two-part tutorial:

  1. Create a React Custom Modal
  2. Create a React Custom Lightbox Gallery (you are here)
Continue reading →

Create a React Custom Modal

With many modal solutions on NPM, I ended up writing my own React Custom Modal Component to meet my specific needs.

Well, the above statement is not entirely true. I was looking for a “lightbox” type gallery that would allow me to display images (multiple images in the same modal), videos, text, and a mix of that, all within the same modal window, and to accomplish all of that I needed a custom modal component!

This is a two-part tutorial:

  1. Create a React Custom Modal (you are here)
  2. Create a React Custom Lightbox Gallery
Continue reading →

React Hook to play a video with Intersection Observer

How to use a custom React hook to auto-play a video with Intersection Observer when it becomes visible and pause when it goes out of view.

I was building my wife’s website and she wanted to play a video clip as a background with some text overlaying the video. I knew I did not want to play the video on page load, but only when it became visible to the user.

With Intersection Observer, I was able to accomplish exactly that.

Continue reading →

Add a React App to a NET Core MVC App

In this tutorial, we will go step by step on how to add a React App to a NET Core MVC App. Handling 404 pages and client routing.

I am one to think that not everything I build has to be a Single Page Application (SPA). Recently I was building a project for a client, and I decided that only one section of the app needed to be a SPA and the rest of the app a “traditional” MVC app, so I started the app with the “MVC” part and later added the “SPA”. This is how I did it.

Continue reading →

Deploy a Production React App to Netlify

In this tutorial, we will learn how to deploy a React app with a back-end API to Netlify. We will cover deploying an Express.js API and Lambda Functions to interact with the React front-end.

I have written two other tutorials where we will deploy the same app to Vercel and Heroku. (Links below)

Continue reading →

Deploy a Production React App to Vercel

In this tutorial, we will learn how to deploy a React app with a back-end API to Vercel. We will cover deploying Lambda Functions API to interact with the React front-end.

I have written two other tutorials where we will deploy the same app to Netlify and Heroku. (Links below)

Continue reading →

Deploy a Production React App to Heroku

In this tutorial, we will learn how to deploy a React app with a back-end API to Heroku. We will cover deploying an Express.js API to interact with the React front-end.

I have written two other tutorials where we will deploy the same app to Vercel and Netlify. (Links below)

Continue reading →

How to use Sass and CSS Modules with create-react-app

A short yet detailed guide to styling components with create-react-app with Sass and CSS Modules, which now is part of CRA.

Up until the release of create-react-app v2, if you wanted to include Sass or CSS Modules in your project, you would have to eject from create-react-app, learn Webpack configurations, install Sass loaders and configure it yourself.

Continue reading →