Develop Reference

Building static HTML failed for path "/styles/" - Gatsby, fontawesome

I have spent three hours trying to debug this Gatsby build error.
It says to use a non-minified command, but gatsby develop doesn't throw any error so I'm a bit unsure on how to debug this.
Looking online reveals very little for the /styles/ folder.
My Netlify server also throws the same error as well as failing locally on Mac.
Any suggestions on where to start?
ERROR
Page data from page-data.json for the failed page "/styles/": {
"componentChunkName": "component---src-pages-styles-js",
"path": "/styles/",
"result": {
"pageContext": {}
},
"staticQueryHashes": []
}
failed Building static HTML for pages - 2.025s
ERROR #95313
Building static HTML failed for path "/styles/"
See our docs page for more info on this error: https://gatsby.dev/debug-html
1 | /*!
> 2 | * Font Awesome Free 5.15.4 by #fontawesome - https://fontawesome.com
| ^
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | */
5 | function _typeof(obj) {
WebpackError: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bname%2C%20styles%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
- index.es.js:2
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:2:1
- index.es.js:2
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:2:1
- index.es.js:4
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:4:1
- index.es.js:27
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:27:1
- index.es.js:26
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:26:37
- index.es.js:37
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:37:1
- static-entry.js:294
play-landing/.cache/static-entry.js:294:22
- index.es.js:147
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:147:1
Here is my package JSON
{
"name": "play-landing",
"description": "-",
"version": "1.1.3",
"author": "Luke Brown",
"dependencies": {
"#emotion/react": "^11.7.1",
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/pro-light-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.17",
"#mui/material": "^5.3.1",
"bulma": "^0.9.0",
"dotenv": "^14.3.2",
"gatsby": "^4.0.0",
"gatsby-plugin-emotion": "^7.6.0",
"gatsby-plugin-image": "^2.0.0",
"gatsby-plugin-netlify": "^3.14.0",
"gatsby-plugin-netlify-cms": "^6.0.0",
"gatsby-plugin-purgecss": "^6.0.0",
"gatsby-plugin-react-helmet": "^5.0.0",
"gatsby-plugin-react-svg": "^3.1.0",
"gatsby-plugin-sass": "^5.0.0",
"gatsby-plugin-sharp": "^4.0.0",
"gatsby-plugin-web-font-loader": "^1.0.4",
"gatsby-remark-copy-linked-files": "^5.0.0",
"gatsby-remark-images": "^6.0.0",
"gatsby-remark-relative-images": "^0.3.0",
"gatsby-source-filesystem": "^4.0.0",
"gatsby-transformer-remark": "^5.0.0",
"gatsby-transformer-sharp": "^4.0.0",
"lodash": "^4.17.15",
"lodash-webpack-plugin": "^0.11.4",
"lottie-react": "^2.2.1",
"netlify-cms-app": "^2.15.65",
"netlify-cms-media-library-cloudinary": "^1.3.10",
"netlify-cms-media-library-uploadcare": "^0.5.10",
"prop-types": "^15.6.0",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-helmet": "^6.0.0",
"sass": "^1.43.2",
"uuid": "^8.0.0"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"scripts": {
"clean": "gatsby clean",
"start": "npm run develop",
"build": "npm run clean && gatsby build",
"develop": "npm run clean && gatsby develop",
"serve": "gatsby serve",
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"prettier": "^2.0.5"
},
"engines": {
"node": ">= 14.15.0"
}
}

After having access to the repo (which runs on Gatsby) I found that /styles/ folder when searched was inside the /public/ folder which is generated by gatsby, this pointed me to the same error that referenced the chunk error "componentChunkName": "component---src-pages-styles-js", I then searched for this file which existed in the .cache, this file showed me the error was coming from #emotion trying to compile the src/pages/styles.js file that is used by index-old.js.
It seemed that Gatsby was interpreting /src/pages/styles.js as a normal static page to build, but because it is returning a function that returned emotion JSX it couldn't build properly as Gatsby expects all .js files to return React JSX code.
It turned out in this project, these files wasn't actually used anymore so simply deleting them fixed the issue. If it was used though, simply having styles.js somewhere other than the /src/pages folder would fix this. I'd recommend having a views folder where you store all pages and styling relative to it to avoid Gatsby trying to compile pages from styling.

npm update not updating all the outdated modules

I have certain node modules that i want to update. If i run npm outdated i see a list of modules and when i run npm update not all modules are updated.
I still see some in the list when i run npm outdated
my node version is v12.16.2
i see the below list when executing npm outdated
Below are the contents of my package.json
{
"name": "exporter",
"version": "1.0.0",
"description": "api endpoint",
"main": "server.js",
"dependencies": {
"#sentry/node": "5.30",
"abort-controller": "^3.0.0",
"archiver": "^5.2.0",
"aws-sdk": "^2.825.0",
"body-parser": "^1.19.0",
"bull": "^3.20.0",
"bull-board": "^0.9.0",
"config": "^3.3.3",
"cors": "^2.8.5",
"csv": "^5.3.2",
"dotenv": "^8.2.0",
"exceljs": "^4.2.0",
"express": "^4.17.1",
"express-basic-auth": "^1.2.0",
"express-rate-limit": "^5.2.3",
"fs": "0.0.1-security",
"generic-pool": "^3.7.1",
"helmet": "^4.3.1",
"jimp": "^0.16.1",
"JSONStream": "^1.3.5",
"jsonwebtoken": "^8.5.1",
"morgan": "^1.10.0",
"node-fetch": "^2.6.1",
"nodemailer": "^6.5.0",
"pg": "^8.6.0",
"pg-query-stream": "^4.1.0",
"pm2": "^4.5.1",
"puppeteer": "^5.5.0",
"rate-limit-redis": "^2.0.0",
"twitter": "^1.7.1",
"underscore": "^1.12.0",
"uuid": "^8.3.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "/usr/local/bin/pm2 restart all --update-env"
},
"author": "",
"license": "ISC"
}
How can i update all the below modules, specifically pm2 and puppeteer. Thanks.

npm update respects semver constraints.
This command will update all the packages listed to the latest version (specified by the tag config), respecting the semver constraints of both your package and its dependencies (if they also require the same package).
According to the package.json, the constraints are
#sentry/node: exact version
bull-board, dotenv, pm2, puppeteer: caret range
The packages are up-to-date according to these constraints.
To get the latest versions, you can install packages with the #latest tag.
Note that these are major version updates - things can break.

I'm getting error of .html extension not recognized using node command

I got project from my client to update that project with some points. But I'm facing problem to run this project.
I install npm and all required node modules downloaded based on package.json information.
{
"name": "acelle-builder",
"version": "1.0.0",
"description": "",
"private": true,
"type" : "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#types/ace": "0.0.42",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.6.0",
"file-loader": "^4.1.0",
"html-loader": "^0.5.5",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.14.1",
"raw-loader": "^3.1.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"svg-url-loader": "^3.0.0",
"to-string-loader": "^1.1.5",
"url-loader": "^2.1.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"ace-builds": "^1.4.12",
"bootstrap": "^4.5.2",
"jquery": "^3.5.1",
"js-beautify": "^1.13.0",
"popper.js": "^1.16.1"
}
}
there are some codes of importing html files like
import controls from './controls.html';
import widgets from './widgets.html';
but when I run this project using node command I'm getting error with unknown file .html extension.
How can I solve this?

Node.js can only import JS modules.
If you want to use syntax which involves importing other kinds of things then you need to use an appropriate tool. The dependencies in the package.json file include WebPack. Use that.
There is even a script (named build) listed that will run it.
npm run build

You can't import from an html file. You are trying to import from ./controls.html and ./widgets.html. You have to import from js files. Maybe you meant "./controls.html" and "./widgets.js".

Ember Quickstart tutorial: Parsing error: Unexpected character '#' in '#action'

I just started using Ember and I have some trouble with the Ember Quickstart tutorial. Currently, I get Parsing error: Unexpected character '#' in line 5 of people-list.js:
import Component from '#glimmer/component';
import { action } from '#ember/object';
export default class PeopleListComponent extends Component {
#action
showPerson(person) {
alert(`The person's name is ${person}!`);
}
}
What's wrong here? The code is copied from the tutorial.
This is the output of ember -v:
ember-cli: 3.18.0
node: 11.13.0
os: darwin x64
This is my package.json. I can run npm install, but yarn install gives me The engine "node" is incompatible with this module. Expected version "10.* || >= 12". Got "11.13.0".
{
"name": "ember-quickstart",
"version": "0.0.0",
"private": true,
"description": "Small description for ember-quickstart goes here",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test"
},
"devDependencies": {
"#ember/jquery": "^0.5.2",
"#ember/optional-features": "^0.6.3",
"broccoli-asset-rev": "^2.7.0",
"ember-ajax": "^5.0.0",
"ember-cli-app-version": "^3.2.0",
"ember-cli-babel": "^7.1.2",
"ember-cli-dependency-checker": "^3.1.0",
"ember-cli-eslint": "^4.2.3",
"ember-cli-htmlbars": "^3.0.0",
"ember-cli-htmlbars-inline-precompile": "^1.0.3",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-sri": "^2.1.1",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-uglify": "^2.1.0",
"ember-data": "~3.9.0",
"ember-export-application-global": "^2.0.0",
"ember-load-initializers": "^1.1.0",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-qunit": "^3.4.1",
"ember-resolver": "^5.0.1",
"ember-source": "~3.9.0",
"ember-welcome-page": "^3.2.0",
"eslint-plugin-ember": "^5.2.0",
"loader.js": "^4.7.0",
"qunit-dom": "^0.8.0"
},
"engines": {
"node": "10.* || >= 12"
},
"dependencies": {
"ember-cli": "^3.18.0",
"#glimmer/component": "^1.0.0"
}
}
Adding some text here as SO won't let me post the question otherwise.

You're ember-source is set to ~3.9.0. I'm pretty sure #action is an Octane feature that was added in 3.14.
Either update ember-source to 3.14 or newer or switch to the 3.9.0 documentation. I'd recommend updating as Octane is awesome.

The output says you currently have ember-cli 3.18, but your app seems to have been generated by an older ember-cli 3.9 as indicated by devDependencies.
As mentioned in the comments, 3.9 does not have access to some of the current features unless you install some polyfills.
If regenerating the app is a possibility, I would suggest doing it.
Run ember --version to make sure 3.18 is being called
Run ember new my-app-name and check that package.json has 3.18 for ember-source.
Go through the quickstart!
Alternatively, you can run npx ember-cli new my-app-name and it should generate an app using the latest ember-cli version available in npm.
If you don't want to lose some work you might have done, you can check out ember-cli-update by running something like npx ember-cli-update. Check the README for more info.

KeystoneJS can't update post

UPDATE It seems the problem is I can't update/edit my post. Every time I create a new post, then it enter dead loop. Please help me T-T
Recently I started a program using keystoneJS as my CMS.
Everything goes fine but this Post problem.
I have found if I install keystone-demo via yo keystone(using the KeystoneJS generator made with Yeoman) then publishing post can work, but if I install keystone manually, the problem comes...
In Google Inspect Console, there is a error-
"TypeError: undefined is not an object (evaluating 'refList.expandColumns')"
I guess it is the keystone version problem.
This is my package.json file
{
"name": "keystone-demo",
"version": "1.0.1",
"private": true,
"repository": {
"type": "git",
"url": "https://github.com/JedWatson/keystone-demo.git"
},
"dependencies": {
"keystone": "https://github.com/keystonejs/keystone.git",
"async": "^1.5.0",
"lodash": "^3.10.1",
"csv": "^0.4.6",
"gulp": "^3.9.1",
"gulp-less": "^3.1.0",
"gulp-shell": "^0.5.2",
"gulp-watch": "^4.3.5",
"pug": "^2.0.0-alpha6"
},
"scripts": {
"start": "node keystone.js"
}
}
And this is the package.json file in that can work normally version
{
"name": "keystone",
"version": "0.0.0",
"private": true,
"dependencies": {
"keystone": "^0.3.16",
"async": "^1.5.0",
"underscore": "^1.8.3",
"node-sass": "^3.3.2",
"node-sass-middleware": "^0.9.7",
"dotenv": "^1.1.0"
},
"devDependencies": {
"gulp": "^3.7.0",
"gulp-jshint": "^1.9.0",
"jshint-stylish": "^0.1.3",
"gulp-shell": "^0.5.0",
"gulp-watch": "^4.3.5",
"gulp-sass": "^2.0.4"
},
"engines": {
"node": ">=0.10.22",
"npm": ">=1.3.14"
},
"scripts": {
"start": "node keystone.js"
},
"main": "keystone.js"
}

You're loading the latest keystone version from github, which is not always stable. This is probably the reason for the error you're seeing.
I recommend using the latest version published to npm (0.3.22 at time of writing) instead.
Update the first line in your dependencies to this, and it will work:
"keystone": "^0.3.22",
To add keystone to a new project you can also type npm install --save keystone