Heap out of memory fix
increase-memory-limit
Version number of package
grep version node_modules/react/package.json
Check dependency conflicts
npm ls react-dom
Update library to alpha version
npm version prerelease --preid=alpha.1
Templates
When working from a js template, it's helpful to make a deep copy, so the original template is preserved. I have run into some issues with this many times, and it still bites me.
import clone from 'just-clone';
const template = {
'1a': {
id: '1a',
name: 'template 1',
widgets: [],
},
};
function getTemplate(id: string) {
return clone(template[id]);
}
Debugging
Trace deprecation
Replace node_modules/gatsby/dist/bin/gatsby
with the runner of the script.
node --trace-deprecation node_modules/gatsby/dist/bin/gatsby build
This helped me find an issue I was running into with Gatsby 4.0 on build
. The error I was seeing was:
[DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
This case was caused by gatsby-plugin-bundle-stats
and was fixed when commented out.
Logging to Terminal
When using a standard console log, console.log('stars', stars)
, to the terminal in a node.js app, you might see some of the values at a certain depth be represented by [object]
or [Array]
. Let's consider the following data:
const baseItems = {
CHIPS_BLUE: {
id: 'CHIPS_BLUE',
type: 'chips',
label: 'Blue Corn Tortilla Chips',
variants: ['blue corn'],
attributes: ['organic', 'non-gmo', 'vegan', 'gluten-free'],
},
};
const toppingItems = {
CHEEZE_BLEND_SHREDS: {
id: 'CHEEZE_BLEND_SHREDS',
type: 'cheese',
label: 'Cheeze Blend Shreds',
variants: ['cheddar', 'jack'],
attributes: ['organic', 'non-gmo', 'vegan'],
},
JALAPENOS: {
id: 'JALAPENOS',
type: 'vegetable',
label: 'Jalapenos',
variants: ['sliced'],
attributes: ['organic', 'non-gmo', 'vegan', 'gluten-free'],
},
};
const nachos = [
{
base: [baseItems['CHIPS_BLUE']],
toppings: [toppingItems['CHEEZE_BLEND_SHREDS'], toppingItems['JALAPENOS']],
},
];
With console.log("nachos", nachos);
, we get:
nachos [ { base: [ [Object] ], toppings: [ [Object], [Object] ] } ]
To see the rest of the values we can use console.dir()
with the first argument being the object to log and the second specifying the depth. In this case, we'll set the depth to null
to show all levels.
So console.dir({ nachos }, { depth: null });
gives us:
{
nachos: [
{
base: [
{
id: 'CHIPS_BLUE',
type: 'chips',
label: 'Blue Corn Tortilla Chips',
variants: ['blue corn'],
attributes: ['organic', 'non-gmo', 'vegan', 'gluten-free'],
},
],
toppings: [
{
id: 'CHEEZE_BLEND_SHREDS',
type: 'cheese',
label: 'Cheeze Blend Shreds',
variants: ['cheddar', 'jack'],
attributes: ['organic', 'non-gmo', 'vegan'],
},
{
id: 'JALAPENOS',
type: 'vegetable',
label: 'Jalapenos',
variants: ['sliced'],
attributes: ['organic', 'non-gmo', 'vegan', 'gluten-free'],
},
],
},
];
}