Hello together,
Yesterday I tried out the new beta of the Slice-Machine-UI. Unfortunately I have two errors that I can't solve easily. I am still very new in this forum, maybe you can help me. I would be really happy if you had a solution for me.
1) Slice-Machine-UI / Storybook
After I edit or create a new slice, the generated import inside the value is not created correctly at the index.stories.js.
import MyComponent from '..\..\..\..\slices\TestSlice';
Storybook throws me the following Error:
ERROR in ./.slicemachine/assets/slices/TestSlice/index.stories.js
Module not found: Error: Can't resolve '........slicesTestSlice' in 'slicemachine\assets\slices\TestSlice'
i fixed it in the index.stories.js with:
import MyComponent from '@/slices/TestSlice';
Do you have a solution how to specify the path not classically under windows with backslash but classically with the normal slash?
2) Deployment on Vercel
after i adjusted my nuxt.config.js with
import { getStoriesPaths } from 'slice-machine-ui/helpers/storybook'
and
storybook: {
stories: [
...getStoriesPaths()
]
},
vercel throws me the follwoing error inside the functions tab
500: INTERNAL_SERVER_ERROR
[GET] /
09:48:12:37
2021-07-15T07:48:13.859Z undefined ERROR Uncaught Exception {"errorType":"Error","errorMessage":"Could not load Nuxt configuration. Make sure all dependencies are listed in package.json dependencies or in serverFiles within builder options:\n Error: Cannot find module 'esm'\nRequire stack:\n- /var/task/vercel__launcher.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js","stack":["Error: Could not load Nuxt configuration. Make sure all dependencies are listed in package.json dependencies or in serverFiles within builder options:"," Error: Cannot find module 'esm'","Require stack:","- /var/task/vercel__launcher.js","- /var/runtime/UserFunction.js","- /var/runtime/index.js"," at Object.<anonymous> (/var/task/vercel__launcher.js:23:13)"," at Module._compile (internal/modules/cjs/loader.js:1085:14)"," at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)"," at Module.load (internal/modules/cjs/loader.js:950:32)"," at Function.Module._load (internal/modules/cjs/loader.js:790:14)"," at Module.require (internal/modules/cjs/loader.js:974:19)"," at require (internal/modules/cjs/helpers.js:92:18)"," at _tryRequire (/var/runtime/UserFunction.js:75:12)"," at _loadUserApp (/var/runtime/UserFunction.js:95:12)"," at Object.module.exports.load (/var/runtime/UserFunction.js:140:17)"]}
Unknown application error occurred
Error
after roll back to the regular nuxt.config.js file without the slice-machine-ui changes its works fine.
here my vercel.json
{
"builds": [
{
"src": "nuxt.config.js",
"use": "@nuxtjs/vercel-builder"
}
]
}
here my package.json
{
"name": "hoechstform",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint": "npm run lint:js",
"slicemachine": "start-slicemachine --port 9999",
"storybook": "nuxt storybook",
"build-storybook": "nuxt storybook build",
"chromatic": "npx chromatic --project-token=xxxxxxx"
},
"dependencies": {
"@prismicio/vue": "^2.0.11",
"core-js": "^3.15.1",
"nuxt": "^2.15.7",
"nuxt-sm": "^0.0.8",
"prismic-javascript": "^3.0.2",
"vue-essential-slices": "^0.3.0",
"vue-slicezone": "^0.1.0"
},
"devDependencies": {
"@babel/eslint-parser": "^7.14.7",
"@nuxtjs/eslint-config": "^6.0.1",
"@nuxtjs/eslint-module": "^3.0.2",
"@nuxtjs/prismic": "^1.3.1",
"@nuxtjs/storybook": "^4.1.1",
"@nuxtjs/style-resources": "^1.2.0",
"babel-loader": "^8.2.2",
"chromatic": "^5.9.2",
"eslint": "^7.29.0",
"eslint-plugin-nuxt": "^2.0.0",
"eslint-plugin-vue": "^7.12.1",
"sass": "^1.32.7",
"sass-loader": "^10.1.1",
"slice-machine-ui": "^0.1.0-beta.1"
}
}
I'm still very new to the whole Prismic and Slice-Machine topic, so I'm looking forward to your answers.
Kind regards
Basti