My Next.js app worked fine yesterday but today it has an error like this:
error - ./node_modules/#urql/core/dist/ddbb86ae.mjs:1:0
Module not found: Can't resolve 'graphql'
Import trace for requested module:
./node_modules/#urql/core/dist/urql-core.mjs
./node_modules/urql/dist/urql.es.js
./pages/_app.js
https://nextjs.org/docs/messages/module-not-found
I have no idea what happened so I git reset --hard but the problem is still there.
Please help me fix it. I appreciate it.
_app.js:
import { StateContext } from "../lib/context";
import { Provider, createClient } from "urql";
const client = createClient({ url: "http://localhost:1337/graphql" });
function MyApp({ Component, pageProps }) {
return (
<StateContext>
<Provider value={client}>
<Nav />
<Component {...pageProps} />
</Provider>
</StateContext>
);
}
export default MyApp;
I hope this solves your problem
npm install --save graphql ra-data-graphql
or
yarn add graphql ra-data-graphql
Related
When running my app with next dev -p 3001 it results in a 404 page cannot be found error.
My _app.tsx:
function MyApp({ Component, pageProps }: AppProps) {
console.log('pageProps: ', pageProps)
return (
<>
<Component {...pageProps} />
</>
)
}
export default MyApp
pageProps returns {statusCode: 400}
This is my file setup:
Turns out my getStaticProps() was returning undefined due to an undefined variable before it could return props to the page component.
Checking all getStaticProps() functions resolved this issue
Whenever I write a useEffect() inside a component function of my block plugin, the edit page goes blank and the console logs the message:
react_devtools_backend.js:4026 Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Object.it (react-dom.min.js?ver=17.0.1:9:43163)
at e.useState (react.min.js?ver=17.0.1:9:10899)
at Prompt (Prompt.js:5:35)
at N (element.min.js?ver=3dfdc75a0abf30f057df44e9a39abe5b:2:9552)
at U (element.min.js?ver=3dfdc75a0abf30f057df44e9a39abe5b:2:10502)
at N (element.min.js?ver=3dfdc75a0abf30f057df44e9a39abe5b:2:9284)
at lr (blocks.min.js?ver=658a51e7220626e26a92a46af5c2e489:3:111294)
at blocks.min.js?ver=658a51e7220626e26a92a46af5c2e489:3:137935
at xn (blocks.min.js?ver=658a51e7220626e26a92a46af5c2e489:3:138073)
at blocks.min.js?ver=658a51e7220626e26a92a46af5c2e489:3:139086
The component:
import React, { useState, useEffect } from "react";
import axios from "axios";
function Prompt(props) {
const [data, setData] = useState({ hits: [] });
useEffect(() => {
const fetchData = async () => {
const result = await axios(
"http://my-site-test.local/wp-json/wp/v2/posts?_fields[]=title"
);
setData(result.data);
};
fetchData();
}, []);
console.log(data);
return (
<>
JSX...
</>
);
}
export default Prompt;
I tried to delete node_modules and reinstall to no avail…
I believe the problem is in my-plugin/src/index.js — wp.blocks.registerBlockType's 'save' property only allows static HTML to be returned (so it can be stored in the database within the content) and I was trying to insert a React component into it.
Since I want a dynamic block on the front-end, I have to load a register_block_type in my-plugin/index.php to render my component.
EDIT You actually can add React directly in the save attribute if you have specified script when registering your block in the PHP main file (or in your block.json file.
I recently installed aws amplify using
npm install -g #aws-amplify/cli#latest
I am using the basic script verbatim from the aws-amplify site:
import { Amplify } from 'aws-amplify';
import { Authenticator } from '#aws-amplify/ui-react';
//import '#aws-amplify/ui-react/styles.css';
import '#aws-amplify/ui/dist/style.css';
import awsExports from '../../aws-exports';
Amplify.configure(awsExports);
export default function App() {
return (
<Authenticator>
{({ signOut, user }) => (
<main>
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
</main>
)}
</Authenticator>
);
}
I am receiving an error that
Module '"#aws-amplify/ui-react"' has no exported member 'Authenticator'.ts(2305)
I am using aws-amplify version 8.5. The backend is configured correctly. I am able to import "withAuthenticator". Does this mean it did not install correctly? I uninstalled and reinstalled it but still get the error. How can I import the Authenticator from the aws-amplify module?
Thanks!
It sounds like you are using v1 of #aws-amplify/ui-react. Your example command installs the latest version of the CLI, but not the #aws-amplify/ui-react package. Please try updating to the latest version of #aws-amplify/ui-react:
npm install #aws-amplify/ui-react#latest
Also, you will want to change your CSS styles import to the line you've commented out:
import '#aws-amplify/ui-react/styles.css';
See https://ui.docs.amplify.aws/getting-started/installation
Node.js follows the commonJS module system, and it require to include modules that exist in separate files and for that purpose it has methods like “require” and “ES6 import and export” are available in node.js.
So i used the require method, in my app.js file
const { withAuthenticator, AmplifySignOut } = require("#aws-amplify/ui-react");
too in my index.js file i used the own import method for the Amplify function!
import { Amplify } from 'aws-amplify'; or just we can too use the require method
// const { Amplify } = require("aws-amplify");
Thanks aws.
Next Js css is loading only at home page not in other page if I go the url directly .
when I go to homepage css loads
https://www.kachuwa.com
It also load if it push through router:
router.push({
pathname: '/shop/nosidebar/list',
query: {
searchTerm: 'shoes',
},
});
but going to url directly it won't load the css:
https://www.kachuwa.com/shop/nosidebar/list/?searchTerm=shoes
what can be the issue
Create _app.js on your root folder
Import your CSS inside _app.js like this
import "../styles/globals.css";
Copy this code into _app.js
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp;
Check these links below to understand better:
what is _app.js
How to use css on _app.js
I'm trying to create an App that uses Amplify and AppSync with Next.js.
I was able to deploy the application successfully but when I'm trying to access the application (trying to fetch data from AppSync) It is failing.
I'm kinda lost what needs to be looked at, the application seems to be working fine locally but when I'm publishing it on AWS it is failing.
I'm getting error: TypeError: Cannot read property 'getName' of undefined
//quotes.js
import { Connect } from 'aws-amplify-react';
........
<Connect
query={graphqlOperation(queries.getName)}
subscription={graphqlOperation(subscriptions.onCreateName)}
onSubscriptionMsg={(prev, { onCreateName }) => ({
...prev,
getName: {
...prev.getName,
items: [
...prev.getName.items,
onCreateName,
],
},
})}
>
Has anybody come across such an issue or any idea to resolve the issue? Thanks in advance.
Running the subscription when doing SSR is not needed / useful and requires a WebSocket client in the server, you can try Dynamic Imports with no SSR to have the subscription only happen on the client. (using { ssr: false })
import dynamic from 'next/dynamic';
const DynamicComponentWithNoSSR = dynamic(() => import('../components/hello3'), { ssr: false });
function Home() {
return (
<div>
<Header />
<DynamicComponentWithNoSSR />
<p>HOME PAGE is here!</p>
</div>
);
}
export default Home;