You may need an additional loader to handle the result of these loaders. - occurs for useHead

[wattanx]

Environment

---

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 2.16.1
• Nitro Version: 1.0.0
• Package Manager: [email protected]
• Builder: webpack
• User Config: ssr, bridge, head, css, plugins, components, modules, build, serverHandlers, devServerHandlers, devServer, typescript, buildModules
• Runtime Modules: -
• Build Modules: (), @nuxt/[email protected]

---

Reproduction

https://stackblitz.com/edit/nuxt-starter-luqjvz?file=nuxt.config.ts

• npm run dev or npm run build

Describe the bug

The latest nuxt-bridge outputs an error when useHead is used.
"@vueuse/head": "^1.0.25"

ERROR  in ./node_modules/@unhead/dom/dist/index.mjs                  friendly-errors 14:42:18

Module parse failed: Unexpected token (109:15)                        friendly-errors 14:42:18
File was processed with these loaders:
 * ./node_modules/unplugin/dist/webpack/loaders/transform.js
You may need an additional loader to handle the result of these loaders.

It also outputs an error if useHead is not used.

 ERROR  in ./node_modules/iron-webcrypto/dist/index.mjs               friendly-errors 14:42:18

Module parse failed: Unexpected token (144:29)                        friendly-errors 14:42:18
File was processed with these loaders:
 * ./node_modules/unplugin/dist/webpack/loaders/transform.js
You may need an additional loader to handle the result of these loaders.

The following methods can be used to avoid this, albeit temporarily.

// nuxt.config.ts
import { defineNuxtConfig } from '@nuxt/bridge';

export default defineNuxtConfig({
  build: {
    // @ts-ignore
    transpile: ['iron-webcrypto', 'unhead'],
  },
})

Additional context

I think this error is occurring because optional chaining is not available in webpack 4.

Logs

ERROR  in ./node_modules/@unhead/dom/dist/index.mjs                  friendly-errors 14:42:18

Module parse failed: Unexpected token (109:15)                        friendly-errors 14:42:18
File was processed with these loaders:
 * ./node_modules/unplugin/dist/webpack/loaders/transform.js
You may need an additional loader to handle the result of these loaders.
|     renders.push(ctx2);
|     markSideEffect(ctx2, "el", () => {
>       ctx2.$el?.remove();
|       delete head._elMap[ctx2.renderId];
|     });
                                                                      friendly-errors 14:42:18
 @ ./node_modules/@vueuse/head/dist/index.mjs 24:0-68 65:17-30 67:14-36
 @ ./node_modules/@nuxt/bridge/dist/runtime/head/vueuse-head.plugin.mjs
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
                                                                      friendly-errors 14:42:18

 ERROR  in ./node_modules/iron-webcrypto/dist/index.mjs               friendly-errors 14:42:18

Module parse failed: Unexpected token (144:29)                        friendly-errors 14:42:18
File was processed with these loaders:
 * ./node_modules/unplugin/dist/webpack/loaders/transform.js
You may need an additional loader to handle the result of these loaders.
|   const algorithm = algorithms[options.algorithm];
|   const result = {};
>   const hmac = options.hmac ?? false;
|   const id = hmac ? { name: "HMAC", hash: algorithm.name } : { name: algorithm.name };
|   const usage = hmac ? ["sign", "verify"] : ["encrypt", "decrypt"];
                                                                      friendly-errors 14:42:18
 @ ./node_modules/h3/dist/index.mjs 107:0-56 1146:17-21 1146:105-113 1170:17-23 1170:106-114
 @ ./node_modules/@nuxt/bridge/dist/runtime/composables.mjs
 @ ./node_modules/@nuxt/bridge/dist/runtime/app.mjs
 @ ./node_modules/@nuxt/bridge/dist/runtime/head/vueuse-head.plugin.mjs
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

[Suniron]

I got the same error on build (dev is ok).

But, you save my life with this trick: transpile: ['iron-webcrypto', '@unhead'], 😁

Edit: since I upgraded my project to the latest nuxt 2 & nuxt-bridge, I got this error (and hot reload is dead):

EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

[tuan-bui]

Getting the same error and the above change also helped us: transpile: ['iron-webcrypto', '@unhead']

[fisher-zh]

I got the same error on build (dev is ok).

But, you save my life with this trick: transpile: ['iron-webcrypto', '@unhead'], 😁

Edit: since I upgraded my project to the latest nuxt 2 & nuxt-bridge, I got this error (and hot reload is dead):

EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

I have the same error

[psahni]

I got the same error on build (dev is ok).
But, you save my life with this trick: transpile: ['iron-webcrypto', '@unhead'], 😁
Edit: since I upgraded my project to the latest nuxt 2 & nuxt-bridge, I got this error (and hot reload is dead):

EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

I have the same error

I have the same error :(

[pawmanaloto]

I have the same error, adding transpile: ['iron-webcrypto', '@unhead'], doesn't seem to fix the problem. It keeps looping.

[wattanx]

Sorry .
I made a slight mistake with the temporary workaround.
unhead instead of @unhead.

export default defineNuxtConfig({
  build: {
    // @ts-ignore
    transpile: ['iron-webcrypto', 'unhead'],
  },
})

[psahni]

@wattanx
do u have idea about this issue:-
#709

[wattanx]

This problem has been resolved in the latest version. @nuxt/[email protected]
https://stackblitz.com/edit/nuxt-starter-luqjvz?file=package.json

[steve-a-walsh]

@nuxt/bridge3.0.0-28177393.984ce7c

@unhead/vue "1.2.2"

unhead "1.2.2"

I had to use

transpile: ['unhead']

to prevent this same issue.