Closed aldoarya closed 10 months ago
xrutayisire
commented
1 year ago Hi,
Thanks you for the feedback and sorry for the issue. You are up to date with slice machine but you also need to update the adapter to « @slicemachine/adapter-next@0.3.4 »
we already release the fix in this adapter version 🙂
Don’t hesitate to reopen this issue if you still have a problem.
aldoarya
commented
1 year ago Hello,
Thanks for the speedy feedback. I have tried to also update to @slicemachine/adapter-next@0.3.4, but unfortunately this issue is still persist with the exact same problem.
xrutayisire
commented
1 year ago Ok, no problem, I will try to help you.
Can you give me your installed version of the package "prismic-ts-codegen"? It's a dependency of @slicemachine/adapter-next.
aldoarya
commented
1 year ago Correct me if I am wrong.
But, by delving into the node_modules, the prismic-ts-codegen is on 0.1.11. It is the same version that written on the @slicemachine/adapter-next's package.json
Here a screenshot of the prismic-ts-codegen inside node_modules
xrutayisire
commented
1 year ago We have an ongoing issue with prismic-ts-codegen that we know and using the version 0.1.11 fix the issue. Maybe you have another problem, but it's weird.
Can you give me the final version of your package.json, and I will send it to our team to take a look at your issue?
Sorry for the inconvenience.
aldoarya
commented
1 year ago Yeah, it's weird. 2 out of 3 people in my team encounter this same issue.
Sure, here's the content of my package.json since Github doesn't support .json file
{
"name": "next-prismic-boilerplate",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "concurrently \"npm:next:dev\" \"npm:slicemachine\" --names \"next,slicemachine\" --prefix-colors blue,magenta",
"next:dev": "next",
"build": "next build",
"start": "next start",
"lint": "next lint",
"slicemachine": "start-slicemachine",
"pretty": "prettier --write \"./**/*.{ts,tsx}\""
},
"dependencies": {
"@headlessui/react": "^1.7.15",
"@prismicio/client": "^7.0.0",
"@prismicio/next": "^1.3.3",
"@prismicio/react": "^2.3.0",
"@prismicio/slice-simulator-react": "^0.2.2",
"@reecem/prismic-sitemap": "^0.4.3",
"@sendgrid/mail": "^7.7.0",
"@typescript-eslint/eslint-plugin": "^5.22.0",
"@typescript-eslint/parser": "^5.22.0",
"clsx": "^1.2.1",
"next": "^13.4.9",
"nextjs-progressbar": "^0.0.14",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.3.1"
},
"devDependencies": {
"@slicemachine/adapter-next": "^0.3.4",
"@types/node": "^17.0.31",
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.3",
"autoprefixer": "^10.4.7",
"concurrently": "^7.3.0",
"eslint": "8.15.0",
"eslint-config-next": "^13.4.9",
"postcss": "^8.4.13",
"postcss-import": "^15.0.0",
"prettier": "^3.0.0",
"prettier-plugin-tailwindcss": "^0.4.0",
"slice-machine-ui": "^1.5.1",
"tailwindcss": "^3.0.24",
"typescript": "^4.6.4"
}
}
eraykeskinmac
commented
1 year ago Greetings, I'm having the same problem these days, exactly since we passed 1.5.1
aldoarya
commented
1 year ago I just spend few good hours searching for the cause of this. I rebuild my project from ground up by creating Next,js app --> installing Slicemachine --> migrating folder-by-folder and test to create new slice every one or two folders.
Turns out the root cause was the prettier-plugin-tailwindcss. I added it to my .prettierrc in the "plugins" array and immediately the error happen. Cannot create slice, update, etc. Removing this plugin from the .prettierrc and dev dependency solved this issue.
It kinda weird to me, how a Prettier plugin could cause this. Hope this helps anyone who face the same issue.
xrutayisire
commented
1 year ago Nice it’s working! Be sure we will keep investigating and ensure this error don’t happen again. You’re still with SliceMachine 1.5.1, adapter next 0.3.4 and prismic-ts-codegen 0.1.11?
Because we just release a new version of prismic-ts-codegen (0.1.15) that we are testing to check if it can solve this issue.
aldoarya
commented
1 year ago Yup, I have those versions of packages at the time I was searching for the root cause.
xrutayisire
commented
1 year ago But now that it’s working you still have that? Sorry for all the questions just want to be sure we will have all the details to investigate.
aldoarya
commented
1 year ago Yes, here are my current working package.json, after removing prettier-plugin-tailwindcss. The prismic-ts-codegen is not shown, but it is on 0.1.11.
Hope this will help in the investigation process
{
"name": "fix-slicemachine",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "concurrently \"npm:next:dev\" \"npm:slicemachine\" --names \"next,slicemachine\" --prefix-colors blue,magenta",
"next:dev": "next",
"build": "next build",
"start": "next start",
"lint": "next lint",
"slicemachine": "start-slicemachine",
"pretty": "prettier --write \"./**/*.{ts,tsx}\""
},
"dependencies": {
"@headlessui/react": "^1.7.15",
"@prismicio/client": "^7.1.0",
"@prismicio/next": "^1.3.3",
"@prismicio/react": "^2.7.1",
"@reecem/prismic-sitemap": "^0.5.3",
"@sendgrid/mail": "^7.7.0",
"@types/node": "20.4.2",
"@types/react": "18.2.15",
"@types/react-dom": "18.2.7",
"autoprefixer": "10.4.14",
"clsx": "^1.2.1",
"eslint": "8.44.0",
"eslint-config-next": "13.4.9",
"next": "13.4.9",
"nextjs-progressbar": "^0.0.16",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.10.1",
"tailwindcss": "3.3.3",
"typescript": "5.1.6"
},
"devDependencies": {
"@slicemachine/adapter-next": "^0.3.4",
"concurrently": "^8.2.0",
"postcss": "^8.4.26",
"postcss-import": "^15.1.0",
"prettier": "^3.0.0",
"slice-machine-ui": "^1.5.1"
}
}Yes it will help 🙌 Thank you, and last thing, did you, in the past, update @prismicio/client from v6 to the v7?
aldoarya
commented
1 year ago Yes, we updated @prismicio/client from 6.4.3 to 7.1.0.
But, to avoid misunderstanding, the prettier-plugin-tailwindcss only added after we update it to 7.1.0
xrutayisire
commented
1 year ago I understand, thank you very much. We will update this issue beginning of next week.
eraykeskinmac
commented
1 year ago I just spend few good hours searching for the cause of this. I rebuild my project from ground up by creating Next,js app --> installing Slicemachine --> migrating folder-by-folder and test to create new slice every one or two folders.
Turns out the root cause was the
prettier-plugin-tailwindcss. I added it to my.prettierrcin the "plugins" array and immediately the error happen. Cannot create slice, update, etc. Removing this plugin from the.prettierrcand dev dependency solved this issue.It kinda weird to me, how a Prettier plugin could cause this. Hope this helps anyone who face the same issue.
Yes, this is exactly why this is happening, I just tested it and the slice machine started working "prettier-plugin-tailwindcss": "^0.4.0", I upgraded to this version "prettier-plugin-tailwindcss": "^0.3.0", I changed it to this version and it's fixed I can create slice machine update
angeloashmore
commented
1 year ago Hi @aldoarya and @eraykeskinmac,
Thank you for discovering the Prettier + Tailwind cause. @slicemachine/adapter-next runs generated files (including prismicio-types.d.ts) through Prettier to match your project's code style. prettier-plugin-tailwindcss may be erroring on some part of the code, though it's not obvious where.
Could you do the following to help us debug the issue?
slicemachine.config.json:
{
"repositoryName": "example-prismic-repo",
"libraries": ["./slices"],
+ "adapter": {
+ "resolve": "@slicemachine/adapter-next",
+ "options": {
+ "format": false
+ }
+ },
"localSliceSimulatorURL": "http://localhost:8000/slice-simulator"
}prismicio-types.d.ts file should be updated without an error.prismicio-types.d.ts file here.With that output, we can understand where the bug is happening. Thank you!
aldoarya
commented
1 year ago Hello
Thanks for the information.
Disabling adapter formatting on the slicemachine.config.json does solve the issue. I am able to sucessfully create a new slice and update it.
Here is my prismic-types.d.ts after disabling the formatting.
And here is my package.json
eraykeskinmac
commented
1 year ago Hello Thanks for the information. Disabling adapter formatting on the slicemachine.config.json does solve the issue. I am able to sucessfully create a new slice and update it.
Here is my prismic-types.d.ts after disabling the formatting.
```typescript
// Code generated by Slice Machine. DO NOT EDIT.
import type * as prismic from "@prismicio/client";
type Simplify
Versions
Reproduction
@slicemachine/adapter-nextduringslice:updatehook: Cannot read properties of undefined (reading 'startsWith')"Additional Details
Last changes made before got the error was updating `@prismic/next` from `0.1.2` to `1.3.3` since my project also updated to Next.js 13. After that, tried downgrade `@prismic/next` back to `0.1.2` also still got the error. Tried to exactly match the version used in the given crash course , also still got the error. Tried to do clean install, delete .next and node_modules folder, also didn't work. When creating new slice, the slice folder, `model.json` and `mocks.json` is created, but no `index.tsx` file is created and the `prismicio-types.d.ts` is not updated with the new slice. When tried to re-initialize the folder using `npx @slicemachine/init@latest` also got similar error, "Error in `@slicemachine/adapter-next` during `project:init`"Package Detail package.json: ```json { "name": "next-prismic-boilerplate", "version": "0.1.0", "private": true, "scripts": { "dev": "concurrently \"npm:next:dev\" \"npm:slicemachine\" --names \"next,slicemachine\" --prefix-colors blue,magenta", "next:dev": "next", "build": "next build", "start": "next start", "lint": "next lint", "slicemachine": "start-slicemachine", "pretty": "prettier --write \"./**/*.{ts,tsx}\"" }, "dependencies": { "@headlessui/react": "^1.7.15", "@prismicio/client": "^7.0.0", "@prismicio/next": "^1.3.3", "@prismicio/react": "^2.3.0", "@prismicio/slice-simulator-react": "^0.2.2", "@reecem/prismic-sitemap": "^0.4.3", "@sendgrid/mail": "^7.7.0", "@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/parser": "^5.22.0", "clsx": "^1.2.1", "next": "^13.4.9", "nextjs-progressbar": "^0.0.14", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.3.1" }, "devDependencies": { "@slicemachine/adapter-next": "^0.3.3", "@types/node": "^17.0.31", "@types/react": "^18.0.9", "@types/react-dom": "^18.0.3", "autoprefixer": "^10.4.7", "concurrently": "^7.3.0", "eslint": "8.15.0", "eslint-config-next": "^13.4.9", "postcss": "^8.4.13", "postcss-import": "^15.0.0", "prettier": "^3.0.0", "prettier-plugin-tailwindcss": "^0.4.0", "slice-machine-ui": "^1.5.1", "tailwindcss": "^3.0.24", "typescript": "^4.6.4" } } ```
What is expected?
What is actually happening?
duringslice:update` hook: Cannot read properties of undefined (reading 'startsWith')"