Sidebar.js
SidebarLink.js
package.json
{
"name": "twitter-clone",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#heroicons/react": "^1.0.5",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#mui/icons-material": "^5.2.5",
"#mui/material": "^5.2.7",
"next": "12.0.7",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"autoprefixer": "^10.4.2",
"eslint": "8.6.0",
"eslint-config-next": "12.0.7",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.12"
}
}
I am unable to find where I have mistaken, not a single icon is showing in output.
Related
Have not been able to get close to understanding the underlying cause of this issue, but I am trying to implement Clerk Authentication using NextJS 12.2.2 and I have everything working in the dev environment. However when I move into the production environment, my site instantly crashes on load due to the following error:
ReferenceError: __import_unsupported is not defined
at (vc/edge/function:14:2050)
at (vc/edge/function:14:656)
at (vc/edge/function:14:3107)
at (vc/edge/function:14:656)
at (vc/edge/function:67:13871)
at (vc/edge/function:14:656)
at (vc/edge/function:67:15731)
at (vc/edge/function:14:656)
at (vc/edge/function:67:27265)
at (vc/edge/function:14:656)
ReferenceError: __import_unsupported is not defined
at (external root " __import_unsupported('buffer')":1:0)
at (webpack/bootstrap:21:0)
at (node_modules/rfc4648/lib/index.mjs:11:15)
at (webpack/bootstrap:21:0)
at (node_modules/#clerk/nextjs/dist/server/clerk.js:5:18)
at (webpack/bootstrap:21:0)
at (node_modules/#clerk/nextjs/dist/server/index.js:4:21)
at (webpack/bootstrap:21:0)
at (node_modules/#clerk/nextjs/server.js:1:0)
at (webpack/bootstrap:21:0)
My Clerk middleware.js file:
import { withClerkMiddleware } from "#clerk/nextjs/server";
import { NextResponse } from "next/server";
export default withClerkMiddleware((req) => {
return NextResponse.next();
});
My package.json
{
"name": "generic_auth",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "cross-env next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"postinstall": "prisma generate"
},
"dependencies": {
"#clerk/nextjs": "^4.8.2",
"#clerk/themes": "^1.2.41",
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#next-auth/prisma-adapter": "^0.5.2-next.19",
"#prisma/client": "^3.11.1",
"#react-google-maps/api": "^2.7.0",
"#stripe/stripe-js": "^1.26.0",
"#vercel/analytics": "^0.1.7",
"aws-sdk": "^2.1105.0",
"cross-env": "^7.0.3",
"fs": "^0.0.1-security",
"global": "^4.4.0",
"graphql": "^16.3.0",
"image-size": "^1.0.1",
"material-ui-icons": "^1.0.0-beta.36",
"micro": "^9.3.4",
"moment": "^2.29.2",
"next": "12.2.2",
"next-auth": "^4.10.3",
"next-stripe": "^1.0.0-beta.1",
"nodemailer": "^6.7.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-places-autocomplete": "^7.3.0",
"react-query": "^3.34.19",
"sass": "^1.49.9",
"sharp": "^0.30.3",
"stripe": "^8.215.0",
"underscore": "^1.13.6",
"vercel": "^24.0.1"
},
"devDependencies": {
"#types/node": "17.0.23",
"#types/react": "17.0.43",
"#types/react-dom": "17.0.14",
"eslint": "8.12.0",
"eslint-config-next": "12.1.2",
"prisma": "^3.11.1",
"typescript": "4.6.3"
}
}
Anyone have any idea on this? Happy to provide any other info required to debug this but dont want to overload the original post with too much info. Thanks!
Updating from Next 12.2.2 -> 12.2.6 resolved this issue for me. Seems that there is a problem with Middleware in 12.2.2 that has since been resolved.
To be clear, along with updating Next, I also updated react and react-dom, as well as removed unused Next-Auth packages from my previous Auth implementation. Update package.json is as follows:
{
"name": "generic_auth",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "cross-env next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"postinstall": "prisma generate"
},
"dependencies": {
"#clerk/nextjs": "^4.8.2",
"#clerk/themes": "^1.2.41",
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#prisma/client": "^3.11.1",
"#react-google-maps/api": "^2.7.0",
"#stripe/stripe-js": "^1.26.0",
"#vercel/analytics": "^0.1.7",
"aws-sdk": "^2.1105.0",
"cross-env": "^7.0.3",
"fs": "^0.0.1-security",
"global": "^4.4.0",
"graphql": "^16.3.0",
"image-size": "^1.0.1",
"material-ui-icons": "^1.0.0-beta.36",
"micro": "^9.3.4",
"moment": "^2.29.2",
"next": "12.2.6",
"next-stripe": "^1.0.0-beta.1",
"nodemailer": "^6.7.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-places-autocomplete": "^7.3.0",
"react-query": "^3.34.19",
"sass": "^1.49.9",
"sharp": "^0.30.3",
"stripe": "^8.215.0",
"underscore": "^1.13.6",
"vercel": "^24.0.1"
},
"devDependencies": {
"#types/node": "17.0.23",
"#types/react": "17.0.43",
"#types/react-dom": "17.0.14",
"eslint": "8.12.0",
"eslint-config-next": "12.1.2",
"prisma": "^3.11.1",
"typescript": "4.6.3"
}
}
For anyone looking into an Auth choice, seriously take a look at Clerk! I was able to chat with one of their devs over live chat on their site for the past hour to debug this, and they were extremely helpful. On top of that, Clerk has easily been one of the easiest experiences I have had and has taken a lot of the stress of Auth out of the picture for me, allowing me to focus on implementing my site.
My site is not mobile friendly when testing with Google Mobile friendly. But actually when accessing it, it is mobile friendly.
What should I do to fix it? I am using Next.js.
Result when I test: https://search.google.com/test/mobile-friendly/result?id=zwleJJ0VXRiIwFagHtBHuA
My package.json:
{
"name": "tintuc",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 8080",
"build": "next build",
"start": "next start -p 8080",
"sitemap": "next-sitemap",
"analyze": "cross-env ANALYZE=true next build",
"analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
"analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build",
"find:unused": "next-unused",
"depcheck": "npx depcheck"
},
"dependencies": {
"#apollo/client": "^3.3.19",
"#headlessui/react": "^1.4.1",
"#heroicons/react": "^1.0.4",
"date-fns": "^2.25.0",
"deepmerge": "^4.2.2",
"graphql": "^15.5.0",
"highlight.js": "^11.6.0",
"html-react-parser": "^3.0.4",
"lodash": "^4.17.21",
"next": "^12.2.5",
"next-seo": "^4.28.1",
"node-html-parser": "^5.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-loading-skeleton": "^2.2.0",
"replace-special-characters": "^1.2.6"
},
"devDependencies": {
"#next/bundle-analyzer": "^11.1.4",
"#types/node": "^18.11.0",
"#types/react": "^18.0.21",
"autoprefixer": "^10.3.6",
"next-pwa": "^5.6.0",
"next-sitemap": "^3.1.29",
"next-unused": "^0.0.6",
"postcss": "^8.3.8",
"tailwindcss": "^2.2.16"
}
}
I'm trying to create a component class with a Turbopack TSX project:
import React from 'react';
import baseResolution from '#/lib/baseResolution';
export default class GameContainer
extends React.Component<{}, {resizeListener: Function | null}>
{
// ...
}
So far, I've not modified anything in package.json. When I run npm run dev and access the web page, I get:
TypeError: Class extends value undefined is not a constructor or null
at (/app/GameContainer.tsx:5:18)
at Module.[project-with-next]/app/GameContainer.tsx (ecmascript, rsc) (.next\server\app\chunks\rsc\app_layout.tsx.js:165:3)
at (.next\server\app\chunks\ssr_6c0b57.js:67894:21)
...
What am I missing? Here's the package.json:
{
"private": true,
"scripts": {
"dev": "next dev --turbo",
"dev:tailwind": "concurrently \"next dev --turbo\" \"npm run tailwind -- --watch\"",
"build": "next build",
"start": "next start",
"lint": "next lint",
"tailwind": "tailwindcss -i styles/globals.css -o styles/dist.css",
"format": "prettier --write \"**/*.{js,ts,tsx,md}\"",
"postinstall": "npm run tailwind"
},
"prettier": {
"arrowParens": "always",
"semi": true,
"trailingComma": "all",
"singleQuote": true
},
"dependencies": {
"clsx": "1.2.1",
"concurrently": "7.5.0",
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0",
"styled-components": "6.0.0-beta.2",
"styled-jsx": "5.1.0",
"use-count-up": "3.0.1"
},
"devDependencies": {
"#types/node": "18.0.3",
"#types/react": "18.0.15",
"#types/react-dom": "18.0.6",
"autoprefixer": "^10.4.7",
"eslint": "8.19.0",
"eslint-config-next": "latest",
"postcss": "^8.4.14",
"prettier": "^2.7.1",
"prettier-plugin-tailwindcss": "^0.1.12",
"tailwindcss": "^3.1.6",
"typescript": "4.7.4"
}
}
Did upgrade the nextjs version 12 to #latest, post that facing the error, while running dev server:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './cjs/react.development' is not defined by "exports" in /home/oem/Desktop/cld-frontend/cld-frontend/node_modules/react/package.json
at new NodeError (node:internal/errors:371:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:453:9)
at packageExportsResolve (node:internal/modules/esm/resolve:729:3)
at resolveExports (node:internal/modules/cjs/loader:482:36)
at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
at Function.mod._resolveFilename (/home/oem/Desktop/cld-frontend/cld-frontend/node_modules/next/dist/build/webpack/require-hook.js:23:32)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED',
page: '/colleges/[collegeUriSlug]'
}
old dependencies:
{
"name": "cld-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"classnames": "^2.3.1",
"dayjs": "^1.11.5",
"i": "^0.3.7",
"mongodb": "^4.10.0",
"next": "^12.1.0",
"npm": "^8.12.2",
"react": "17.0.2",
"react-device-detect": "^2.2.2",
"react-dom": "17.0.2",
"react-horizontal-scrolling-menu": "^2.7.1",
"react-multi-carousel": "^2.8.0",
"react-select": "^5.4.0",
"sharp": "^0.30.5"
},
"devDependencies": {
"#svgr/webpack": "^6.2.1",
"eslint": "8.9.0",
"eslint-config-next": "12.1.0"
}
}
new dependencies after upgrading:
{
"name": "cld-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"classnames": "^2.3.1",
"dayjs": "^1.11.5",
"i": "^0.3.7",
"mongodb": "^4.10.0",
"next": "^13.0.5",
"npm": "^8.12.2",
"react": "18.2.0",
"react-device-detect": "^2.2.2",
"react-dom": "18.2.0",
"react-horizontal-scrolling-menu": "^2.7.1",
"react-multi-carousel": "^2.8.0",
"react-select": "^5.4.0",
"sharp": "^0.30.5"
},
"devDependencies": {
"#svgr/webpack": "^6.2.1",
"eslint": "8.9.0",
"eslint-config-next": "13.0.5"
}
}
did try some of the methods, available on internet:
yarn upgrade
deleting node_modules and package.lock.json and reinstalling dependencies
npm update and npm audit fix --force
all these methods didn't worked for me,s till facing the issue, unable to access the website.
When I start the development server I only got 404 Page and the same for all the page, Knowing that the project was working.
I tried:
to remove the .next
to remove the node_modules and reinstalled
Update "react" and "react/dom"
Modifies the "next.config.js" to add Page
pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js"],
But without any results.
This package.json
{
"name": "test",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest --watch",
"format": "prettier . --write --ignore-unknown"
},
"dependencies": {
"#ant-design/icons": "^4.7.0",
"#contentful/rich-text-react-renderer": "^15.11.1",
"#contentful/rich-text-types": "^15.11.1",
"#sendgrid/mail": "^7.6.0",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.2",
"antd": "^4.18.3",
"aws-amplify": "^4.3.14",
"contentful": "^9.1.5",
"date-fns": "^2.28.0",
"formik": "^2.2.9",
"jest": "^27.5.0",
"next": "12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-markdown": "^8.0.0",
"react-test-renderer": "^17.0.2",
"sass": "^1.49.0",
"swiper": "^8.0.0",
"yup": "^0.32.11"
},
"devDependencies": {
"#faker-js/faker": "^6.0.0-alpha.6",
"#testing-library/dom": "^8.11.3",
"#testing-library/user-event": "^13.5.0",
"eslint": "^8.11.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-next": "12.0.8",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.3.0",
"lint-staged": "^12.1.7",
"prettier": "2.5.1"
},
"lint-staged": {
"**/*": "prettier --write --ignore-unknown",
"#faker-js/faker": "^6.0.0-alpha.6",
"#testing-library/dom": "^8.11.3",
"#testing-library/user-event": "^13.5.0",
"eslint": "8.6.0",
"eslint-config-next": "12.0.8"
}
}