# Nuxt & Slice Machine UI (Beta) Issues

**URL:** https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242
**Category:** Developing with Prismic
**Tags:** nuxtjs
**Created:** [July 15, 2021, 7:53am UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242 "2021-07-15T07:53:21Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![basti.gebhardt.bg](https://avatars.discourse-cdn.com/v4/letter/b/b487fb/32.png) [@basti.gebhardt.bg](https://community.prismic.io/u/basti.gebhardt.bg)
#### Post date: [July 15, 2021, 7:53am UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/1 "2021-07-15T07:53:22Z")

</div>

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.

```auto
import MyComponent from '..\..\..\..\slices\TestSlice';

```

Storybook throws me the following Error:

```auto
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:

```auto
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

```auto
import { getStoriesPaths } from 'slice-machine-ui/helpers/storybook'

```

and

```auto
  storybook: {
    stories: [
      ...getStoriesPaths()
    ]
  },

```

vercel throws me the follwoing error inside the functions tab

```auto
500: INTERNAL_SERVER_ERROR

```

```auto
[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

```auto
{
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder"
    }
  ]
}

```

here my package.json

```auto
{
  "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

---

<div class="post-metadata">

### Author: ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)
#### Post date: [July 15, 2021, 3:38pm UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/3 "2021-07-15T15:38:34Z")

</div>

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](https://prismic.io/docs/technologies/tutorial-series-introduction-nuxtjs).

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

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

```

Would you please paste the `sm.json` file here?

Thanks,

Priyanka

---

<div class="post-metadata">

### Author: ![basti.gebhardt.bg](https://avatars.discourse-cdn.com/v4/letter/b/b487fb/32.png) [@basti.gebhardt.bg](https://community.prismic.io/u/basti.gebhardt.bg)
#### Post date: [July 15, 2021, 4:57pm UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/4 "2021-07-15T16:57:13Z")

</div>

Hey!  
Thanks for the fast Response. 🙂

1. i tried the new Beta for the Slice-Machine to use Variations on my slices. I tried this Blog Post out: [Prismic](https://prismic.io/blog/slice-variations-local-custom-types). 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:

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

```

**sm.json**

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

```

---

<div class="post-metadata">

### Author: ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)
#### Post date: [July 21, 2021, 12:31pm UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/5 "2021-07-21T12:31:52Z")

</div>

Hello @basti.gebhardt.bg

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

Thanks,  
Priyanka

---

<div class="post-metadata">

### Author: ![basti.gebhardt.bg](https://avatars.discourse-cdn.com/v4/letter/b/b487fb/32.png) [@basti.gebhardt.bg](https://community.prismic.io/u/basti.gebhardt.bg)
#### Post date: [July 21, 2021, 5:12pm UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/6 "2021-07-21T17:12:14Z")

</div>

Hello @Priyanka,

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

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

export default {
  title: 'slices/Card'
}

```

 ![screenshot](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/c/c0819d02b957dc4d06471bae6be25cbde76eb8d0.png)

Best regards  
Basti

---

<div class="post-metadata">

### Author: ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)
#### Post date: [July 22, 2021, 9:08am UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/7 "2021-07-22T09:08:20Z")

</div>

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

---

<div class="post-metadata">

### Author: ![marc.mcintosh](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marc.mcintosh/32/25_2.png) [@marc.mcintosh](https://community.prismic.io/u/marc.mcintosh)
#### Post date: [July 22, 2021, 9:33am UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/8 "2021-07-22T09:33:18Z")

</div>

Ou of curiosity, does changing

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

```

to

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

```

Work?

---

<div class="post-metadata">

### Author: ![basti.gebhardt.bg](https://avatars.discourse-cdn.com/v4/letter/b/b487fb/32.png) [@basti.gebhardt.bg](https://community.prismic.io/u/basti.gebhardt.bg)
#### Post date: [July 22, 2021, 9:35am UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/9 "2021-07-22T09:35:50Z")

</div>

> [@marc.mcintosh](#):
>
> Ou of curiosity, does changing

Hey @marc.mcintosh

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

---

<div class="post-metadata">

### Author: ![basti.gebhardt.bg](https://avatars.discourse-cdn.com/v4/letter/b/b487fb/32.png) [@basti.gebhardt.bg](https://community.prismic.io/u/basti.gebhardt.bg)
#### Post date: [July 22, 2021, 11:01am UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/10 "2021-07-22T11:01:10Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![marc.mcintosh](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marc.mcintosh/32/25_2.png) [@marc.mcintosh](https://community.prismic.io/u/marc.mcintosh)
#### Post date: [July 22, 2021, 12:47pm UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/11 "2021-07-22T12:47:19Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![basti.gebhardt.bg](https://avatars.discourse-cdn.com/v4/letter/b/b487fb/32.png) [@basti.gebhardt.bg](https://community.prismic.io/u/basti.gebhardt.bg)
#### Post date: [July 22, 2021, 7:27pm UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/14 "2021-07-22T19:27:16Z")

</div>

```auto
prismic-cli/4.0.4 win32-x64 node-v16.5.0

```

```auto
import MyComponent from '..\..\..\..\slices\TestViaSliceMachine';

export default {
  title: 'slices/TestViaSliceMachine'
}

```

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

---

<div class="post-metadata">

### Author: ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)
#### Post date: [July 27, 2021, 2:34pm UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/15 "2021-07-27T14:34:11Z")

</div>

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

---

<div class="post-metadata">

### Author: ![basti.gebhardt.bg](https://avatars.discourse-cdn.com/v4/letter/b/b487fb/32.png) [@basti.gebhardt.bg](https://community.prismic.io/u/basti.gebhardt.bg)
#### Post date: [July 29, 2021, 1:01pm UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/18 "2021-07-29T13:01:09Z")

</div>

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? 🙂

Greetings  
Basti

---

<div class="post-metadata">

### Author: ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)
#### Post date: [July 29, 2021, 2:44pm UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/19 "2021-07-29T14:44:47Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)
#### Post date: [August 9, 2021, 8:54am UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/20 "2021-08-09T08:54:37Z")

</div>

Hello @basti.gebhardt.bg

I have got an update from the Slice Machine team, and they fixed the issue. Could you please check on your side?

Thanks,  
Priyanka

---

<div class="post-metadata">

### Author: ![basti.gebhardt.bg](https://avatars.discourse-cdn.com/v4/letter/b/b487fb/32.png) [@basti.gebhardt.bg](https://community.prismic.io/u/basti.gebhardt.bg)
#### Post date: [August 9, 2021, 6:01pm UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/21 "2021-08-09T18:01:13Z")

</div>

Hey @Priyanka,

i installed a fresh version! Now its works perfect! Thanks! 🙂

---

<div class="post-metadata">

### Author: ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)
#### Post date: [August 10, 2021, 6:01pm UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/22 "2021-08-10T18:01:19Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

---

<div class="post-metadata">

### Author: ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)
#### Post date: [December 9, 2021, 3:32pm UTC](https://community.prismic.io/t/nuxt-slice-machine-ui-beta-issues/6242/23 "2021-12-09T15:32:18Z")

</div>


