plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-sass`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
already add the plugin but still error
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
Nose Sass isn’t included with the plugin, so also try running:
npm install -S node-sass
Per: https://www.gatsbyjs.org/packages/gatsby-plugin-sass/#install
That way for most changes you can easily upgrade or change versions of Node Sass, without needing to wait on a change from the Gatsby plugin maintainers.
Hope that helps!
Related
I am building a project with webpack module federation with the following setup:
React host (running on localhost:3000)
Angular Remote 1 (running on localhost:4201)
Angular Remote 2 (running on localhost:4202)
The goal is to get both remotes working. If I only run one of the and remove the other it is working perfectly.
The issue I am facing is that when the remotes are loaded, __webpack_require__.p is set by one of the remotes' script and therefore the other remote's chunk is loaded from the wrong url.
Here is the error I get:
My module federation config is the following:
React host:
.
.
.
new ModuleFederationPlugin({
name: "react_host",
filename: "remoteEntry.js",
remotes: {
angular_remote_1: "angular_remote_1#http://localhost:4201/angular_remote_1.js",
angular_remote_2: "angular_remote_2#http://localhost:4202/angular_remote_2.js"
},
exposes: {},
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
},
"react-dom": {
singleton: true,
requiredVersion: deps["react-dom"],
},
},
}),
.
.
.
Angular Remote 1
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "auto",
uniqueName: "angular_remote_1",
scriptType: "text/javascript"
},
optimization: {
runtimeChunk: false
},
experiments: {
outputModule: true
},
plugins: [
new ModuleFederationPlugin({
name: "angular_remote_1",
library: { type: "var", name: "angular_remote_1" },
filename: "angular_remote_1.js",
exposes: {
'./angularRemote1': './src/loadAngularRemote1.ts',
},
shared: ["#angular/core", "#angular/common", "#angular/router"]
})
],
};
Angular Remote 2
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "auto",
uniqueName: "angular_remote_2",
scriptType: "text/javascript"
},
optimization: {
runtimeChunk: false
},
experiments: {
outputModule: true,
},
plugins: [
new ModuleFederationPlugin({
name: "angular_remote_2",
library: { type: "var", name: "angular_remote_2" },
filename: "angular_remote_2.js",
exposes: {
'./angularRemote2': './src/loadAngularRemote2.ts',
},
shared: ["#angular/core", "#angular/common", "#angular/router"]
})
],
};
Thins I have tried so far:
Playing around with public path (between auto and hardcoded)
Setting a custom chunkLoadingGlobal for both remotes (not the host)
The exact reproduction of this issue can be found here: https://github.com/BarniPro/react-host-angular-remotes-microfrontend
Any help is greatly appreciated.
The issue can be solved by setting the topLevelAwait experiment to true in the remotes's webpack.config.js:
experiments: {
topLevelAwait: true,
},
This results in the two remotes loading in sync which prevents the paths from overriding each other.
Another update I had to make was disabling the splitChunks option in the remotes' optimization settings (see SplitChunksPlugin):
optimization: {
runtimeChunk: false, // This is also needed, but was added in the original question as well
splitChunks: false,
}
The Github repo has been updated with the working solution.
I'm attempting to upgrade from Gatsby 2 to 3. I removed all dependencies from package.json and installed Gatsby. I'm currently trying to run gatsby develop, but I get the error:
'The "path" argument must be of type string. Received an instance of Object'
Any idea how to get around this? I'm not sure what all I need to share, but here's my gatsby-config.js.
// Gatsby-config.js
module.exports = {
siteMetadata,
plugins: [
{
resolve: `gatsby-plugin-mdx`,
options: {
[],
extensions: [`.mdx`, `.md`]
}
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Tyler's Blog`,
short_name: `TylersBlog`,
start_url: `/`,
background_color: `#ffffff`,
theme_color: `#663399`,
display: `standalone`,
icon: `content/favicon.svg`,
},
},
],
}
Remove your package-lock.json and generate it again by npm install. Run a gatsby clean after that.
In addition, without knowing the siteMetadata object structure it's difficult to guess if there's something wrong there but maybe your need to:
// Gatsby-config.js
module.exports = {
siteMetadata.siteMetadata,
plugins: [
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.mdx`, `.md`]
}
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Tyler's Blog`,
short_name: `TylersBlog`,
start_url: `/`,
background_color: `#ffffff`,
theme_color: `#663399`,
display: `standalone`,
icon: `content/favicon.svg`,
},
},
],
}
I've also removed the empty options array.
I'm new to Gatsby and attempting to build blog functionality. I have installed gatsby-source-filesystem, gatsby-transformer-remark, and gatsby-plugin-catch-links. I have blog posts within the pages directory, each blog post is within a folder inside pages. When I attempt to query the blog posts witin pages I can the following error:
Cannot query field \"allMarkdownRemark\" on type \"Query\"
Here's how my project is structured:
Here is my config file:
module.exports = {
siteMetadata: {
title: `Gatsby Crash Course`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `#gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-catch-links`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages/`
},
},
`gatsby-transformer-remark`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
My GraphQL query :
{
allMarkdownRemark {
edges {
node {
frontmatter {
path
title
date
author
}
}
}
}
}
How can I fix this error and get allMarkdownRemark to work properly and retrieve the blog posts from pages?
I have a file structure like so:
src
- images
- - blog-images
- - - (various png and jpg files)
- pages
- - blog
- - - (various .md files)
I successfully created the blog pages through with a template. I cannot figure out how to make these images appear. I have included gatsby-remark-images and modified by gatsby-config.js to appear like this:
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `blogImages`,
path: `${__dirname}/src/images/blog-images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `blog`,
path: `${__dirname}/src/pages`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/Favicon.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-sass`,
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
}
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1200
}
}
]
}
},
Occasionally, the image will show up as I move it from the blog-images folder to images or the pages/blog folder. But then I try to adjust it or get a second image on the page working by moving it and it stops working. I undo what broke the image and it does not come back.
I've tried following this post and this one, but I'm not any closer to understanding what I'm doing wrong.
Moments after posting, I figured it out.
I was trying to reference the image via [alt](./filename.png) or [alt](./blog-images/filename.png). I ended up referencing it relative to the post, instead of any of my image-centric gatsby-source-filesystem configs.
What worked was [alt](../../images/blog-images/filename.png)
Build Errors on Netlify. Build exceeds maximum allowed runtime.
Can build locally running yarn build and inside the Netlify docker container, however when on Netlifys build it exceeds maximum allowed runtime.
Am getting some warnings like the below when running in the Netlify docker container
Warning: a promise was created in a handler at opt/buildhome/repo/node_modules/postcss/lib/lazy-result.js:213:17 but was not returned from it
Warning: a promise was created in a handler at /opt/buildhome/repo/node_modules/gatsby-transformer-remark/extend-node-type.js:179:19 but was not returned from it
Those two warnings are pointing to two Gatsby plugins I have configured. (Config below)
require('dotenv').config();
module.exports = {
siteMetadata: {
title: 'My Website',
},
proxy: {
prefix: '/.netlify/functions',
url: 'http://localhost:9000',
},
plugins: [
'gatsby-plugin-eslint',
'gatsby-plugin-react-helmet',
'gatsby-plugin-postcss',
{
resolve: 'gatsby-source-contentful',
options: {
spaceId: process.env.SPACE_ID,
accessToken: process.env.ACCESS_TOKEN,
},
},
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
exclude: /img/,
},
},
},
'gatsby-plugin-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-images-contentful',
options: {
maxWidth: 590,
},
},
],
},
},
'gatsby-plugin-netlify', // make sure to keep it last in the array
],
};
Have tried to debug all weekend but not sure what else to do. I couldn't find anyone else who has had similar issues.