NextJS/Now Build Clarification

derekr commented 4 years ago

I think this applies to other environments as well, but is the idea to check the generated classy-ui.css file in to version control? I can get it to build fine locally and when I deploy with now manually the file is present so it works, but the file isn't built in time for the pre-rendering of some pages in NextJS and it fails.

src/pages/_document.js

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {process.env.NODE_ENV === "production" ? (
            <link rel="stylesheet" href="/classy-ui.css" />
          ) : null}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

src/pages/index.js

import React from "react";
import { compose, tokens } from "classy-ui";

const title = compose(tokens.color.RED_200, tokens.fontSize.EXTRA_LARGE);

const Home = ({ posts }) => {
  return (
    <div>
      <h1 className={title}>My Title</h1>
    </div>
  );
};

// Opts in to nextjs static pre-rendering at build time
export const getStaticProps = async () => {
  return {};
};

export default Home;

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [["classy-ui/plugin", { "output": "public" }]]
}

derekr commented 4 years ago

This may be more of a zeit now build env issue actually. The static pre rendering is fine. When building in now the classy-ui plugin isn't able to find the public directory I think.

10:43:22.527
> Build error occurred
10:43:22.528
Error: ENOENT: no such file or directory, open '/zeit/5e908f88/public/classy-ui.css'
10:43:22.528
    at Object.openSync (fs.js:440:3)
10:43:22.528
    at Object.writeFileSync (fs.js:1265:35)
10:43:22.528
    at process.<anonymous> (/zeit/5e908f88/node_modules/classy-ui/lib/plugin/index.js:91:18)
10:43:22.529
    at process.emit (events.js:223:5)
10:43:22.529
    at process.exit (internal/process/per_thread.js:158:15)
10:43:22.529
    at /zeit/5e908f88/node_modules/next/dist/cli/next-build.js:15:154
10:43:22.529
    at processTicksAndRejections (internal/process/task_queues.js:94:5) {
10:43:22.529
  errno: -2,
10:43:22.529
  syscall: 'open',
10:43:22.529
  code: 'ENOENT',
10:43:22.529
  path: '/zeit/5e908f88/public/classy-ui.css'
10:43:22.529
}
10:43:22.549
error Command failed with exit code 1.
10:43:22.549
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
10:43:22.562
Error: Exited with 1
10:43:22.562
    at ChildProcess.<anonymous> (/zeit/279625c80a3b1659/.build-utils/node_modules/@now/build-utils/dist/index.js:31347:24)
10:43:22.562
    at ChildProcess.emit (events.js:223:5)
10:43:22.562
    at ChildProcess.EventEmitter.emit (domain.js:475:20)
10:43:22.562
    at maybeClose (internal/child_process.js:1021:16)
10:43:22.562
    at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)

derekr commented 4 years ago

Root cause: empty public directory isn't included in now build (or at least until it's checked in to source control? haven't verified).

Solution: add any file to public directory (usually you'll have a favicon here anyway).

Potential improvement: classy could mkdir -p for the output path when writing classy-ui.css?

cerebral / classy-ui

NextJS/Now Build Clarification #30