I am keep getting the warning message of my website: https://www.selectchu.com
chrome warning message
"The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally."
The resource https://www.selectchu.com/component---src-pages-index-js-e3609fd82d452154463c.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The resource https://www.selectchu.com/google-fonts/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The resource https://www.selectchu.com/app-97f530f3e5a7162dfd06.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The resource https://www.selectchu.com/webpack-runtime-c108f36890d85c65bb96.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
what can be the main problem? and how to solve it?
I've tried to add as attribute on helmet plugin such as
const Font = 'public/google-fonts/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2'
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
siteMetadata: {
title: `SelectChu`,
description: `Upcoming SelectChu project`,
author: `#Hogyster`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: 'gatsby-plugin-netlify',
options: {
allPageHeaders: [`Link: <${Font}>; rel=preload; as=font; type=font/woff2 crossorigin=anonymous`],
},
this is my gatsby-config.js
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-styled-components`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sass`,
`gatsby-plugin-sharp`,
`gatsby-plugin-transition-link`,
{
resolve: `gatsby-plugin-prefetch-google-fonts`,
options: {
fonts: [
{
family: `Noto Sans KR`,
subsets: [`latin`, 'korean'],
variants: [`400`, `700`]
},
{
family: `Open Sans`,
variants: [`400`, `700`]
},
{
family: `Roboto`,
variants: [`400`, `700`]
},
],
},
},
'gatsby-transformer-remark',
}
Related
So I couldn't build my gatsby app because it has quite a lot of dependencies on window. Many components are built depending on the width of the browser window.
After the "gatsby build" command I got WebpackError: ReferenceError: window is not defined.
I found a solution on the internet to paste the following code into gatsby-node.js:
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === 'build-html' || stage === 'develop-html') {
actions.setWebpackConfig({
module: {
rules: [
{
test: /node_modules/,
use: loaders.null(),
},
],
},
});
}
};
but when rebuilding the app I get this error:
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|json|C:\Users\Damian\Documents\Ossolinsky\app\node_modules\null-loader\dist\cjs.js??ruleSet[1].rules[13].use!C:\Users\Damian\Documents\Ossolinsky\app\node_modules\gatsby\package.json': No serializer registered for JSONParseError
ERROR #98123 WEBPACK
Generating SSR bundle failed
Unexpected end of JSON input while parsing empty string
File: node_modules\gatsby\package.json
not finished Building HTML renderer - 1.257s
I found a solution on the internet to paste the following code into
gatsby-node.js
This is the recipe of the devil. With the following snippet:
{
test: /node_modules/,
use: loaders.null(),
},
You are adding a null loader to all node_modules folder and the idea here is to add only instances that need to be ignored in the server because they had a window dependency. Since rules is an array you can do:
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === 'build-html' || stage === 'develop-html') {
actions.setWebpackConfig({
module: {
rules: [
{
test: /some_package_1/,
use: loaders.null(),
},
{
test: /some_package_2/,
use: loaders.null(),
},
{
test: /some_package_3/,
use: loaders.null(),
},
],
},
});
}
};
Keep in mind that /some_package_3/ is a regular expression (hence the test key and that's why is between slashes) that needs to match the folder name inside node_modules.
To know which string should be placed as a regular expression, normally if you import { some_package_1 } from 'some_package_1' means that some_package_1 is the folder inside node_modules that needs to be added.
There's a chance that some_package_1 is not using a window per se, and it's a dependency of the dependency: in that case, you need to find out which one is it and apply the same reasoning ignoring it.
Many components are built depending on the width of the browser
window.
If those are internal components, you should check first if there's a window available when the component is being rendered/parsed, as the docs suggests, with the following condition:
export default function MyComponent() {
if (typeof window !== "undefined") {
return <div>Component that can use window and will bypass SSR</div>
}
return <div>Component that can't use window</div>
}
By default, Gatsby (properly also related to Webpack) will embed assets that are small enough into the HTML files in base64 encoding. I would like to prevent that from happening.
Is there an option from Gatsby that I can configure? Like something similar to IMAGE_INLINE_SIZE_LIMIT from CRA.
Alternatively, if the above is not possible, which Webpack config (it is related to Webpack, right?) should I modify to achieve what I'm looking for?
As mentioned in the comments, dataUrlCondition probably is what you are looking for.
exports.onCreateWebpackConfig = ({ stage, actions, loaders, getConfig }) => {
const config = getConfig();
actions.setWebpackConfig({
module: {
rules: [
{
parser: {
dataUrlCondition: {
maxSize: 4 * 1024,
},
},
},
],
},
});
};
Gatsby ships with his own webpack configuration but you can customize it using onCreateWebpackConfig API in your gatsby-node.js.
Regarding the parser, if a module source size is less than maxSize then it will be injected into the bundle as a Base64-encoded string, otherwise, the module-file will be emitted into the output directory.
i try to load the SASS for my Gatsby Project but if I check the source code of the web there isn't any classes from my sass.
I am a bit confused and I followed the documentation of Gatsby.
Nothing worked so my last chance is SO.
// gatsby-config.js
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-fontawesome-css',
'gatsby-plugin-sass',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'assets',
path: `${__dirname}/static/`,
},
},
]
Here I import the style.
/**
* Add browser relation logic.
*/
require('./style/global.js');
import './style/sass/index.scss';
I followed the gatsby-plugin-sass documentation and I should be all set. After restarting the server and show source-code of my app there is now class name from my sass file.
Best Regards
Knome
I didn't integrate in any component. Because if I see the Source code
of chrome then there should be scss be loaded.
Ok, well... The SCSS is loaded as it should but the styles are not applied to any component because you've not set any class name.
Just do:
const IndexPage =()=>{
return <div className="grid-container">I'm your index page</div>
}
Like any other HTML element.
I'm trying to format code blocks in markdown files for posts to a website with Gatsby.
I would like the code blocks to be displayed in one of VSCode's color themes (Dark +, for instance). I have npm installed gatsby-remark-vscode, and put the plugin in my gatsby-config.js file:
plugins: [
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [{
resolve: 'gatsby-remark-vscode',
options: {
colorTheme: 'Dark+ (default dark)',
injectStyles: true,
extensions: [{
identifier: 'sdras.night-owl',
version: '1.1.3'
}],
extensionDataDirectory:
path.resolve('extensions'),
logLevel: 'error'
}
}]
}
},
]
I have required 'path' at the top of my gatsby-config.js file:
const path = require('path');
I have imported the stylesheet in my gatsby-browser.js file:
import 'gatsby-remark-vscode/styles.css';
I have used back-ticks to format in my markdown file (the file that contains the blog post) like this:
```js
(CODE EXAMPLE)
```
When I npm run develop, I do not see the correct VSCode formatting for the code block, just a code block similar to what we see on StackOverflow code blocks. I would greatly appreciate any advice on how to render the correct theme in my code blocks.
Oops - looks like I was using a previous version of gatsby-remark-vscode. Updating the version and following the config instructions in the README solved this.
I'm trying to add customMedia option to my postcss-cssnext features config with importFrom file location, but that doesnt work and I dont have any errors on project build, only final Missing #custom-media definition for '--small-viewport'. The entire rule has been removed from the output. when I'm trying to use the media. How do I debug this?
module.exports = {
plugins: [
require('postcss-import')(),
require('postcss-nested')(),
require('postcss-simple-vars')({
variables: {
...require('./src/ui/variables')
}
}),
require('postcss-cssnext')({
features: {
customProperties: false,
browsers: ['> 0.5%, last 2 versions, Firefox ESR, not dead'],
customMedia: {
importFrom: require('path').join(__dirname, './src/ui/custom-media.css')
}
},
}),
require('cssnano')({
autoprefixer: false,
zindex: false,
reduceIdents: false,
discardComments: { removeAll: true },
discardUnused: { fontFace: false },
colormin: false,
}),
]
};
Okay so as per postcss-custom-media CHANGELOG importFrom was added only in 7.0.0 while my cssnext uses 6.0.0. As CSSNext is deprecated I will switch to postcss-preset-env
you know how to use custom media in postcss-preset-env, they work for me only if you create a custom media in the component and refer to it if I want to take custom media from index.css or vars.css they do not work , with variables everything is fine