How to integrate with Nuxt (SSR)

[Dodje]

Hi

Is it possible to extend the integration part of guide? It would be really great.

I tried to adapt next.js example, but unfortunately getting an error bellow

./node_modules/strict-event-emitter/lib/Emitter.js 14:10Module parse failed: Unexpected token (14:10)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders|  */| class Emitter {>     events;|     maxListeners;|     hasWarnedAboutPotentialMemortyLeak;./node_modules/strict-event-emitter/lib/MemoryLeakError.js 5:11Module parse failed: Unexpected token (5:11)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders| exports.MemoryLeakError = void 0;| class MemoryLeakError extends Error {>     emitter;|     type;|     count;

[Dodje]

This error doesn't show up if I use version 0.45, but for "msw": "0.49.3", and higher that happens.

Node version - v16.18.1
Nuxt - 2.14.6

[derHodrig]

I can confirm your findings!

Could you explain, do you use the server or browser integration? if Browser, where did you add the start command?
https://mswjs.io/docs/getting-started/integrate/browser#start-worker

[derHodrig]

What about just starting a small express server instead?

My Nuxt Middleware

export default function ({
  app: { i18n, localePath },
  $axios,
  store,
  redirect,
}) {
  return $axios
    .get('api/qsd-utility/is-alive')
    .then(() => {
      if (!store.getters.getServerConnection) {
        store.commit('setServerConnection', true)
        store.commit('setConnectionErrorDialog', { visible: false, text: '' })
      }
    })
    .catch(() => {
      if (store.getters.getServerConnection) {
        store.commit('setServerConnection', false)
        store.commit('setConnectionErrorDialog', {
          visible: true,
          text: i18n.t('error.networkError'),
        })

        redirect(localePath('/utility/maintenance'))
      }
    })
}

So in order to make cypress tests work, i need to mock that backend api request, if i wont work with the correct backend.

After many hours of search, i just think of, what about a simple express server, which "mocks" the request

const express = require('express')
const cors = require('cors')
const app = express()
const port = 44333

app.use(
  cors({
    origin: '*',
  })
)
app.get('/api/qsd-utility/is-alive', (req, res) => {
  res.sendStatus(200)
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Keep in mind, the express server should have the same url as the server or configure your app to use it via env...

downside is, you need to start your fe, express server and cypress; but i think that express start should not be any problem

[Dodje]

I appreciate your help, but if that was an option I wouldn't use this mock library.

The main problem with library that it doesn't work with version "0.49.3" and higher that happens.

[frisch-raphael]

Did anyone have success with integratin msw to nuxt3 ?
I'm getting
" FetchError: _fetch is not a function "
meanwhile useFetch from vueuse is working

[kettanaito]

Hey, @Dodje. Thanks for raising this discussion.

I have no experience with Nuxt to tell you from the top of my head what may be the problem here. Looks like your complier cannot digest some JavaScript syntax shipped in Emitter.js.

Anyhow, I'm preparing a set of new usage examples right now and Nuxt is on my list. Once I get the working example, I will share it on Twitter and, hopefully, here too.

[YUN-RU-TSENG]

Hi, May I ask is there any progress?