transformers.js icon indicating copy to clipboard operation
transformers.js copied to clipboard

Next.js Support

Open chelouche9 opened this issue 3 years ago • 13 comments

Hi @xenova,

Thanks again for all the hard work and this amazing library. I am trying to make it work on Next.js. Everything works fine but when I build (static site generation) and I run the website, I get weird errors. I think they might be related to webpack.

This is the error: Uncaught SyntaxError: Label 'r' has already been declared

I am using next.js 13.2.4

I have seen you made some commits to fix Jimp on Next.js do you have an example how to use it?

chelouche9 avatar Mar 18 '23 15:03 chelouche9

@xenova by the way, do you have any contributors' guidelines? I would be happy to help with this :)

chelouche9 avatar Mar 18 '23 15:03 chelouche9

Open F12/devtools and copy the rest of the error or make a screenshot, that gives it more context and makes it easier to fix.

kungfooman avatar Mar 18 '23 15:03 kungfooman

Hope this is helpful since it is after the build. Screenshot 2023-03-18 at 17 54 30

chelouche9 avatar Mar 18 '23 15:03 chelouche9

Can't you click on it? For dev purposes, it shouldn't be minified either, it just makes debugging a hell.

kungfooman avatar Mar 18 '23 16:03 kungfooman

It's only minified once I build and export it as a static website. Before that when I use 'npm run dev' and files are served not statically everything works fine.

Also, I see you last published to NPM a day ago maybe the new commits solved it.

chelouche9 avatar Mar 18 '23 16:03 chelouche9

Hi! Thanks for the issue. I actually just pushed a fix for this: https://github.com/xenova/transformers.js/commit/dfac119bc1a2667c4609cc82cc3c2d7d3eb5bbe8

I just haven't made a release yet since I was waiting for some feedback from someone.

However, I will publish a new package now with the new changes :+1:

xenova avatar Mar 18 '23 16:03 xenova

@xenova by the way, do you have any contributors' guidelines? I would be happy to help with this :)

I haven't written any yet (mainly because I didn't expect the library to blow up like this haha). For the meantime, any type of contributions (in any format) will be greatly appreciated!

xenova avatar Mar 18 '23 16:03 xenova

I just published v1.2.6: https://www.npmjs.com/package/@xenova/transformers

Can you check if it works? :)

xenova avatar Mar 18 '23 16:03 xenova

@xenova it still didn't work. But I found a solution, apparently because of the minify function of next.js and webpack.

I added this to the next.config.js on next.js version 13:

/** @type {import('next').NextConfig} */
const nextConfig = {
  swcMinify: false,
};

chelouche9 avatar Mar 18 '23 17:03 chelouche9

@xenova it still didn't work. But I found a solution, apparently because of the minify function of next.js and webpack.

I added this to the next.config.js on next.js version 13:

/** @type {import('next').NextConfig} */
const nextConfig = {
  swcMinify: false,
};

Hmmm, how strange. I don't see how minifying would break things. Could you perhaps post the error message (un-obfuscated)?

Some google searching says that it might be a caching issue? https://stackoverflow.com/a/67659159

xenova avatar Mar 18 '23 17:03 xenova

I tried to use webpack source map but it didn't work for some reason.

I did some research and next.js integrated a new compiler swc which is doing the modification. What I did in the configuration is changing to another minifier called Terser - https://nextjs.org/docs/advanced-features/compiler#minification

chelouche9 avatar Mar 18 '23 18:03 chelouche9

Some google searching says that it might be a caching issue? https://stackoverflow.com/a/67659159

Tried that already lol 🤣

chelouche9 avatar Mar 18 '23 18:03 chelouche9

Hmm - that's odd 👀 . So, is your problem solved (for the most part, at least)?

Once I finish what I am currently working on (cough whisper timestamps cough), I will try to look into it a bit more :)

xenova avatar Mar 18 '23 18:03 xenova

@xenova yes, on my end it is fixed :)

chelouche9 avatar Mar 20 '23 07:03 chelouche9