Unlock seamless workflows and faster delivery with our latest releases- get the details

Issue with webpack and syntax error in Next.js project

27 replies
Last updated: Aug 18, 2022
Hello guys, trying to set up server locally did few changes but now when I am starting my localhost I've got this kind of error when deploying. webpack issues.. anyone know why its doing it ? Please help.. or I am giving up on sanity
ready - started server on 0.0.0.0:3000, url: <http://localhost:3000>
info - Loaded env from C:\Users\User\sanity-ytb-demo\.env.local
info - Using experimental wasm build of next-swc
warn - Attempted to load @next/swc-win32-x64-gnu, but it was not installed
warn - Attempted to load @next/swc-win32-x64-msvc, but an error occurred: The specified module could not be found.
\\?\C:\Users\User\sanity-ytb-demo\node_modules\@next\swc-win32-x64-msvc\next-swc.win32-x64-msvc.node
event - compiled client and server successfully in 1882 ms (178 modules)
wait - compiling...
event - compiled client and server successfully in 536 ms (178 modules)
wait - compiling / (client and server)...
event - compiled client and server successfully in 772 ms (229 modules)
wait - compiling /_error (client and server)...
event - compiled client and server successfully in 456 ms (230 modules)
error - SyntaxError: Invalid left-hand side expression in postfix operation
at Object../sanity.js (C
:\Users\User\sanity-ytb-demo\.next\server\pages\index.js:275:1) at __webpack_require__ (C
:\Users\User\sanity-ytb-demo\.next\server\webpack-runtime.js:33:42) at eval (webpack-internal
:///./pages/index.tsx:11:65) at Object../pages/index.tsx (C
:\Users\User\sanity-ytb-demo\.next\server\pages\index.js:264:1) at __webpack_require__ (C
:\Users\User\sanity-ytb-demo\.next\server\webpack-runtime.js:33:42) at __webpack_exec__ (C
:\Users\User\sanity-ytb-demo\.next\server\pages\index.js:614:39) at C
:\Users\User\sanity-ytb-demo\.next\server\pages\index.js:615:28 at Object.&lt;anonymous&gt; (C
:\Users\User\sanity-ytb-demo\.next\server\pages\index.js:618:3) at Module._compile (node
:internal/modules/cjs/loader:1105:14) at Object.Module._extensions..js (node
:internal/modules/cjs/loader:1159:10) { page: '/'
}
Aug 18, 2022, 10:25 AM
What error?
Aug 18, 2022, 10:25 AM
error - SyntaxError: Invalid left-hand side expression in postfix operation
Aug 18, 2022, 10:26 AM
You’re doing something wrong somewhere in your code. 🙂 Probably here:
/pages/index.tsx:11:65
Aug 18, 2022, 10:26 AM
there is no error in index.tsx per visual code 😕
Aug 18, 2022, 10:30 AM
but query is somehow not cooperating...
Aug 18, 2022, 10:30 AM
when I delete const and stuff its working..
Aug 18, 2022, 10:31 AM
You’ll need to share some code for us to help. 🙂
Aug 18, 2022, 10:31 AM
ok I will show
Aug 18, 2022, 10:46 AM
import Head from 'next/head'
import Header from '../components/Header'
import { SanityClient, urlFor} from "../sanity";
import { Post } from '../typings';

interface Props {
posts: [Post]
}

export default function Home( {posts }: Props) {
console.log(posts);
return (
&lt;div className="max-w-7xl mx-auto"&gt;
&lt;Head&gt;
&lt;title&gt;Medium Blog&lt;/title&gt;
&lt;link rel="icon" href="/favicon.ico" /&gt;
&lt;/Head&gt;
&lt;Header /&gt;
&lt;div className="flex justify-between items-center bg-yellow-400 border-y border-black py-10 lg:py-0"&gt;
&lt;div className='px-10 space-y-5'&gt;
&lt;h1 className="text-6xl max-w-xl font-serif"&gt;
&lt;span className="underline decoration-black decor"&gt;Medium&lt;/span&gt; is a place to write, read and connect.&lt;/h1&gt;
&lt;h2&gt;
It's easy and free to post your thnking on any topic and connect
with millions of readers.
&lt;/h2&gt;
&lt;/div&gt;
&lt;img
className="hidden md:inline-flex h-32 lg:h-full"
src="
https://accountabilitylab.org/wp-content/uploads/2020/03/Medium-logo.png " alt=""
/&gt;

{/* Posts */}
&lt;/div&gt;
&lt;/div&gt;


);
};


export const getServerSideProps = async () =&gt; {
const query = `*[_type == "post"]{
_id,
title,
author-&gt; {
name,
image
},
description,
mainImage,
slug
}`;

const posts = await SanityClient.fetch(query);

return{
props: {
posts,
},
};
};
Aug 18, 2022, 10:47 AM
I am following ytb tutorial exactly what is it... and does not work
Aug 18, 2022, 10:52 AM
frustrating
Aug 18, 2022, 10:53 AM
problem must be with this line
export const getServerSideProps = async () => {
const query = `*[_type == "post"]{
_id,
title,
author-&gt; {
name,
image
},
description,
mainImage,
slug
}`;

const posts = await SanityClient.fetch(query);

return{
props: {
posts,
},
};
};
Aug 18, 2022, 10:54 AM
when I remove this ... client is working without issue
Aug 18, 2022, 10:54 AM
and page will reload
Aug 18, 2022, 10:54 AM
without problems
Aug 18, 2022, 10:54 AM
when I apply this back.. issue
Aug 18, 2022, 10:54 AM
I took your code and formatted it okay so it looks fine.
Aug 18, 2022, 11:21 AM
Definitely not a Sanity issue though. This is 100% on the Next setup.
Aug 18, 2022, 11:21 AM
(Side note, you might want to use getStaticProps instead of getServerSideProps.)
Aug 18, 2022, 11:22 AM
Can you share your Header component?
Aug 18, 2022, 11:22 AM
I fix it
Aug 18, 2022, 11:50 AM
just rerun everything from scratch
Aug 18, 2022, 11:50 AM
no need to assist, ITS WORKING
Aug 18, 2022, 11:50 AM
issue do not know what was it but I follow exactly again same thing as always and now its working
Aug 18, 2022, 11:50 AM
production
Aug 18, 2022, 11:51 AM
workiiiiiiing like a charm
Aug 18, 2022, 11:51 AM
Good. 🙂
Aug 18, 2022, 11:52 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?