Posted By: Anonymous I’m running Vercel compilation on my website and I can’t get rid of the pre-rendering error on export. does anyone know the reason for this to happen and can help me with this? my github with all code: https://github.com/M0rilla/MyProfile for each page have a error as above: Error occurred prerendering page "/resume". …
Posted By: Anonymous I would like to put style on the "Forms_formline__3DRaL" div (seen below) This div comes from a component; and it seems like this style is applied to the input , and not its parent div. How can I, though reactjs, define the style "display: none" for the parent div? Here is my …
Posted By: Anonymous Here is my component code (it is called on a page with <DetectPitch />); import { useEffect, useState } from ‘react’; export default function DetectPitch() { const [detect, setDetect] = useState(false); useEffect(() => { document.getElementById("mute-button").addEventListener("click", () => setDetect(detect => !detect)) }, []); useEffect(() => { function update(random) { if (detect != false) …
Posted By: Anonymous I am trying to use Archilogic embed module to show 3d floorplan in my next.js project. I am trying below code and it says : TypeError: ArchilogicEmbed is not a constructor import React, { useEffect } from "react"; import dynamic from "next/dynamic"; //import ArchilogicEmbed from "@archilogic/embed-api"; const Archilogic = () => import("@archilogic/embed-api"); …
Posted By: Anonymous After installing bootstrap with npm install bootstrap I added the style to /pages/_app.js like so: import ‘bootstrap/dist/css/bootstrap.css’; export default function App({ Component, pageProps }) { return <Component {…pageProps} /> } However anything from it that uses javascript does not work at all, e.g. the Collapse example from their docs. function App() { …
Posted By: Anonymous If I generate production js bundle in my next.js project, it’s not minified. For example white characters are not removed. package.json { "name": "web", "version": "0.1.0", "private": true, "scripts": { "web": "cross-env NODE_ENV=development node server.js", "dev": "next", "devServer": "node server.js", "build": "next build", "start": "next start" }, "dependencies": { "@zeit/next-css": "^1.0.1", "apollo-boost": …
Posted By: Anonymous I have multiple variants in my one component, and I want that if I click on any variant it should add active class to it and removes active class from another. But I am stuck how it can happen using state in multiple variants loop. Here is my code: import { useState …
Posted By: Anonymous I’m implementing the Next.js Image component in my Headless project. The CMS that I’m using is WordPress. And since the image is coming from an external website, I need to specify the domain on next.config.js, as the documentation specifies: https://nextjs.org/docs/basic-features/image-optimization const nextConfig = { image: { domains: [‘https://example.com’], }, } But in …
Posted By: Anonymous I’m only using the next/image from Next.js. Is there a way to only install next/image module and not the entire Next.js module. I tried doing the following – "next/image": "^10.0.5", "next/link": "^10.0.5", But after doing npm install I’m getting the following error – $ npm install npm ERR! code EINVALIDPACKAGENAME npm ERR! …
Posted By: Anonymous hey guys, I know this question is already been asked but I did not get an appropriate answer. I got this error on using next/link . whenever I replace the anchor tag with the "Link" tag I got this error.I will be very thankful if somebody can help code import {APP_NAME} from …
Posted By: Anonymous I am working with a React component that uses different opacity values according to whether there is support for the CSS backdrop-filter directive: background={(() => { const opacity = isBackdropFilterSupported() ? 0.75 : 0.98 return ( `linear-gradient( 180deg, rgba(76, 63, 143, ${opacity}) 62.76%, rgba(184, 169, 255, ${opacity}) 100% )` ) })()} The …
Posted By: Anonymous I am using nextjs on vscode. I use npm run dev to start my server in localhost:3000 and then use ^Z to suspend npm run dev. I then use npm run dev to start my server again but get the following error Port 3000 is already in use. npm ERR! code 1 …
Posted By: Anonymous in my previous project i used this syntax for migration to mongoDB: my_migration.js // ‘use strict’; import slug from ‘slugify’; module.exports = { async up(db) { const categories = [ { title: ‘football’, slug: slug(‘football’), createdAt: new Date().getTime(), updatedAt: new Date().getTime() }, ]; await db.collection(‘categories’).insertMany(categories); } }; And it works, but an …
Posted By: Anonymous I have an application in nextjs. There i built the next route: _x000D_ _x000D_ <Link href=”colors/[type]” as={`colors/${type}`} > <a>click</a> </Link> _x000D_ _x000D_ _x000D_ This route redirect me on /colors/red, or colors/blue and so on, depending by the user. type here is a varible = dynamic element. Also i have other link: _x000D_ …
Posted By: Anonymous I think this more of a general async/await loop question, but I’m trying to do it within the bounds of an Airtable API request and within getStaticProps of Next.js so I thought that is important to share. What I want to do is create an array of base IDs like ["appBaseId01", "appBaseId02", …
Posted By: Anonymous All is in the title. I’m working in NextJS. When I make a change in the organization of my project’s file, a strange message “.cache/typescript/2.9/node_modules/@types/react’” appears on my imports, specifically my Reactjs’s imports. I have tried to retrace the problem by Googling but I have found nothing helpful. Does anyone know what …
Posted By: Anonymous I have an issue to pass props from the parent component into my children components, ok let see the code below import { useState } from "react"; import { createGlobalStyle } from "styled-components"; import Footer from "./Footer"; import Nav from "./Nav"; const GlobalStyle: any = createGlobalStyle` body { box-sizing: border-box; padding: 0; …
Posted By: Anonymous I want to add withPWA and withTypescript together, but i don’t know how to config them… this is my next.config.json code : const withPWA = require("next-pwa"); module.exports = withPWA({ pwa: { dest: "public", }, }); and const withTypescript = require(‘@zeit/next-typescript’); module.exports = withTypescript(); these configs only work alone…how can i make them …
Posted By: Anonymous I need to create a dynamic router for the sitemaps. They are located on the urls example.com/sitemap-0.xml example.com/sitemap-1.xml I tried to create a page [sitemap].xml.js But it didn’t work. How to create a dynamic router for multiple sitemaps? Solution Short answer. You can’t. You have to put your sitemaps into the public …
Posted By: Anonymous I update my packages to latest version. in before there was no error in my project. but after update next js to version 9 and jquery to version 3.5, $.map does not work properly. when i use $.map in render() method of class component, import $ from “jquery”; . . . render() …
Posted By: Anonymous I am having issues while describing the types of my props. I am getting an error on the following lines of code: <PostButton handleClick={props.upvote}/> <PostButton2 handleClick={props.downvote}/> The error is: Property ‘label’ is missing in type ‘{ handleClick: () => void; }’ but required in type ‘{ handleClick: () => void; label: string; …
Posted By: Anonymous I am trying to build a dynamic page with using WordPress as the data source. I am not getting getStaticProps and getStaticPaths correct and it is causing errors Error: The provided path `/` does not match the page: `/[slug]`. I have hard coded the page name now for testing purposes (ideally I …
Posted By: Anonymous I have simple nextjs app where i want to save and print state to fetchData This is my code const Room = () => { const router = useRouter(); const [fetchData, setFetchData] = useState(""); useEffect(() => { if (router.asPath !== router.route) { getDataNames(); console.log(fetchData); // Empty } }, [router]); const getDataNames = …
Posted By: Anonymous I’m trying to migrate to immutable.js for my states: class Register extends Component<{}, Map<string, string>> { state = Map<string, string>(); onInputValueChange(e) { const { name, value } = e.target; const newState = this.state.set(name, value); this.setState(newState); } render() { … <input onChange={this.onInputValueChange.bind(this)} placeholder=”[email protected]” name=”email” type=”email” /> } } So, whenever I type something …
Posted By: Anonymous I’m trying to call my action via props in Next.js, but it keeps exceeding maximum depth and I couldn’t understand why. UNSAFE_componentWillReceiveProps(nextProps) { let rate_updated = […this.props.previousArray];//copying store value to local variable for (let i = 0; i < this.props.crypto_head_coins.length; i++) { //my code here } this.props.update_rate_array(rate_updated) // calling action to set …
Posted By: Anonymous Docs says: The width of the image, in pixels. Must be an integer without a unit. The height of the image, in pixels. Must be an integer without a unit. https://nextjs.org/docs/api-reference/next/image Different devices can have different size. Devices can be desktop or mobile. It is a bit tedious to send the actual …
Posted By: Anonymous How do I pass children to this class? export default class MyLayout extends App { state = { somestate: false, anotherstate: true, }; togglestate = (somestate) => { this.setState({ somestate }); }; render() { const { Component, pageProps } = this.props; return ( <div> //INSERT CHILDREN HERE <Component {…pageProps} /> </div> ); …
Posted By: Anonymous I’m trying to import a functions from a dependency to my next/react functional component, but somehow I keep getting the following error: SyntaxError: Unexpected token ‘export’ That’s the function I’m trying to import: export function classes(…args) { const list = []; for (let i = 0; i < args.length; i++) { const …
Posted By: Anonymous I am using Next JS with Apollo and I hve the following query that works just fine, but when I navigate away from the page to another page and back the query doesn’t run my fields are empty and I have to hit refresh to populate them. Does anyone know why this …
Posted By: Anonymous So I want to use wordpress as CMS to manage the content and React to develop a website for a client. I know that using Graphql with Gatsby or Next.js its possible to fetch de CMS content and generate static pages for every item and when the user go to the website …
