next12

[konsumer]

I'd like to help with getting fab working with nextjs 12.

Here is my initial test procedure, which basically comes from the fab & nextjs docs:

$ npx create-next-app@latest fab-next12
$ cd fab-next12

Creating a new Next.js app in /Users/konsumer/Desktop/fab-next12.

Using npm.

Installing dependencies:
- react
- react-dom
- next


added 14 packages, and audited 15 packages in 915ms

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Installing devDependencies:
- eslint
- eslint-config-next


added 208 packages, and audited 223 packages in 2s

68 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initialized a git repository.

Success! Created fab-next12 at /Users/konsumer/Desktop/fab-next12
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd fab-next12
  npm run dev

$ npx -y fab init                                                                               ✔
   [Initializer] 💎 fab init — Auto-configure a repo for generating FABs 💎
   [Initializer] Searching for a known project type…
                   If your project is not correctly detected,
                   or if the generated config is incorrect,
                   please leave some feedback at https://fab.dev/guides/known-project-types
   [Initializer] WARNING: NextJS on FABs only tested up until ^10.1.3. You have 12.1.6.
   [Initializer] If you have trouble, consider rolling back your local NextJS version.
   [Initializer] Success! Found a NextJS v9+ (dynamic) project. We know exactly how to configure this 👍
   [Initializer] Ready to proceed. This process will:
                   • Generate a fab.config.json5 file for your project
                   • Add build:fab and related scripts to your package.json
                   • Add .fab and fab.zip to your .gitignore
                   • Install @fab/cli and related dependencies using npm

   [Initializer] Ok, proceeding…
   [Initializer] WARNING: Your NextJS project is not currently configured for a serverless build.
                   Currently your app is configured to build in server mode.
                   Update this in your next.config.js by setting target: 'serverless'
                   Continuing setup, but fab build will fail until this is changed.
   [Initializer] NOTE: Installing required FAB core dependencies:
                   • @fab/cli
                   • @fab/server
                   • @fab/actions
   [Initializer] and the following project-specific plugins:
                   • @fab/input-nextjs
                   • @fab/plugin-render-html
                   • @fab/plugin-rewire-assets
   [Initializer] using npm…

npm WARN deprecated @types/[email protected]: This is a stub types definition for path-to-regexp (https://github.com/pillarjs/path-to-regexp). path-to-regexp provides its own type definitions, so you don't need @types/path-to-regexp installed!
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

added 711 packages, and audited 934 packages in 16s

113 packages are looking for funding
  run `npm fund` for details

9 high severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
   [Initializer] Done!
   [Initializer] Now run npm run build:fab to build your project and generate a FAB from it!
                   or visit https://fab.dev/guides/getting-started for more info.
   [Initializer] 💎 All good 💎

I test with npm run dev first, to make sure nextjs works. npm run build:fab:

> [email protected] build:fab
> npm run build && npm run fab:build


> [email protected] build
> next build

info  - Checking validity of types
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (3/3)
info  - Finalizing page optimization

Page                                       Size     First Load JS
┌ ○ /                                      6.25 kB        81.2 kB
├   └ css/149b18973e5508c7.css             655 B
├   /_app                                  0 B            74.9 kB
├ ○ /404                                   193 B          75.1 kB
└ λ /api/hello                             0 B            74.9 kB
+ First Load JS shared by all              74.9 kB
  ├ chunks/framework-1f10003e17636e37.js   45 kB
  ├ chunks/main-fc7d2f0e2098927e.js        28.7 kB
  ├ chunks/pages/_app-69da446bea935969.js  493 B
  ├ chunks/webpack-69bfa6990bb9e155.js     769 B
  └ css/27d177a30947857b.css               194 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)


> [email protected] fab:build
> fab build

       [Builder] 💎 fab build 💎
       [Builder] Reading plugins from config.
       [Builder] Found the following build-time plugins:
                   @fab/input-nextjs
                   @fab/plugin-render-html
                   @fab/plugin-rewire-assets
       [Builder] and the following runtime plugins:
                   node_modules/@fab/input-nextjs/runtime.js
                   node_modules/@fab/plugin-render-html/runtime.js
                   node_modules/@fab/plugin-rewire-assets/runtime.js
       [Builder] Proceeding with build phase.
       [Builder] Building @fab/input-nextjs:
Build failed!

Not serverless build
NextJS project needs to be set to target: serverless
You'll need to update your next.config.js file.
(https://fab.dev/guides/known-project-types#nextjs-9-dynamic-serverless)

    Error: Build failed!

I add target: 'serverless' to next.config.js, run npm run build:fab again:

> fab build

       [Builder] 💎 fab build 💎
       [Builder] Reading plugins from config.
       [Builder] Found the following build-time plugins:
                   @fab/input-nextjs
                   @fab/plugin-render-html
                   @fab/plugin-rewire-assets
       [Builder] and the following runtime plugins:
                   node_modules/@fab/input-nextjs/runtime.js
                   node_modules/@fab/plugin-render-html/runtime.js
                   node_modules/@fab/plugin-rewire-assets/runtime.js
       [Builder] Proceeding with build phase.
       [Builder] Building @fab/input-nextjs:
[@fab/input-ne…] Reading files from /Users/konsumer/Desktop/fab-next12/.next
[…/input-nextjs] Finding all static HTML pages…
[…/input-nextjs] ✔ Found 3 static html pages.
[…/input-nextjs] Finding all dynamic NextJS entry points
    AssertionError: The expression evaluated to a falsy value:

      assert_1.default(ast.body.length === 1)

    Code: ERR_ASSERTION

What else is needed to make it work?

[konsumer]

Also, how do I get started deving on packages/input-nextjs, in general? I am used to pretty live feedback, automatic-building, etc, so I can test things while I'm working. Should I maybe start with unit-tests for things like getRenderCode?

Trying to start working on it, I get this with npx lerna bootstrap:

lerna notice cli v4.0.0
lerna info bootstrap root only
lerna ERR! yarn install --mutex network:42424 --non-interactive exited 2 in 'fab-spec'
lerna ERR! yarn install --mutex network:42424 --non-interactive exited 2 in 'fab-spec'

Trying to npm i && npm test in packages/input-nextjs, I need to install a bunch of undocumented dev-deps:

npm i -D chai tsconfig-paths nyc mocha @ts-tools/node 

Should I PR these dev-deps, or is there some other recommended way?

{
    "@ts-tools/node": "^4.0.0",
    "chai": "^4.3.6",
    "mocha": "^10.0.0",
    "nyc": "^15.1.0",
    "tsconfig-paths": "^4.0.0"
}