Nuxt 3 + Prismic setup

Developing with Prismic
1

Hello, I am trying to set up Nuxt 3 project with Prismic.

I have created Nuxt 3 project following the official documentation. This is all good.

After setting up my Nuxt 3 project I have tried to add Prismic following the official documentation.

After adding Prismic I get this error in the console:

Uncaught SyntaxError: The requested module '/_nuxt/node_modules/escape-html/index.js?v=0aa5fa94' does not provide an export named 'default'

I have tried tinkering with versions of Nuxt and Prismic but to no avail. The whole project so far is almost barebones. There are dependencies for styles and SVG only.

Any help would be much appreciated.

3

Hi @andrea ,

Welcome to the community!

I've reached out to our team about this, but they weren't able to reproduce the error. So we'll need more details about your setup (node version, package.json , nuxt.config.ts , etc.) and/or a reproduction project.

Thanks.

4

As I mentioned, the whole project is basically barebones as I have just created it following the official documentation.

package.json is now using the latest version, i.e. 3.0.0-rc.12 but I have tried almost every version.

I went to StackBlitz to create a new project and have the same error in the console: Nuxt - Starter (forked) - StackBlitz

Thank you for quick reply and hope the below code will help find a solution.

node version: v16.14.2

package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/prismic": "^3.0.0-rc.1",
    "@types/node": "^18.8.0",
    "nuxt": "^3.0.0-rc",
    "sass": "^1.55.0",
    "sass-loader": "^13.1.0",
    "vite-svg-loader": "^3.6.0"
  }
}

nuxt.config.ts

// https://v3.nuxtjs.org/api/configuration/nuxt.config
import { defineNuxtConfig } from "nuxt";
import svgLoader from "vite-svg-loader";

export default defineNuxtConfig({
  modules: ["@nuxtjs/prismic"],
  css: ["@/assets/css/style.scss"],
  vite: {
    plugins: [
      svgLoader({
        svgoConfig: {
          plugins: [
            {
              name: "preset-default",
              params: {
                overrides: { removeViewBox: false },
              },
            },
          ],
        },
      }),
    ],
  },
  prismic: {
    endpoint: "https://motoplus-ikica.prismic.io/api/v2",
  },
});
5

Thanks for promptly providing a reproduction :slight_smile:

Alright, so the team thinks it's an issue within Nuxt/Vite transpile pipeline that cannot be quick-fixed on our end (We tried explicitely asking Nuxt to transpile escape-html without success), few things:

  • Error seems non-blocking, so it should not block you in your development process.
  • The error fades away as soon as they start using Prismic features with "usePrismic()" (We guess Nuxt/Vite finally picks up they need to transpile escape-html at that point)

But tl;dr; ignore the error and start using Prismic, fair reminder that Nuxt 3 is still not fully stable.

1 Like
6

Hi,
for me this is blocking. As soon as this error comes the whole page stops loading.
Can you please try to figure out a workaround ?

I also tried with adding escape-html to transpile in nuxt.config.js or with adding escape-html to the exclude of buildDeps in vite. Both did not work.

BR,
Sven

7

Everybody who is landing here because of Nuxt 3 and prismic and the error mentioned above

Uncaught SyntaxError: The requested module '/_nuxt/node_modules/escape-html/index.js' does not provide an export named 'default'

Add to your nuxt.config.js

vite: {
    optimizeDeps: {
      include: ['escape-html'],
    },
  },

This actually solved the issue for me.

BR,
Sven

3 Likes