Updating Prismic Slice Machine has broken storybook

Developing with Prismic
1

Hi,

After upgrading to the newest Slice Machine (and Next.js), Storybook no longer runs as I get the following error:

ModuleNotFoundError: Module not found: Error: Can't resolve 'next/router' in '/Users/kevin/Sites/new-site/node_modules/@prismicio/next/dist'
Did you mean 'router.js'?
BREAKING CHANGE: The request 'next/router' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.

The issue seems to be related to @prismicio/next which I previously had never installed, but I'm not entirely sure as I'm not that great with webpack.

Cheers

2

I've temporarily solved this by going into node_modules/@prismicio/next/dist/index.mjs and changed

import { useRouter } from 'next/router'

to

import { useRouter } from 'next/router.js'

Adding the extension .js is working for now.

4

Hello @kevinf

Thanks for reaching out to us.

I am glad that you resolved the issue, but I couldn't reproduce the same. StoryBook worked well when I installed it with the new SliceMachine version. Any screenshot and copy of the package.json file would be helpful for us to report to the product.

Thanks,
Priyanka

5

Hi @Priyanka,

My solution only fixed the issue for local development actually, as when I go to deploy on Vercel the error occurs because it downloads its own dependencies.

Here's a pic of the same error in Vercel

CleanShot 2022-03-25 at 10.06.54@2x
CleanShot 2022-03-25 at 10.06.54@2x2010×480 175 KB

And also here's my package.json file

{
  "name": "new-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
   ...tons of scripts
  },
  "dependencies": {
    "@algolia/autocomplete-js": "^1.5.1",
    "@algolia/autocomplete-theme-classic": "^1.5.1",
    "@prismicio/client": "^6.4.1",
    "@prismicio/helpers": "^2.2.1",
    "@prismicio/next": "^0.1.0",
    "@prismicio/react": "^2.1.2",
    "@prismicio/slice-simulator-react": "^0.2.0",
    "@radix-ui/react-dialog": "^0.1.5",
    "@radix-ui/react-icons": "^1.0.3",
    "@radix-ui/react-scroll-area": "^0.1.3",
    "@sentry/browser": "^6.15.0",
    "@sentry/node": "^6.15.0",
    "@sentry/tracing": "^6.16.1",
    "@stitches/react": "^1.2.6",
    "@szhsin/react-menu": "2.3.4",
    "@unly/simple-logger": "^1.0.0",
    "@unly/universal-language-detector": "^2.0.3",
    "ahooks": "^3.0.3",
    "algoliasearch": "^4.10.5",
    "chalk": "^4.1.1",
    "classnames": "^2.3.1",
    "clsx": "^1.1.1",
    "cookieconsent": "^3.1.1",
    "cookies": "^0.8.0",
    "css-to-react-native": "^3.0.0",
    "date-fns": "^2.28.0",
    "date-fns-tz": "^1.3.0",
    "deepmerge": "^4.2.2",
    "del-cli": "^4.0.1",
    "downshift": "^6.1.7",
    "evergreen-ui": "^6.6.3",
    "glob": "^7.2.0",
    "graphql": "^16.2.0",
    "graphql-request": "^4.1.0",
    "html-react-parser": "^1.4.4",
    "http": "^0.0.1-security",
    "js-cookie": "^3.0.1",
    "keen-slider": "^6.6.4",
    "lodash.clonedeep": "^4.5.0",
    "lodash.find": "^4.6.0",
    "lodash.findindex": "^4.6.0",
    "lodash.get": "^4.4.2",
    "lodash.isarray": "^4.0.0",
    "lodash.isempty": "^4.4.0",
    "lodash.map": "^4.6.0",
    "lodash.remove": "^4.7.0",
    "lodash.size": "^4.2.0",
    "lodash.startswith": "^4.2.1",
    "lodash.xorby": "^4.7.0",
    "next": "^12.0.7",
    "next-cookies": "^2.0.3",
    "next-plugin-svgr": "^1.0.0",
    "plyr": "^3.6.12",
    "plyr-react": "^3.2.1",
    "prop-types": "^15.7.2",
    "qs": "^6.10.2",
    "query-string": "^7.0.1",
    "ramda": "^0.28.0",
    "react": "17.0.2",
    "react-aptor": "^1.3.1",
    "react-currency-format": "^1.0.0",
    "react-dom": "17.0.2",
    "react-dropdown-select": "^4.8.0",
    "react-gtm-module": "^2.0.11",
    "react-icons": "^4.3.1",
    "react-instantsearch-dom": "^6.17.0",
    "react-query": "^3.34.3",
    "react-remove-scroll": "^2.4.3",
    "react-string-replace": "^1.0.0",
    "react-toastify": "^8.0.3",
    "react-transition-state": "^1.1.3",
    "rheostat": "^4.1.1",
    "sass": "^1.45.0",
    "shopify-gid": "^1.0.1",
    "stitches-reset": "^1.0.0",
    "uuid": "^8.3.2",
    "zustand": "^3.7.0"
  },
  "devDependencies": {
    "@babel/core": "^7.16.5",
    "@next/bundle-analyzer": "^12.0.7",
    "@next/env": "^12.0.7",
    "@storybook/addon-a11y": "^6.4.19",
    "@storybook/addon-actions": "^6.4.19",
    "@storybook/addon-essentials": "^6.4.19",
    "@storybook/addon-links": "^6.4.19",
    "@storybook/addons": "^6.4.19",
    "@storybook/builder-webpack5": "^6.5.0-alpha.4",
    "@storybook/manager-webpack5": "^6.5.0-alpha.4",
    "@storybook/react": "^6.4.19",
    "@storybook/theming": "^6.4.19",
    "@svgr/webpack": "^6.1.2",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/react-hooks": "^7.0.2",
    "@types/amplitude-js": "^8.0.2",
    "@types/cookies": "^0.7.7",
    "@types/jest": "^27.0.3",
    "@types/jest-expect-message": "^1.0.3",
    "@types/js-cookie": "^3.0.1",
    "@types/json-stringify-safe": "^5.0.0",
    "@types/lodash.clonedeep": "^4.5.6",
    "@types/lodash.find": "^4.6.6",
    "@types/lodash.findindex": "^4.6.6",
    "@types/lodash.get": "^4.4.6",
    "@types/lodash.isarray": "^4.0.6",
    "@types/lodash.isempty": "^4.4.6",
    "@types/lodash.remove": "^4.7.6",
    "@types/lodash.size": "^4.2.6",
    "@types/lodash.startswith": "^4.2.6",
    "@types/lodash.xorby": "^4.7.6",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@types/react-test-renderer": "^17.0.1",
    "@types/reactstrap": "^8.7.2",
    "@types/uuid": "^8.3.3",
    "@types/webpack-env": "^1.16.3",
    "@typescript-eslint/eslint-plugin": "^5.7.0",
    "@typescript-eslint/parser": "^5.7.0",
    "@welldone-software/why-did-you-render": "^6.2.3",
    "babel-jest": "^27.4.5",
    "babel-loader": "^8.2.2",
    "babel-plugin-react-require": "^3.1.3",
    "commitizen": "^4.2.4",
    "cypress": "^9.1.1",
    "cz-conventional-changelog": "^3.3.0",
    "eslint": "^8.4.1",
    "eslint-config-next": "^12.0.7",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.4.5",
    "jest-expect-message": "^1.0.2",
    "jest-extended": "^2.0.0",
    "jest-fetch-mock": "^3.0.3",
    "jest-to-match-shape-of": "^1.3.1",
    "jsdoc": "^3.6.7",
    "next-unused": "^0.0.6",
    "node-mocks-http": "^1.11.0",
    "prettier": "^2.5.1",
    "react-test-renderer": "^17.0.2",
    "semantic-release": "^19.0.2",
    "slice-machine-ui": "^0.3.3",
    "standard-version": "^9.3.2",
    "typescript": "^4.5.4",
    "url-loader": "^4.1.1",
    "webpack": "5"
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  }
}
7

Hello @kevinf, thanks for reaching out. It's important to note that we've moved from officially supporting Storybook with Slice Machine. You can now use the Slice Simulator which is simpler to use. We published a blog post about this decision that you can check out here:

Please let us know if you have any questions, feedback or anything else.
Thanks

8

Hi @Pau ,

Thanks but I'm even more confused now. You are presenting Slice Simulator as an alternative to Slice Machine, but the link you provide doesn't take me to any Slice Simulator documentation, only Slice Machine (meaning, I can't find any information on how to install and use Slice Simulator vs installing and using Slice Machine). The only information I'm finding on Slice Simulator is that it's integrated into Slice Machine 0.2, so I can't find any clear distinction between the two.

When looking at my package.json file, is there anything that looks off? I've followed the docs on Next.js and am using @prismicio/slice-simulator-react.

Also, the article has an emphasis on "if you like Storybook, you can definitely keep using it", however it looks like a Prismic module is keeping Storybook from working at all, so I'm not sure why I'm getting two separate messages from Prismic now: "Keep using storybook if you like it" and also "sorry we don't support storybook".

Best

11

Hello @kevinf

Please find a documentation to set up a simulator to simulate slices. A slice simulator is an alternative to a storybook.

Please share a screenshot of the error showing that: "Keep using storybook if you like it" and also "sorry we don't support storybook."

Thanks,
Priyanka

12

Hi @Priyanka,

I'm not referring to an error. I'm referring to the article that you linked me to, where at the bottom it says,

"Storybook enthusiast? Keep using Storybook! Consider exploring Slice Simulator alongside."

However, when I try to use Storybook, it won't run because of the way that a Prismic module imports next/router.

So you're sending me conflicting messages:

  1. Keep using Storybook
  2. Sorry, we don't support Storybook

So I'm trying to figure out how to continue using Storybook, because that is what Prismic is recommending.

Are you able to reproduce the issue using my package.json?

13

Hello @kevinf

I couldn't find anything incorrect in your package.json. We recommend our users to migrate to the new "Slice Simulator" as it brings stability to your Slice Machine project and as Prsimic maintains it.
Please follow this article.

Could you please try with a slice-simulator?

Thanks,
Priyanka

14

Hi @Priyanka ,

I understand that you recommend that, but in this case I upgraded slice machine for an existing project with hundreds of components (unrelated to Prismic) already highly configured in Storybook. Because I updated to the newest version of Slice Machine, based on the recommendation from that article that Storybook is recommended to be used side-by-side, the entire Storybook setup no longer works when building in Vercel.

It only works locally if I manually edit a dependency in my local /node_modules folder.

So the purpose of this thread is not about what alternative I can use, it's about how we can fix this current issue. I'll try to get a working demo of the problem today.

15

The issue seems to have been resolved with the most recent update to @prismicio/next