search

prismicio / slice-machine

A series of tools for developing and deploying website sections with Prismic
https://prismic.io/docs
Apache License 2.0
287 stars 53 forks source link

Greenfield create-next-app with @slicemachine/init has set up issues #540

Closed frankstallone closed 2 years ago

frankstallone commented 2 years ago

First, slicemachine is awesome. When I started working on the web professionally many years ago we created unique sections to create efficiencies between design and development in the agency world. I have since gone through the ringer of visual builders on WordPress. This mental model works really well IMHO. Thank you for putting this all together! I did not see this issue anywhere else but feel free to link and close this if it has already been posted.

Versions

"dependencies": {
    "@prismicio/client": "^6.6.3",
    "@prismicio/helpers": "^2.3.2",
    "@prismicio/react": "^2.4.3",
    "@prismicio/slice-simulator-react": "^0.2.2",
    "next": "12.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.3",
    "slice-machine-ui": "^0.4.1"
  }
node v16.15.1
npm v8.11.0

Reproduction

  1. Create new Next.js app npx create-next-app [unique name here] --use-npm
  2. Run npx @slicemachine/initand follow the prompts to complete

What is expected?

I would expect npx @slicemachine/init to include "localSliceSimulatorURL": "http://localhost:3000/slice-simulator", in sm.json. I would also expect @prismicio/react and PrismicRichText to be used if it supersedes prismic-reactjs.

What is actually happening?

  1. "localSliceSimulatorURL": "http://localhost:3000/slice-simulator", does not get added to sm.json. This causes a failure when trying to add slices in slicemachine when running npm run slicemachine locally
  2. After 1. is fixed, creating a new slice adds files properly in /slices/ folder — however it uses import { RichText } from 'prismic-reactjs' which is not in package.json. @prismicio/react is installed so replacing that with import { PrismicRichText } from 'prismic-reactjs' does work.
frankstallone commented 2 years ago

Looks like my number 2 with the package confusion has been a long running issue. I see Alex talking about it all the way back in January this year here on this YouTube video.

I am also realizing that "localSliceSimulatorURL": "http://localhost:3000/slice-simulator" doesn't happen when you run npx @slicemachine/init because it is a step further down the documentation page here. Closing out this ticket because this is clearly growing pains that someone new like me will experience when starting new with Next.js and Prismic's slicemachine.