hendrixer / nextjs-course-app

Next.js course

Learn Next.js

Follow along with the course

nextjs-course-app's Issues

Pragma and pragmaFrag cannot be set when runtime is automatic

Syntax error: pragma and pragmaFrag cannot be set when runtime is automatic.

This relates to:
/** @jsx jsx */ import { jsx } from 'theme-ui'

Solved currently with:
/** @jsx jsx */ /** @jsxRuntime classic */ import { jsx } from "theme-ui";

May be an issue with theme ui but its worth raising here for the frontend master course.

** I am currently on the Variants & Styling video

theme-ui issue

Having this error after installing theme-ui.
I am currently at adding theme-ui in introduction to Nextjs.

[Suggestion] No need to import React in for Functional components

I really thank @FrontendMasters for this wonderfull course and Scott for this wonderful course.My little suggestion on seeing the official docs from the Next team,is that no need to import the 'React' package every timei you are working in Next pages or around your app.While playing with Class components ,of you should use 'Component' package like ,

Eg Class Home extends React.Component

Like wise we can add it whenever we need on the go.

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

Hi Scott @Hendrixer

When I fetch one note in /pages/notes/[id].js the app crashes with the follwoing error:

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (_http_outgoing.js:536:11)
    at DevServer.sendHTML (/Users/jus/CODE/Courses/FrontEndMasters/Workshops/nextjs-themeui/node_modules/next/dist/server/next-dev-server.js:31:5)
    at DevServer.render (/Users/jus/CODE/Courses/FrontEndMasters/Workshops/nextjs-themeui/node_modules/next/dist/next-server/server/next-server.js:56:37)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Object.fn (/Users/jus/CODE/Courses/FrontEndMasters/Workshops/nextjs-themeui/node_modules/next/dist/next-server/server/next-server.js:32:107)
    at async Router.execute (/Users/jus/CODE/Courses/FrontEndMasters/Workshops/nextjs-themeui/node_modules/next/dist/next-server/server/router.js:38:67)
    at async DevServer.run (/Users/jus/CODE/Courses/FrontEndMasters/Workshops/nextjs-themeui/node_modules/next/dist/next-server/server/next-server.js:49:494)
    at async DevServer.handleRequest (/Users/jus/CODE/Courses/FrontEndMasters/Workshops/nextjs-themeui/node_modules/next/dist/next-server/server/next-server.js:18:101) {
  code: 'ERR_HTTP_HEADERS_SENT'
}
events.js:291
      throw er; // Unhandled 'error' event
      ^

Error [ERR_STREAM_WRITE_AFTER_END]: write after end
    at writeAfterEnd (_http_outgoing.js:646:15)
    at ServerResponse.end (_http_outgoing.js:766:7)
    at ServerResponse.end (/Users/jus/CODE/Courses/FrontEndMasters/Workshops/nextjs-themeui/node_modules/next/dist/compiled/compression/index.js:1:148805)
    at DevServer.handleRequest (/Users/jus/CODE/Courses/FrontEndMasters/Workshops/nextjs-themeui/node_modules/next/dist/next-server/server/next-server.js:18:189)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
Emitted 'error' event on ServerResponse instance at:
    at writeAfterEndNT (_http_outgoing.js:705:7)
    at processTicksAndRejections (internal/process/task_queues.js:81:21) {
  code: 'ERR_STREAM_WRITE_AFTER_END'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This is my code for /pages/notes/[id].js:

/** @jsx jsx */
import { jsx } from 'theme-ui';
import { useRouter } from 'next/router';
import Link from 'next/link';

const DynamicPage = ({ note }) => {
  return (
    <div sx={{ variant: 'containers.page' }}>
      <h1>Note: {note.title} </h1>
    </div>
  );
};

export default DynamicPage;

export async function getServerSideProps({ params, req, res }) {
  const response = await fetch(`http://localhost:3000/api/notes/${params.id}`);

  // so much power!
  if (!response.ok) {
    res.writeHead(302, { Location: '/notes' });
    res.end();
    return { props: {} };
  }

  const { data } = await response.json();

  if (data) {
    return {
      props: { note: data },
    };
  }
}

NOTE: only difference I have from your repo is named exports, my API is at API/notes & my components and data are in root.

A console.log(response) shows:

Response {
  size: 0,
  timeout: 0,
  [Symbol(Body internals)]: {
    body: PassThrough {
      _readableState: [ReadableState],
      _events: [Object: null prototype],
      _eventsCount: 2,
      _maxListeners: undefined,
      _writableState: [WritableState],
      allowHalfOpen: true,
      [Symbol(kCapture)]: false,
      [Symbol(kTransformState)]: [Object]
    },
    disturbed: false,
    error: null
  },
  [Symbol(Response internals)]: {
    url: 'http://localhost:3000/api/notes/1596709251707',
    status: 404,
    statusText: 'Not Found',
    headers: Headers { [Symbol(map)]: [Object: null prototype] },
    counter: 0
  }
}

Steps to trigger the error - follow this path:

1. yarn dev -- OK
2. go to localhost:3000 -- OK
3. click Notes in Nav bar -- OK
4. click any Note -- error (status 404 - not found)

Steps to avoid error:

1. yarn dev -- OK
2. go to localhost: 3000 -- OK
3. go to http://localhost:3000/api/notes/{id from step 4 above}
   But as soon as you click Notes in Nav bar then you're in trouble again.

Looks like new IDs are generated and somehow headers cannot be updated anymore.