Gatsby, Prismic - error Building static HTML failed for path "/blog/" - reactjs

I have a website created using Gatsby v. 3.0.1 and Prismic CMS, and Github Actions for CI/CD. The build of the page on GH is triggered automatically every time content is added/edited on CMS.
Blog posts on the website are generated dynamically with gatsby-node.js createPage function:
const blog = require.resolve(
`./src/components/features/blog/post/PostDetails.tsx`
);
const result = await graphql(`
{
allPrismicBlogPost {
edges {
node {
lang
tags
data {
link {
text
}
}
}
}
}
}
`);
result?.data?.allPrismicBlogPost?.edges?.forEach(({ node }) => {
createPage({
path: `/blog/${node?.data?.link?.text}/`,
component: blog,
context: {
link: node?.data?.link?.text,
},
});
});
Couple of days ago after adding a new blog post the build failed with following error:
error Building static HTML failed for path "/blog/"
SyntaxError:Unexpected number in JSON at position 183
- JSON.parse
- render-html.js:58 readPageData
[website]/[gatsby]/dist/utils/worker/render-html.js:58:15
- render-html.js:266 async _bluebird.default.map.concurrency
[website]/[gatsby]/dist/utils/worker/render-html.js:266:24
Now every time I try to add new post the build fails, and the only way to fix this is to archive the post in Prismic. Weird thing is that this build fail doesn't happen if I edit already existing blog post, only when adding a new one.
I cannot reproduce the error locally, it only fails on Github build.
I've already looked through the blog post in order to find something that could've broken the build, like some unusual fields that weren't present in previous blog posts, reinstalled all packages, updated package-lock.json, added empty blog posts to see if this would work, looked through every file in /public folder to find some clue but nothing yet worked and the build still fails when adding new blog posts. Has anyone else had this issue and knows how to fix this?
Full stack trace:
https://pastebin.com/VbLJZk3P
My package.json:
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"-": "^0.0.1",
"#reduxjs/toolkit": "^1.5.0",
"#types/react-redux": "^7.1.16",
"#types/styled-components": "^5.1.9",
"bootstrap": "^4.6.0",
"dotenv": "^8.2.0",
"gatsby": "^3.0.1",
"gatsby-plugin-alias-imports": "^1.0.5",
"gatsby-plugin-force-trailing-slashes": "^1.0.5",
"gatsby-plugin-gatsby-cloud": "^2.0.0",
"gatsby-plugin-gdpr-cookies": "^2.0.8",
"gatsby-plugin-graphql-codegen": "^3.1.0",
"gatsby-plugin-manifest": "^3.0.0",
"gatsby-plugin-offline": "^4.0.0",
"gatsby-plugin-react-helmet": "^4.0.0",
"gatsby-plugin-react-svg": "^3.0.0",
"gatsby-plugin-robots-txt": "^1.6.10",
"gatsby-plugin-sass": "^4.1.0",
"gatsby-plugin-sharp": "^3.0.0",
"gatsby-plugin-sitemap": "^4.10.0",
"gatsby-plugin-social9-socialshare": "^1.0.5",
"gatsby-source-filesystem": "^3.0.0",
"gatsby-source-prismic": "^3.3.4",
"gatsby-transformer-sharp": "^3.0.0",
"graphql": "^15.5.0",
"graphql-cli": "3.0.14",
"graphql-request": "^3.4.0",
"prismic-reactjs": "^1.3.3",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-bootstrap": "^1.5.2",
"react-cookie-consent": "^6.2.4",
"react-dom": "^17.0.1",
"react-glider": "^2.1.1",
"react-helmet": "^6.1.0",
"react-is": "^17.0.2",
"react-media": "^2.0.0-rc.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"sass": "^1.32.8",
"styled-components": "^5.2.3",
"uuid": "^8.3.2"
},
"devDependencies": {
"#types/node": "^14.14.35",
"#types/react": "^17.0.3",
"#types/react-dom": "^17.0.2",
"#types/react-helmet": "^6.1.0",
"#types/uuid": "^8.3.4",
"eslint-config-prettier": "^8.3.0",
"prettier": "^2.2.1",
"tsconfig-paths-webpack-plugin": "^3.5.1",
"typescript": "^4.2.3"
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "npm run type-check && npm run lint",
"lint": "eslint . --ext .ts,.tsx",
"type-check": "tsc --pretty"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}

Related

React Three Drei can't resolve react-dom/client 17.0.1

three version:^0.140.2
#react-three/fiber version:^8.0.19
#react-three/drei version:^9.11.0
node version:14.18.13
npm (or yarn) version: 1.22.17 (yarn)
react version:17.0.1
react-dom version:17.0.1
Problem description:
Implementing react three drei above my NextJS app getting an error when go to the page which import react three drei, like the following:
./node_modules/#react-three/drei/web/Html.js:3:0 Module not found: Can't resolve 'react-dom/client' Import trace for requested module: ./node_modules/#react-three/drei/index.js ./components/Model3D/ThreeDModel.js ./pages/new.js
Expected:
I go to 'new' page, then I can load 3d model with .glb format from HTML input tag using useGLTF
Relevant Code:
import React from 'react'
import { useGLTF } from '#react-three/drei/core/useGLTF'
import { OrbitControls } from '#react-three/drei'
import { parseImgUrl } from 'utils/common'
const Model1 = ({ threeDUrl }) => {
const loadedGltf = useGLTF(parseImgUrl(threeDUrl), true)
return (
<>
<primitive object={loadedGltf.scene} dispose={null} />
<OrbitControls />
<ambientLight />
</>
)
}
export { Model1 }
Suggested Solution:
At this time, I think root cause of the error is that my react three drei which I used don't supported react#17.0.1. I expected that previous react three drei version support react#17.0.1 then really wonder what specified version that support react#17.0.1 or maybe the error was caused by other things. Thank you for your support, that's always my pleasure.
This is the entire dependencies within package.json
{
"name": "paras-v2-landing",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"dev": "next dev",
"dev:testnet": "PORT=8081 dotenv -e .env.testnet next dev",
"dev:mainnet": "PORT=8082 dotenv -e .env.mainnet next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"format": "prettier --write .",
"prettier-check": "prettier --check .",
"prepare": "husky install"
},
"dependencies": {
"#draft-js-plugins/anchor": "^4.1.1",
"#draft-js-plugins/buttons": "^4.0.0",
"#draft-js-plugins/divider": "^4.1.1",
"#draft-js-plugins/editor": "^4.0.0",
"#draft-js-plugins/focus": "^4.1.0",
"#draft-js-plugins/image": "^4.0.0",
"#draft-js-plugins/inline-toolbar": "^4.1.0",
"#draft-js-plugins/linkify": "^4.1.0",
"#draft-js-plugins/static-toolbar": "^4.0.0",
"#draft-js-plugins/video": "^4.1.0",
"#react-three/drei": "^9.11.0",
"#react-three/fiber": "^8.0.19",
"#sentry/nextjs": "^6.12.0",
"#tailwindcss/line-clamp": "^0.3.1",
"axios": "^0.21.0",
"blurhash": "^1.1.3",
"cachios": "^3.0.0",
"capitalize": "^2.0.4",
"cids": "^1.1.5",
"compressorjs": "^1.0.7",
"croppie": "^2.6.5",
"draft-js": "^0.11.7",
"file-type": "^16.5.3",
"generate-avatar": "^1.4.10",
"javascript-time-ago": "^2.3.2",
"js-base64": "^3.5.2",
"js-cookie": "^2.2.1",
"jsbi": "^3.1.4",
"near-api-js": "^0.42.0",
"next": "^12.1.6",
"postcss": "^8.4.12",
"query-string": "^7.0.1",
"react": "^18.1.0",
"react-awesome-animated-number": "^1.0.6",
"react-blurhash": "^0.1.3",
"react-card-flip": "^1.1.5",
"react-content-loader": "^6.0.3",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^18.1.0",
"react-fast-marquee": "^1.1.3",
"react-google-recaptcha": "^2.1.0",
"react-hamburgers": "^1.0.0",
"react-hook-form": "^6.10.0",
"react-horizontal-scrolling-menu": "^2.7.0",
"react-infinite-scroll-component": "^5.1.0",
"react-intl": "^5.9.2",
"react-linkify": "^1.0.0-alpha",
"react-responsive-carousel": "^3.2.23",
"react-share": "^4.3.1",
"react-slick": "^0.28.1",
"react-tooltip": "^4.2.17",
"recharts": "^2.1.9",
"slick-carousel": "^1.8.1",
"swr": "^1.2.2",
"three": "^0.140.2",
"three-stdlib": "^2.10.1",
"uuid": "^8.3.2",
"zustand": "^3.1.3"
},
"devDependencies": {
"#next/bundle-analyzer": "^12.1.4",
"autoprefixer": "^10.4.4",
"dotenv-cli": "^4.1.1",
"eslint": "^7.30.0",
"eslint-config-next": "^11.0.1",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^7.0.0",
"lint-staged": "^11.1.2",
"postcss-import": "^13.0.0",
"postcss-preset-env": "^6.7.0",
"prettier": "2.4.1",
"pretty-quick": "^3.1.2",
"tailwindcss": "^3.0.23"
},
"license": "GPL-3.0",
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx}": [
"eslint --fix",
"git add"
],
"*.{html,css,less,ejs}": [
"git add"
]
}
}

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

Can't run the Gatsby application in a development server.
Attempted solutions:
attempted to install polyfill-remote-file but the module doesn't even exist
update node_modules
delete node_modules and reinstall
delete package.json and create a new one
I've tried doing the above along with other potential solutions provided on the internet, but nothing has worked so far.
package.json
{
"name": "slicks-slices-frontend",
"private": true,
"description": "Slick Serves the Sweetest Slices",
"version": "0.1.0",
"license": "MIT",
"type": "module",
"scripts": {
"//": "⁉️ Hey! This might look confusing but allow me to explain. The command we want to run is called gatsby build. But because we want to use es modules with gatsby, we use a package called esm. One way to require it is to set the NODE_OPTIONS environmental variable to -r esm. Finally to make this work for windows users, we use the cross-env package. Hopefully once Node es modules are stable, we can bring this back to simple gatsby build",
"build": "cross-env NODE_OPTIONS=\"-r esm\" gatsby build",
"develop": "cross-env NODE_OPTIONS=\"-r esm\" gatsby develop",
"start": "npm run develop",
"serve": "cross-env NODE_OPTIONS=\"-r esm\" gatsby serve",
"clean": "gatsby clean",
"netlify": "netlify dev",
"prebuild": "netlify-lambda install"
},
"eslintConfig": {
"extends": [
"wesbos"
],
"rules": {
"react/prop-types": 0
}
},
"dependencies": {
"babel-plugin-styled-components": "^2.0.7",
"dotenv": "^16.0.0",
"gatsby": "^4.13.1",
"gatsby-image": "^3.11.0",
"gatsby-plugin-image": "^2.13.0",
"gatsby-plugin-react-helmet": "^5.13.0",
"gatsby-plugin-sharp": "^4.13.0",
"gatsby-plugin-styled-components": "^5.13.0",
"gatsby-plugin-utils": "^3.8.0",
"gatsby-source-sanity": "^7.4.2",
"isomorphic-fetch": "^3.0.0",
"netlify-cli": "^10.1.0",
"netlify-lambda": "^2.0.15",
"normalize.css": "^8.0.1",
"react": "^18.1.0",
"react-app-rewired": "^2.2.1",
"react-dom": "^18.1.0",
"react-helmet": "^6.1.0",
"styled-components": "^5.3.5"
},
"devDependencies": {
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.3",
"eslint": "^8.14.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-config-wesbos": "^3.0.2",
"eslint-plugin-html": "^6.2.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.5.0",
"esm": "^3.2.25",
"prettier": "^2.6.2",
"react-scripts": "^5.0.1"
},
"repository": {
"type": "git",
"url": "https://github.com/wesbos/slicks-slices"
}
}
Terminal
Command ran: npm run develop
> slicks-slices-frontend#0.1.0 develop
> cross-env NODE_OPTIONS="-r esm" gatsby develop
/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
throw ex;
^
/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/utils/start-server.js:1
Error: Cannot find module 'gatsby-plugin-utils/polyfill-remote-file'
Require stack:
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/utils/start-server.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/services/start-webpack-server.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/services/index.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/state-machines/develop/services.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/state-machines/develop/index.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/commands/develop-process.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/.cache/tmp-18549-8YbktIQ65tO1
at Object.<anonymous> (/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/src/utils/start-server.ts:56:1)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/utils/start-server.js',
'/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/services/start-webpack-server.js',
'/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/services/index.js',
'/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/state-machines/develop/services.js',
'/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/state-machines/develop/index.js',
'/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/commands/develop-process.js',
'/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/.cache/tmp-18549-8YbktIQ65tO1'
]
}
The latest Gatsby supports ESM natively.
Rename your gatsby-node.js to gatsby-node.esm.js, create a new file named gatsby-node.js and add the following
const requireEsm = require('esm')(module);
module.exports = requireEsm('./gatsby-node.esm.js');
Remove NODE_OPTIONS=\"-r esm\" from your scripts.
Take a look at the blogpost for more: https://esausilva.com/2022/05/16/cannot-find-module-gatsby-plugin-utils-polyfill-remote-file/

Unsupported platform for fsevents#2.3.2 installation issue

I've been trying to deploy my application to vercel for a while now and have been reading through lots of posts here on stackoverflow with the the same/similar fsevents issue. Despite everything I keep getting the same errors posted below.
things I've tried:
uninstall node_modules & package-lock.json, then running: npm i -f
adding "optionalDependencies": {"fsevents": "^2.3.2"}, then npm i -f
installing with no fsevents in package.json
... and many other attempts
Screen shot of what always happens in my deploys
I'm not super familiar with that what/why of the whole fsevents/chokidar packages, but it seems like it's needed for my MacOS after what I've been reading and I'd really appreciate some ideas for resolving this.
current package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint .",
"lint:fix": "eslint --fix ."
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": [
"prettier --write",
"eslint --fix ."
]
},
"dependencies": {
"firebase": "^8.2.5",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.1",
"fsevents": "^2.3.2",
"js-cookies": "^1.0.4",
"next": "10.0.6",
"next-pwa": "^5.0.5",
"nookies": "^2.5.2",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"styled-components": "^5.2.1"
},
"optionalDependencies": {
"fsevents": "^2.3.2"
},
"devDependencies": {
"#types/node": "^14.14.25",
"#types/react": "^17.0.1",
"#types/react-redux": "^7.1.16",
"#types/styled-components": "^5.1.7",
"babel-eslint": "^9.0.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-nextjs": "^1.0.7",
"eslint-config-prettier": "^4.3.0",
"eslint-plugin-html": "^5.0.5",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^1.7.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",
"prettier": "^1.19.1",
"redux-devtools-extension": "^2.13.8",
"typescript": "^4.1.3",
"webpack": "^5.21.1"
}
}
lots of people complaining about this going back years.
sometimes the fix is upgrading to newer npm. (running npm 7.7 and still had it)
often the fix is just :
npm install -f
so forcing it worked just fine here.
We had the same problem because at the team we had different os types Linux/MacOS/Windows
I manually edited the package-lock.json and added the different os types
"node_modules/fsevents": {
...
"os": [
"darwin",
"win32",
"linux"
],
...
}
after that, I ran npm install

How to make create-react-app support .mjs files with webpack?

I'm trying to work with this twitch npm package (https://www.npmjs.com/package/twitch) and am running into some issues when deploying via creat-react-app / react-scripts.
From my understanding, the webpack config that is bundled with create-react-app doesn't like .mjs files that this npm package is using. So, I get the error below when I try to build the app.
./node_modules/twitch/es/API/Kraken/Channel/ChannelApi.mjs
app_1 | Can't import the named export 'Cacheable' from non EcmaScript module (only default export is available)
If I manually deleted the "es" folder, then the build worked and everything functioned as expected. However, this isn't a real solution because when I push to production and deploy there the node modules are re-installed and the build fails once again.
Build processes aren't really my strong suit and after googling around for a while I'm unable to find a solution. If anyone can assist or can point me in the right direction, that would be much appreciated!
If it helps, here is my package.json
{
"name": "ui",
"version": "1.0.0",
"license": "UNLICENCED",
"private": true,
"dependencies": {
"#babel/core": "^7.9.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/register": "^7.0.0",
"axios": "^0.19.2",
"babel-plugin-dynamic-import-node": "^2.2.0",
"btoa": "^1.2.1",
"clipboard-copy": "^3.0.0",
"connected-react-router": "^6.8.0",
"dateformat": "^3.0.3",
"dotenv": "^8.0.0",
"draft-js": "^0.11.0",
"draft-js-export-html": "^1.4.1",
"express": "^4.16.4",
"file-loader": "^3.0.1",
"firebase": "^5.2.0",
"history": "^4.7.2",
"human-date": "^1.4.0",
"ignore-styles": "^5.0.1",
"immutability-helper": "^3.0.0",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"normalizr": "^3.2.4",
"prop-types": "^15.6.1",
"qs": "^6.5.2",
"react": "^16.8.0",
"react-animations": "^1.0.0",
"react-dnd": "^7.4.5",
"react-dnd-html5-backend": "^7.4.4",
"react-dom": "^16.8.0",
"react-ga": "^2.5.3",
"react-gtm-module": "^2.0.10",
"react-helmet": "^5.2.0",
"react-image-crop": "^8.3.0",
"react-is": "^16.8.0",
"react-loadable": "^5.5.0",
"react-loading-skeleton": "^2.0.1",
"react-on-screen": "^2.1.1",
"react-pdf": "^4.0.5",
"react-pose": "^4.0.6",
"react-redux": "^6.0.1",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"react-stripe-elements": "^2.0.0",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.2",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"semantic-ui-calendar-react": "^0.15.3",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.87.1",
"styled-components": "^4.2.0",
"twitch": "^4.2.4",
"url-loader": "^1.1.2",
"validator": "^11.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint src",
"server": "NODE_ENV=production node server/bootstrap.js"
},
"engines": {
"node": "^10.0.0",
"yarn": "^1.12.3"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-transform-runtime": "^7.4.4",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.8.1",
"eslint-plugin-react-hooks": "^3.0.0",
"prettier": "^2.0.2"
},
"proxy": "http://api:8080",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"moduleNameMapper": {
"\\.worker.js": "<rootDir>/__mocks__/workerMock.js"
}
}
}
A suggestion presented at this GitHub comment was to add react-app-rewired to your project and then use this config-overrides.js file:
module.exports = function override(config) {
config.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
});
return config;
}
In my project I was already using react-app-rewired, so I just added the rule from that snippet. This workaround fixed the error for me.
In the specific case of the twitch library, the author has suggested trying the #next release, although I haven't personally verified that solution yet.
Upgrading to the latest react-scripts version of 5.0.1 in my package.json as of writing this, has solved the issue for me.
Upgrading tolatest react-scripts version of 5.0.1 in my package.json as of writing this
use the code
npm install --save --save-exact react-scripts#5.0.1
or
yarn add --exact react-scripts#5.0.1

I can't use new feature ES 2020 in my next.js app

I wanted to use a new feature of ES 2020 in my next.js so I used optional changes in my app. When I ran my code this error has occurred
Module parse failed: Unexpected token (50:191)
You may need an appropriate loader to handle this file type.
Then I ran this command
npm install --save-dev #babel/plugin-proposal-optional-chaining
but the problem still exists.
Then I decided to update babel/core to version 7, I updated it via this command
npx babel-upgrade --write
but the loader error still there and I don't have any idea. Here is my package.json file:
{
"name": "Karan",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "SET NODE_ENV=development && SET PORT=3001 && node server.js",
"build": "next build",
"prod-build": "next build",
"start": "SET NODE_ENV=production && SET PORT=8080 && node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#ckeditor/ckeditor5-basic-styles": "^11.1.4",
"#ckeditor/ckeditor5-build-classic": "^12.4.0",
"#ckeditor/ckeditor5-font": "^11.2.2",
"#ckeditor/ckeditor5-paragraph": "^11.0.5",
"#ckeditor/ckeditor5-react": "^1.1.3",
"#fullpage/react-fullpage": "^0.1.17",
"#sentry/browser": "^4.6.6",
"#svgr/webpack": "^4.3.2",
"#zeit/next-css": "^1.0.1",
"#zeit/next-stylus": "^1.0.1",
"axios": "^0.18.1",
"express": "^4.17.1",
"global": "^4.4.0",
"jalaali-js": "^1.1.0",
"leaflet": "^1.5.1",
"moment-jalaali": "^0.8.3",
"moment-jalali": "^0.3.9",
"next": "^8.1.0",
"next-images": "^1.1.2",
"next-routes": "^1.4.2",
"npm": "^6.12.1",
"numeral": "^2.0.6",
"persianjs": "^0.4.0",
"pm2": "^3.5.1",
"prop-types": "^15.6.2",
"qs": "^6.8.0",
"react": "^16.9.0",
"react-bootstrap-star-rating": "^3.5.5-alpha.0.3",
"react-dom": "^16.9.0",
"react-leaflet": "^2.4.0",
"react-modal": "^3.9.1",
"react-paginate": "^5.2.4",
"react-persian-calendar": "^1.0.3",
"react-rating": "^2.0.4",
"react-redux": "^5.0.7",
"react-responsive": "^5.0.0",
"react-select": "^2.4.4",
"react-share": "^2.4.0",
"react-slick": "^0.23.1",
"react-star-ratings": "^2.3.0",
"react-toastify": "^4.3.0",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"stylus": "^0.54.5"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-optional-chaining": "^7.9.0",
"cross-env": "^5.2.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"poststylus": "^1.0.0"
}
}
Since i see that you are using next you need to add a .babelrc file beside your package.json and include the below content -
{
"presets": ["next/babel"],
"plugins": []
}
next/babel includes
preset-env
preset-react
preset-typescript
plugin-proposal-class-properties
plugin-proposal-object-rest-spread
plugin-transform-runtime
styled-jsx
An alternative approach would be to add something similar (including the preset/transforms you need for your application) in your package.json
,
"babel": {
"presets": [
"nano-react-app"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
],
[
"#babel/plugin-transform-react-jsx",
{
"pragmaFrag": "React.Fragment"
}
]
]
}

Resources