Nuxt & Slice Machine UI (Beta) Issues

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. :slight_smile:

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. :slight_smile:

Kind regards
Basti

Hello @basti.gebhardt.bg

Welcome to the Prismic community, and thanks for posting this question to us.

I am sorry that you are experiencing these issues while trying the Slice Machine.

  1. This is something strange path. It should be import Slice from. '/';. Because All slices should be available in the slices folder, can you please tell me which documentation you are following? If you are new to Slice Machine, I recommend you start with our tutorial series documentation.

  2. storybook path should be in nuxt.config.js file:

storybook: {
    stories: ["~/slices/**/*.stories.js"]
  },

Would you please paste the sm.json file here?

Thanks,

Priyanka

Hey!
Thanks for the fast Response. :slight_smile:

  1. i tried the new Beta for the Slice-Machine to use Variations on my slices. I tried this Blog Post out: Prismic. The path for the index.storie.js is always automatically set incorrectly when modifying or creating new files.

  2. FIXED! Instead of calling the helper function getStoriesPaths(), I simply linked directly to the folder structure. Like this:

  storybook: {
    stories: [
      '@/.slicemachine/assets/**/*.stories.js',
      '@/customtypes/**/*.stories.js'
    ]
  },

sm.json

{
  "libraries": [
    "@/slices",
    "vue-essential-slices"
  ],
  "framework": "nuxt",
  "apiEndpoint": "https://XXXX/api/v2",
  "_latest": "0.1.0",
  "storybook": "http://localhost:3003"
}

Hello @basti.gebhardt.bg

This is strange, I am going to test this out and will come back to you.

Thanks,
Priyanka

Hello @Priyanka,

thanks! I tested it out on Next.js and i have the same path :confused:

import MyComponent from '..\..\..\..\slices\Card';

export default {
  title: 'slices/Card'
}

Best regards
Basti

Hello @basti.gebhardt.bg

The path is correct. I have checked in my Next project, and It works well. Are you getting the same error with The Next.js project?

Thanks,
Priyanka

Ou of curiosity, does changing

import MyComponent from '..\..\..\..\slices\Card';

to

import MyComponent from '../../../../slices/Card';

Work?

1 Like

Hey @marc.mcintosh

yes! this works finde but Slice-Machine-UI@"^0.1.0-beta.1" replace it back with every save to filesystem.

Hello @Priyanka

no, i dont get any Error in next.js. If i change the Path to the correct import its worsk good. i can also push it to Prismic and use them in Next or Nuxt. Only when I change the slice in the slicemachine I automatically get the wrong path. This also causes Storybook to throw me an error.

Is the issue when creating slice through the cli or through slice-machine-ui?
If it's the cli can you tell me which version?

prismic-cli/4.0.4 win32-x64 node-v16.5.0
import MyComponent from '..\..\..\..\slices\TestViaSliceMachine';

export default {
  title: 'slices/TestViaSliceMachine'
}

this error appears on the slice-machine-ui. on every "Filesystem" save.

Hello @basti.gebhardt.bg

Thanks for the feedback and reporting this issue. Our Slice-Machine team has made a note about this and will fix the issue.

Thanks,
Priyanka

Hey @Priyanka

yesterday i tested it out on MacOS. Working fine with a new Project and the Nuxt Boilerplate from the Docs. Unfortunately it just doesn't work on my Windows system with the same setup. Can you estimate how long it will take to fix this? :slight_smile:

Greetings
Basti

Hello @basti.gebhardt.bg

Our Slice Machine team is investigated that this issue happening on the Windows system. They are working on this, and I will let you know once I get any update on this.

Thanks,
Priyanka