I'm looking to get Chakra UI set up (latest V1) with a simple Next.js app. Having followed the 'getting started' steps at https://chakra-ui.com/docs/getting-started I'm running into the following error when running dev server:
error - ./node_modules/#chakra-ui/portal/dist/esm/portal.js
Attempted import error: 'useCallbackRef' is not exported from '#chakra-ui/hooks'.
Here's my _app.js file:
import { ChakraProvider } from "#chakra-ui/react";
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp
package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#chakra-ui/react": "^1.1.3",
"#emotion/react": "^11.1.4",
"#emotion/styled": "^11.0.0",
"framer-motion": "^3.2.0",
"next": "10.0.5",
"react": "17.0.1",
"react-dom": "17.0.1"
}
}
I've had a rummage through the prescribed portal.js node module, but there doesn't look to be anything untoward.
Any help would be greatly appreciated, thanks for your time in advance.
Set version to #chakra-ui/react": "1.1.2",
It's a bug and they are working on a fix: https://github.com/chakra-ui/chakra-ui/issues/3006
For now just revert to a lower version until the fix is through.
Same problem here, get a older chakra-ui version.
For example: "#chakra-ui/react": "1.0.4"
Related
I am refactoring an application from Nuxt2 to Nuxt3 and I use PanZoom for panning and zooming a specific div.
My package.json looks like below
{ "private": true, "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" }, "devDependencies": { "nuxt": "^3.0.0" }, "dependencies": { "vue-panzoom": "^1.1.6" } }
as proposed, I use the plugin folder to declare my panzoom plugin like
import panZoom from 'vue-panzoom' export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(panZoom) })
I do not declare the plugin in the nuxt.config.ts file as Nuxt 3 auto-configures plugins.
then I try to test the installation with a snippet like
<panZoom> <img src="https://picsum.photos/300"> </panZoom>
This does not work. The console.log shows
Cannot create panzoom for the current type of dom element
this shows that Nuxt foundn the panzoom plugin, but cannot use it for a reason unknown to me.
Can anybody help me on this.
Thanks i advance
see details of problem
Is there anyone else who faced the issues just like me? I try to make a GET request to my API endpoint it keeps on returning 404 when the application is deployed on Vercel - it works perfectly fine on locally.
Even it is a simple api that are provided by the Next.JS by default.
default api location: pages/api/hello
export default async function handler(req, res) {
res.status(200).json({
name: 'John Doe',
})
}
My package.json
{
"name": "my-next-js-sample"
"version": "0.1.1",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"axios": "^1.1.3",
"cheerio": "^1.0.0-rc.12",
"dayjs": "^1.11.6",
"firebase": "^9.13.0",
"next": "13.0.0",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"eslint": "8.26.0",
"eslint-config-next": "13.0.0"
}
}
This is how I'd structured my folders.
This is how'd called the api routes.
http://localhost:3000/api/hello
http://localhost:3000/api/v2/live
Perfectly can call any api routes just like this example in local development.
Vercel Project Settings
After I'd created a new vercel account and deployed this project into that new one, then the problem has solved without knowing the actual issues.
For anyone crossing with this problem, this issue might be your guy
In a nutshell: Standalone configuration is not yet supported.
I try to build my astro application. I have one component using svelte and rxFire, but when i try to build id, i receive this error. Try the suggestion bring me to another error like "default member is not exported". It can be a bug from firebase v9 and the compilation from Vite, but how to fix it ?
Package.json
{
"name": "#example/basics",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"#astrojs/svelte": "^1.0.0",
"astro": "^1.2.1",
"firebase": "^9.9.4",
"rxfire": "^6.0.3",
"rxjs": "^7.5.6",
"svelte": "^3.50.1"
}
}
Component:
<script>
import { collection, query } from "firebase/firestore";
import { firestore } from "../../firebase";
import { collectionData } from "rxfire/firestore";
import { startWith, tap } from "rxjs/operators";
import OpportunityCard from "./OpportunityCard.svelte";
const opportunitiesQuery = query(collection(firestore, "opportunities"));
const opportunities = collectionData(opportunitiesQuery, {idField: "id"}).pipe(
tap(x => console.log(x)),
startWith([])
);
</script>
Error during build:
Apply the suggestion:
Something is rather odd here.
In the first case it is supposed to use the ES module file but uses the CommonJS file. In the second case it is supposed to use the CommonJS file, but it uses the ES module file.
You could try to explicitly specify the ES module file:
import { collectionData } from 'rxfire/firestore/index.esm.js';
// Or
import { collectionData } from 'rxfire/firestore/index.esm';
I've been trying to deploy my NextJS onto Vercel, but keep getting the following error:
19:07:34.256
> Build error occurred
19:07:34.257
Error: Failed to load config "next/babel" to extend from.
19:07:34.258
Referenced from: /vercel/path0/.eslintrc
19:07:34.258
type: 'Error',
19:07:34.258
messageTemplate: 'extend-config-missing',
19:07:34.258
messageData: { configName: 'next/babel', importerName: '/vercel/path0/.eslintrc' }
19:07:34.258
}
19:07:34.277
Error: Command "npm run build" exited with 1
Below is my .babelrc file:
{
"presets": ["next/babel"],
"plugins": []
}
My .eslintrc file:
{
"extends": ["next/babel"]
}
And my package-json file:
{
"name": "google-docs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#material-tailwind/react": "0.3.4",
"#next-auth/firebase-adapter": "^0.1.2",
"draft-js": "^0.11.7",
"firebase": "^8.9.1",
"next": "11.0.1",
"next-auth": "^3.27.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "^1.14.7",
"react-firebase-hooks": "^3.0.4"
},
"devDependencies": {
"autoprefixer": "^10.3.1",
"eslint": "7.32.0",
"eslint-config-next": "11.0.1",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.7"
}
}
Also, building the project locally is also not working because of the same error. How do I solve this issue? Thank you in advance.
For those who are wondering, the solution that I used is first to remove the "next/babel" from the extends array, as julio has suggested.
Then, I install babel-eslint:
npm i babel-eslint --save-dev
I then changed the entire .eslintrc file to this:
{
"parser": "babel-eslint"
}
And the build was successful! Credit goes julio and the answers from this thread:
Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint)
I get this error when running the code from the Next JS starter walkthrough:
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1174:13)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.remark (C:\*******\***********\.next\server\pages\index.js:3249:18)
at __webpack_require__ (C:\*******\***********\.next\server\webpack-runtime.js:25:42)
at Object../lib/posts.js (C:\*******\***********\.next\server\pages\index.js:132:64)
at __webpack_require__ (C:\*******\***********\.next\server\webpack-runtime.js:25:42)
at Object../pages/index.js (C:\*******\***********\.next\server\pages\index.js:2933:68) {
code: 'ERR_REQUIRE_ESM'
}
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\**********\********\node_modules\remark\index.js
require() of ES modules is not supported.
require() of C:\*******\***********\node_modules\remark\index.js from C:\*******\***********\.next\server\pages\index.js is an ES module file as
it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename C:\***********\********\node_modules\remark\index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\*******\***********\node_modules\remark\package.json.
Here is the file focused on in that part of the tutorial ([id].js):
import { getAllPostIds, getPostData } from '../../lib/posts'
export async function getStaticProps({ params }) {
const postData = await getPostData(params.id)
return {
props: {
postData
}
}
}
export async function getStaticPaths() {
const paths = getAllPostIds()
return {
paths,
fallback: false
}
}
export default function Post({ postData }) {
return (
<html>
{postData.title}
<br />
{postData.id}
<br />
{postData.date}
<br />
<div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
</html>
)
}
And this is the package.json file:
{
"name": "abhayrajio",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"fs": "0.0.1-security",
"gray-matter": "^4.0.3",
"next": "11.0.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"remark": "^14.0.1",
"remark-html": "^13.0.1"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.0.1"
}
}
I'm new to this and am just trying to understand how the code works. What is going wrong and what should I do to correct it?
This is the walkthrough link: https://nextjs.org/learn/basics/create-nextjs-app
You can use the previous version of remark and remark-html
"remark": "^13.0.0",
"remark-html": "^13.0.1"
I believe the transpiled code is trying to require() remark which is released as a ES Module which is not entirely supported by Next's webpack config.
It appears to be the same issue raised here https://github.com/vercel/next.js/issues/23725
They recently released a fix on their canary branch, you can try it on your project with npm install next#canary
import { remark } from "remark";