These dependencies were not found: @prismicio/simulator/kit

Developing with Prismic
1

Hi here!

I have a problem after installing Prismic on my Nuxt project.
It's impossible to compile :slight_smile:

These dependencies were not found:                                                                                                                                                                                                                                                                                                                                                                                            
* @prismicio/simulator/kit in ./node_modules/@slicemachine/adapter-nuxt2/dist/simulator/SliceSimulator.cjs                                                                                                     
* ~/slices in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/slice-simulator.vue?vue&type=script&lang=js&

I just started to develop my app, so it's a new project.

My package.json:

{
  "name": "Hostel",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "slicemachine": "start-slicemachine"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "bootstrap": "^4.6.2",
    "bootstrap-vue": "^2.22.0",
    "core-js": "^3.25.3",
    "nuxt": "^2.15.8",
    "vue": "^2.7.10",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.10"
  },
  "devDependencies": {
    "@nuxtjs/prismic": "^1.4.2",
    "@prismicio/types": "^0.2.7",
    "@slicemachine/adapter-nuxt2": "^0.3.7",
    "slice-machine-ui": "^1.6.0"
  }
}

My Nuxtconfig.js:

import { repositoryName } from "./slicemachine.config.json"

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'www',
    htmlAttrs: {
      lang: 'fr'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [], // '@nuxtjs/prismic'

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: '/',
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ['@prismicio/vue']
  },

  prismic: {
    endpoint: 'https://louparadou.cdn.prismic.io/api/v2',
    modern: true
  }
};

My versions:

Nuxt: 2
Node.js: 16.14.2

Thanks for helping me :slight_smile:

Vincent

3

Hello @Vincent07,

I was able to reproduce the error with a new Nuxt project. I saw a similar thread on the forum, where you also asked the same question, and I followed the answer provided, but I got the same error still.

I've asked our DevX team about this, and I'll get back to you when I get news.

Thanks,
Racheal.

5

Oh thanks a lot!
I tried to contact Priyanka, but no response yet...

6

Hello @Vincent07,

Yeah, Priyanka is out of office.

I got feedback from the DevX team on this issue; it was some dependencies mismatch; here are two possible fixes (I'd recommend the first one when possible):

Fixing lock file

rm package-lock.json
rm -rf node_modules 
npm install

Basically, wipe your lock file, node_modules, and install it again.

Explicit declaration

npm install --save @prismicio/client@^5 @prismicio/vue@^2

This should force npm to resolve @prismicio/client and @prismicio/vue correctly.

I believe the issue happened because multiple adapters were installed here, and Nuxt 2 is pretty legacy.

And if the ~/slices ... error is there, create a first Slice or add an index.js under ~/slices/index.js with

export const components = {}

Try it out and let me know.

Thanks,
Racheal.

2 Likes
7

This solution works perfectly for me, both on old projects and a brand new Nuxt 2 project! Thank you so much.

8

PERFECT !

Thanks a lot!