Warnings and errors when trying to use with nuxt3

[raducretu]

WARN @storyblok/nuxt is incorrectly packaged. Please contact the package author to fix. 13:04:49

node_modules/@storyblok/nuxt/composables/dist/composables.es.js:1:27: error: Could not resolve "#app" (mark it as external to exclude it from the bundle) 1 │ import { useNuxtApp } from "#app";

[raducretu]

Also useStoryApi is not auto imported

[samuells]

he @raducretu thx for creating issue report @alexjoverm will take look on it. 🙏🏼

[raducretu]

wow @samuells this was fast :) didn't expected it, but that is why I recommend Storyblok to my customers 👍

[awacode21]

i am dealing with the same problem, unable to run the project because of this error. So i cannot use nuxt 3 with storyblok

WARN  @storyblok/nuxt doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

 > node_modules/@storyblok/nuxt/composables/dist/composables.es.js:1:27: error: Could not resolve "#app" (mark it as external to exclude it from the bundle)
    1 │ import { useNuxtApp } from "#app";
      ╵                            ~~~~~~


 ERROR  9:35:49 PM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@storyblok/nuxt/composables/dist/composables.es.js:1:27: error: Could not resolve "#app" (mark it as external to exclude it from the bundle)
    at failureErrorWithLog 
    [...]

at the same time i get an additional console error:

[raducretu]

I have switched to the javascript plain client untill this gets fixed to move along. I recommend the same

[awacode21]

@raducretu do you mean this one? https://github.com/storyblok/storyblok-js-client

[raducretu]

@awacode21 yes, just create a simple composable and that’s it, if you need I can share mine

[awacode21]

@raducretu that would be very helpful if you could share yours. I just started with Nuxt 3 and Storyblok and i'm struggling a bit.

[raducretu]

Hi @awacode21, Create a file useStoryApi.js in the composables with the following:

import RichTextResolver from 'storyblok-js-client/dist/rich-text-resolver.es'
export default () => {
    const base = 'https://api.storyblok.com/v1/cdn/'
    const setOptions = (options) => {
        let out = [
            {
                key: 'token',
                value: 'xxxxxxxxx'
            }
        ]
        for( let key in options ){
            if( options.hasOwnProperty(key) ){
                out.push({ key, value: options[key] })
            }
        }
        return out.map( ({key, value}) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}` ).join('&')
    }
    const Storyblok = (path, options) => `${base}${path}?${setOptions(options)}`
    const resolver = new RichTextResolver()
    const html = data => resolver.render(data)
    return {
        Storyblok, html
    }
}

The you can use the it in any page or component, as they are auto-imported as follows:

const { Storyblok } = useStoryApi()
const main_navigation = await $fetch(Storyblok("stories/system/main-navigation", {
  version: "draft",
  resolve_relations: 'menu-item.collection,menu-item.banner'
}));

Also you can import the html() method to render RickText content

[codeflorist]

the problems seem to come from vite, which nuxt3 uses as the default bundler, since if of one sets vite: false in the nuxt.config.ts, which results in nuxt using webpack as it's bundler, none of the errors occur.

there is however a different problem using webpeck with nuxt3 currently. see here for description and current workaround: https://github.com/nuxt/nuxt.js/issues/13052

[n-d-r-d-g]

In my case, switching vite to false results in other errors. I managed to fix the error @codeflorist mentioned but other errors pop up, which I don't feel comfortable fixing, since it's meant to only be a temporary workaround.

This is the error I get in the terminal:

node_modules/@storyblok/nuxt/composables/dist/composables.es.js:1:27: error: Could not resolve "#app" (mark it as external to exclude it from the bundle) 1 │ import { useNuxtApp } from "#app";

[vite] error while updating dependencies: Error: Build failed with 1 error: node_modules/@storyblok/nuxt/composables/dist/composables.es.js:1:27: error: Could not resolve "#app" (mark it as external to exclude it from the bundle) at failureErrorWithLog (node_modules/esbuild/lib/main.js:1493:15)

Everything was working perfectly before I ran npx nuxi upgrade. When I deleted package-lock.json and node-modules, then changed the nuxt3 devDependency back to the previous version, it was still broken. Can anyone tell me which @storyblok/nuxt and nuxt3 versions you are using if it is working on your end? Is it possible that something else got upgraded when I ran the upgrade command? I know it seems silly but I was developing locally with no connected repo and it's impossible for me to find out what changed.

[awacode21]

Hi @awacode21, Create a file useStoryApi.js in the composables with the following:

import RichTextResolver from 'storyblok-js-client/dist/rich-text-resolver.es'
export default () => {
    const base = 'https://api.storyblok.com/v1/cdn/'
    const setOptions = (options) => {
        let out = [
            {
                key: 'token',
                value: 'xxxxxxxxx'
            }
        ]
        for( let key in options ){
            if( options.hasOwnProperty(key) ){
                out.push({ key, value: options[key] })
            }
        }
        return out.map( ({key, value}) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}` ).join('&')
    }
    const Storyblok = (path, options) => `${base}${path}?${setOptions(options)}`
    const resolver = new RichTextResolver()
    const html = data => resolver.render(data)
    return {
        Storyblok, html
    }
}

The you can use the it in any page or component, as they are auto-imported as follows:

const { Storyblok } = useStoryApi()
const main_navigation = await $fetch(Storyblok("stories/system/main-navigation", {
  version: "draft",
  resolve_relations: 'menu-item.collection,menu-item.banner'
}));

Also you can import the html() method to render RickText content

thanks for sharing, clean solution :-) you helped me a lot!

[samuells]

All of you thx! @alexjoverm will add a little bit more light on it. In any case, we are aware of it atm and we would still recommend using Nuxt 2 for the production projects and Nuxt 3 for experimenting till it is properly stable. Anyway we are working on 5min tutorial with Nuxt 3.

I will notice also @alexjoverm (he is traveling a little) to check again this thread if we are missing something. Cheers

[alexjoverm]

Hi all! Let me give some info about the issue.

@codeflorist as I've tried in Webpack mode (vite: false in nuxt.config.js) works fine by Nuxt CLI v3.0.0-27338323.1e98259.

For the #app issue, seems like not only this package is affected, because as soon as I comment that line out in our composables file, Nuxt starts error the same for its internals:

I've opened an issue on Nuxt side since this wasn't happening before: https://github.com/nuxt/nuxt.js/issues/13129

[estudiooka]

Temporary solution :

just copy the composables from the package to your composables folder inside your nuxt 3 project

You might also need to change the useRouter inside the useStoryBrige, or you can just remove it and use window.location.reload() and everything works nice.

[awacode21]

@raducretu one question left, with your work around, how did you handle the v-editable directive?

[estudiooka]

@raducretu one question left, with your work around, how did you handle the v-editable directive?

It works as expect with @storyblok/nuxt plugin. I am loading the plugin, just not importing the composables. Also the rich text works fine.

$storyapi.richTextResolver.render(blok.body)

[alvarosabu]

Reproduction link: https://stackblitz.com/edit/github-mtfdou?file=nuxt.config.ts module works ok but has error on console

Seems something it's broken between Nuxt3 using Vite.

Nuxt project info: 

------------------------------
- Operating System: `Linux`
- Node Version:     `v14.16.0`
- Nuxt Version:     `3.0.0-27356801.e9128f3`
- Package Manager:  `[email protected]`
- Bundler:          `Vite`
- User Config:      `buildModules`
- Runtime Modules:  `-`
- Build Modules:    `@storyblok/[email protected]`
------------------------------

[mmeindl]

i am dealing with the same problem, unable to run the project because of this error. So i cannot use nuxt 3 with storyblok

WARN  @storyblok/nuxt doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

 > node_modules/@storyblok/nuxt/composables/dist/composables.es.js:1:27: error: Could not resolve "#app" (mark it as external to exclude it from the bundle)
    1 │ import { useNuxtApp } from "#app";
      ╵                            ~~~~~~


 ERROR  9:35:49 PM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@storyblok/nuxt/composables/dist/composables.es.js:1:27: error: Could not resolve "#app" (mark it as external to exclude it from the bundle)
    at failureErrorWithLog 
    [...]

at the same time i get an additional console error:

I have a similar problem and was playing around a bit. After a new and clean nuxt3 and @storyblok/nuxt installation I don't get any errors/warnings when calling localhost. But after installing tailwindcss I get a storyblok warning, which is quite weird:

Maybe this helps someone debugging this.

[estudiooka]

I have a similar problem and was playing around a bit. After a new and clean nuxt3 and @storyblok/nuxt installation I don't get any errors/warnings when calling localhost. But after installing tailwindcss I get a storyblok warning, which is quite weird:

Maybe this helps someone debugging this.

You can fix the error with the temporary solution posted above. The warning can be fixed with the workaround posted by "codeflorist"

With nuxt 3 is better, for now ,use windicss than tailwind.

But if you need a stable solution the best is to sticky with nuxt2 as nuxt3 still in beta , lot of similar issues will come as you install libraries.

[Baroshem]

In my case, Storyblok module was working with the error in the console, however, I had other modules in the project that stopped working after adding Storyblok (tested it several times and unfortunately it was the error of Storyblok module that was stopping other modules to work correctly).

I tested some configuration options and finally made it to work. I have added a build.transpile option to transpile '#app' (I am not sure if it won't break other places unfortunatelly :( )

My nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  build: {
    transpile: ['#app']
  },
  buildModules: [
    ['other-module', {
        // options
    }],
    ['@storyblok/nuxt', {
      accessToken: process.env.STORYBLOK_ACCESS_TOKEN
    }]
  ],
})

After that change, there is only a warning in the console, but both modules are working correctly. Hope it will help 😃

[raducretu]

Sorry for my late answer. I'm not using that now, I just wanted a quick solution to move the project further and hopefully the official fixed version will come out eventually and swap that out.

[hessel-bb]

@Baroshem The transpile worked like a charm, thanks for the solution.

[codeflorist]

Everything is working for me now without any workarounds on Nuxt v3.0.0-rc.4 and @storyblok/nuxt v4.0.1 except the following warning, that is shown on nuxi build and nuxi generate:

WARN  @storyblok/nuxt doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

it doesn't seem to have any negative side-effects though.

[alvarosabu]

I will close this due to inactivity and since should be already fixed in the latest version. If you feel it should be reopened and it's still a pain point, feel free to re-open