Transpile nuxt2 module

[maartenvanhunsel]

I'm creating a nuxt module for both: nuxt2 and nuxt3. However I'm having some trouble by building a nuxt2 project by using nuxt generate. The module is using the OhMyFetch module which is not transpiled. Does anyone know what I have to do to get this fixed? I'm getting these kind of import errors:

Basically what I do is the following:

1. I do use the https://github.com/nuxt/module-builder template.
2. The build nuxt-module-build is going correctly and all files are generated.
3. At this point I use npm publish for github package registry
4. When adding the (build)module I'm getting some node-fetch / ohmyfetch related errors:

Can't resolve 'node:buffer' Can't resolve 'node:http' ...

Also I do have tried the build.transpile: ['module-name] config. Any thoughts? Thanks 😄

[danielroe]

Perhaps try adding ohmyfetch to the transpile array as well?

[maartenvanhunsel]

@danielroe Doesn't seem to work

build.transpile: ['ohmyfetch', 'destr', 'ufo', '@maartenvanhunsel/nuxt-statamic'],
"ohmyfetch": "^0.4.15",

log.md

[BrandonlinU]

I have the same problem months ago, when I found ohmyfetch, and the error was because the particular import of Webpack in Nuxt2: The ohmyfetch package expose 4 types of bundles depending of the import mode (if it was from a ES module or a CJS module) and the environment (if it was for Node or for the browser), but I don't know why Webpack or Nuxt can't understand the dynamic import of the module. If you want to import ohmyfetch in a module for Nuxt2 you need to split your imports in 2 plugins: one that imports the CJS file directly and one server plugin that imports the polyfills needed for Node (just like in the @nuxt/http) module.

[joffreyBerrier]

Hi @BrandonlinU do you have an example of that :D ?

[danielroe]

What is your node version?

[joffreyBerrier]

Hi @danielroe
node version : 16.15.1

I have tried with the last one : 16.17.0 same error

There is my plugin api file : https://gist.github.com/joffreyBerrier/cd5c8c0a4fd7fa1db78fbcb442098269

Error when i have added ohmyfetch on nuxt.config.js

• transpile: ['vee-validate/dist/rules', 'ohmyfetch'],

Without :

Thx

[joffreyBerrier]

Any idea @danielroe ? :)

[danielroe]

It's hard to say without a minimal reproduction.

[joffreyBerrier]

Hi @danielroe there is an example 🙏
https://github.com/joffreyBerrier/nuxt-ohmyfetch

[danielroe]

I'm afraid this is a known bug in webpack 4 which was resolved in webpack 5.

You can work around it like this, as we do in Bridge:

https://stackblitz.com/edit/github-vtace5?file=nuxt.config.js

https://github.com/nuxt/bridge/blob/2dfed6aa69a60999d581d4d0ec71ea80bc478e51/src/app.ts#L89-L102

[joffreyBerrier]

OMG thanks a lot @danielroe you are a King ! 👑
Do we agree that I can push my app in production without problem with webpack 5 ?

[danielroe]

I am reluctant to dispense such unlimited agreement 😜

But I don't believe webpack 5 has this issue.

[joffreyBerrier]

Thx a lot 🙏

[NozomuIkuta]

Since there is a workaround for the issue, I will close this issue for now.
Please reopen it as needed.