slice-machine: Got "Internal Error: Slice not created" when creating slice and "Error in `@slicemachine/adapter-next` during `slice:update` hook: Cannot read properties of undefined (reading 'startsWith')" when updating slice
Versions
- slice-machine-ui: 1.5.1
- node: v16.20.0 and v18.16.1
Reproduction
- npm install
- npm run dev
- Open localhost:9999/slices and then proceed to create Slice
- Shown “Internal Error: Slice not created”. Checked on Dev Tools, console, etc no further error information
- Select one of the previously created Slice. Update few field
- Click “Save to File System”, got error “Error in
@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:
{
"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?
- Able to create new slice
- Able to edit existing slice
What is actually happening?
- Unable to create new slice, got “Internal Error: Slice not created error”
- Unable to edit existing slice, got “@slicemachine/adapter-next
duringslice:update` hook: Cannot read properties of undefined (reading ‘startsWith’)”
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 1
- Comments: 27 (4 by maintainers)
Commits related to this issue
- feat(deps): upgrade to prettier 3 (#1055,DT-1614) (#1183) Co-authored-by: lihbr <lihbr@users.noreply.github.com> — committed to prismicio/slice-machine by lihbr 8 months ago
A fix was released in v1.19.0. I’m closing the issue now. Thanks again all of you for submitting the issue and investigating on the problem. That was really helpful.
Feel free to reopen if this happens again in a different context.
All the best.
Hi @aldoarya and @eraykeskinmac,
Thank you for discovering the Prettier + Tailwind cause.
@slicemachine/adapter-nextruns generated files (includingprismicio-types.d.ts) through Prettier to match your project’s code style.prettier-plugin-tailwindcssmay 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:prismicio-types.d.tsfile should be updated without an error.prismicio-types.d.tsfile here.With that output, we can understand where the bug is happening. Thank you!
Hey there, we’re hopefully fixing this in #1183, it’ll be out soon!
Workaround until it’s fixed:
Error should be gone until the next time you run slice machine.
Hello Thanks for the information. Disabling adapter formatting on the
slicemachine.config.jsondoes solve the issue. I am able to sucessfully create a new slice and update it.Here is my
prismic-types.d.tsafter disabling the formatting.And here is my package.json
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.