Using old useRouter hook is breaking when using the /app directory on [email protected]

[Klynger]

Versions

• @prismicio/next: v1.0.2
• next: v13.1.6
• node: v16.19.0

Reproduction

Importing a function like enableAutoPreviews in a server component throws the following error:

Additional Details

{ "name": "marketing-site", "version": "0.1.0", "private": true, "scripts": { "dev:next": "pnpm clean && next dev", "test": "jest", "check-deadcode": "pnpm dlx unimported", "prismic-types": "pnpm dlx prismic-ts-codegen", "lint": "eslint --quiet --fix --ext ts,tsx,js,jsx ./", "lint:pkg": "npmPkgJsonLint .", "dev:slices": "pnpm storybook & pnpm slicemachine", "clean": "pnpm dlx rimraf out .next", "prebuild": "pnpm clean", "build": "NODE_ENV=production next build", "postbuild": "next-sitemap", "build:netlify": "pnpm build && next-sitemap", "build:analyze": "ANALYZE=true pnpm build", "start": "next start", "start:netlify": "netlify dev", "scripts:updateCarriersCSV": "node scripts/updateCarriersCSV.mjs", "storybook": "start-storybook -s ./public -p 8888", "build-storybook": "build-storybook -s ./public", "type-check": "tsc --noEmit", "slicemachine": "start-slicemachine --port 9999", "prepare": "husky install" }, "volta": { "node": "16.19.0", "pnpm": "7.26.2" }, "packageManager": "[email protected]", "lint-staged": { "*.{ts,js,tsx,jsx}": [ "eslint --fix", "prettier --write" ], "*.json": [ "prettier --write" ] }, "dependencies": { "@bugsnag/js": "7.20.0", "@bugsnag/plugin-react": "7.19.0", "@floating-ui/react": "0.16.0", "@getcircuit/colors": "1.3.1", "@getcircuit/electric-last-mile-calculator-commute": "0.1.2", "@getcircuit/electric-last-mile-calculator-delivery": "0.1.2", "@getcircuit/engine-client": "8.1.0", "@getcircuit/tailwind": "2.6.1", "@headlessui/react": "1.7.7", "@juggle/resize-observer": "3.4.0", "@prismicio/client": "6.7.3", "@prismicio/helpers": "2.3.5", "@prismicio/next": "1.0.2", "@prismicio/react": "2.5.0", "@prismicio/slice-simulator-react": "0.2.3", "@radix-ui/react-scroll-area": "0.1.3", "@radix-ui/react-tooltip": "1.0.0", "@tailwindcss/forms": "0.5.3", "@tailwindcss/typography": "0.5.9", "ariakit": "2.0.0-next.40", "axios": "1.3.1", "cheerio": "1.0.0-rc.12", "client-only": "^0.0.1", "clsx": "1.2.1", "flag-icons": "6.6.6", "follow-redirects": "1.15.2", "googleapis": "110.0.0", "http-status-codes": "2.2.0", "i18n-iso-countries": "7.5.0", "lodash.throttle": "4.1.1", "lottie-web": "5.10.2", "next": "13.1.6", "next-images": "1.8.4", "node-cache": "5.1.2", "react": "18.2.0", "react-device-detect": "2.2.2", "react-dom": "18.2.0", "react-intl": "6.2.7", "react-schemaorg": "2.0.0", "server-only": "^0.0.1", "slugify": "1.6.5" }, "devDependencies": { "@getcircuit/schema": "^0.8.88", "@getcircuit/web-utils": "1.11.6", "@kiwi/eslint-config": "2.0.4", "@kiwi/prettier-config": "2.0.4", "@netlify/plugin-nextjs": "4.30.3", "@next/eslint-plugin-next": "13.1.6", "@prismicio/types": "0.2.3", "@storybook/addon-actions": "6.5.16", "@storybook/addon-essentials": "6.5.16", "@storybook/addon-links": "6.5.16", "@storybook/addon-postcss": "2.0.0", "@storybook/react": "6.5.16", "@testing-library/dom": "8.20.0", "@testing-library/jest-dom": "5.16.5", "@testing-library/react": "13.4.0", "@testing-library/react-hooks": "8.0.1", "@testing-library/user-event": "14.4.3", "@types/intercom-web": "2.8.19", "@types/jest": "29.4.0", "@types/lodash.throttle": "4.1.7", "@types/node": "18.11.18", "@types/react": "18.0.27", "@types/react-dom": "18.0.10", "@typescript-eslint/parser": "5.50.0", "autoprefixer": "10.4.13", "eslint": "8.33.0", "eslint-config-next": "13.1.6", "eslint-plugin-storybook": "0.6.10", "git-repo-info": "2.1.1", "husky": "8.0.3", "jest": "29.4.1", "jest-environment-jsdom": "29.4.1", "jest-fetch-mock": "3.0.3", "lint-staged": "13.1.0", "netlify-cli": "12.10.0", "next-sitemap": "3.1.49", "npm-package-json-lint": "6.4.0", "postcss": "8.4.21", "prettier": "2.8.3", "prettier-plugin-tailwindcss": "0.2.2", "prismic-ts-codegen": "0.1.5", "schema-dts": "1.1.0", "slice-machine-ui": "0.5.1", "storybook-addon-next-router": "4.0.2", "tailwindcss": "3.2.4", "tsconfig-paths-webpack-plugin": "4.0.0", "typescript": "4.9.5", "webpack-bugsnag-plugins": "1.8.0", "webpack-bundle-analyzer": "4.7.0" } }

Steps to reproduce

1. Create a server component
2. Create a function createClient that imports and use enableAutoPreviews in this server component
3. Use this function

What is expected?

That the app works with no problems

What is actually happening?

The app throws an error.

[github-actions]

This issue has been labeled as a bug since it was created using the 🚨 Bug Report Template.

Hi there, thank you so much for the report!

Following our Maintenance Process, we will review your bug report and get back to you next Wednesday. To ensure a smooth review of your issue and avoid unnecessary delays, please make sure your issue includes the following:

• Information about your environment and packages you use (Node.js version, package names and their versions, etc.)
  Feel free to attach a copy of your package.json file.
• Any troubleshooting steps you already went through
• A minimal reproduction of the issue, and/or instructions on how to reproduce it

If you have identified the cause of the bug described in your report and know how to fix it, you're more than welcome to open a pull request address it. Check out our quick start guide for a simple contribution process.

If you think your issue is a question (not a bug) and would like quicker support, please close this issue and forward it to an appropriate section on our community forum: https://community.prismic.io

- The Prismic Open-Source Team

[angeloashmore]

Hi @Klynger, sorry for the delayed response.

@prismicio/next now supports the App Router (the app directory). Please update to the latest version.

npm install @prismicio/next@latest

Note: Previews currently are not supported. We are working on developing a solution. A package and documentation update will be published once it is available.

[gabrielreisn]

Note: Previews currently are not supported. We are working on developing a solution. A package and documentation update will be published once it is available.

@angeloashmore, any expected timeframe to ship this one? As previews are an essential feature for content editors, this is blocking the nextjs and prismic related dependencies upgrade

[angeloashmore]

Totally understand! We are waiting for two things:

• @prismicio/client needs to be updated to support Next.js' fetch.cache option. This update is already in the upcoming v7 (currently in alpha, not ready to public use yet), and should be backported to v6. We will be backporting the feature to ease the upgrade process on projects already using v6.

  Update: feat: add fetchOptions parameter to control fetch() prismic-client#291

• We requested feedback from the Next.js team on our solution to make sure we are implementing the feature correctly. Previews will work differently in the App Router than they do in the Pages Directory, so we are verifying our solution.

In the meantime, previews will continue to work in the Pages Directory, even with the updated packages. We are just as eager to release the feature as you are to implement. 😄