Can I use psd.js directly in my browser?

[DominiY]

I use nextjs development project, npm run dev after starting the project, error. 

Module not found: Can't resolve 'fs'

I asked gpt and said it could be solved with a tool like browserify-fs. But I don't know if it's feasible?

[sorbing]

@Eve-node: Yes. Try this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/psd.js/3.4.0/psd.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const PSD = require('psd');
    // ...
});
</script>

[lancejpollard]

@meltingice yes I am getting this with doing import Psd from 'psd' in a Next.js v14 app:

 ⨯ ./node_modules/.pnpm/[email protected]/node_modules/coffee-script/lib/coffee-script/coffee-script.js:114:0
Module not found: Can't resolve 'module'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/.pnpm/[email protected]/node_modules/coffee-script/lib/coffee-script/register.js
./node_modules/.pnpm/[email protected]/node_modules/coffee-script/register.js
./node_modules/.pnpm/[email protected]/node_modules/psd/index.js
./app/[input]/convert/[output]/page.tsx
   automatically enabled Fast Refresh for 2 custom loaders
<w> [webpack.cache.PackFileCacheStrategy] Restoring pack failed from ./mysite/.next/cache/webpack/client-development-fallback.pack.gz: Error: invalid stored block lengths
   automatically enabled Fast Refresh for 2 custom loaders
<w> [webpack.cache.PackFileCacheStrategy] Restoring pack failed from ./mysite/.next/cache/webpack/client-development-fallback.pack.gz: Error: invalid stored block lengths
 ⨯ ./node_modules/.pnpm/[email protected]/node_modules/coffee-script/lib/coffee-script/coffee-script.js:114:0
Module not found: Can't resolve 'module'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/.pnpm/[email protected]/node_modules/coffee-script/lib/coffee-script/register.js
./node_modules/.pnpm/[email protected]/node_modules/coffee-script/register.js
./node_modules/.pnpm/[email protected]/node_modules/psd/index.js
./app/[input]/convert/[output]/page.tsx
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename './mysite/.next/cache/webpack/client-development-fallback/0.pack.gz_' -> './mysite/.next/cache/webpack/client-development-fallback/0.pack.gz'

In the browser it is showing this error:

./node_modules/.pnpm/[email protected]/node_modules/psd/lib/psd.coffee
Module parse failed: Unexpected character ' ' (1:1)
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
> # A general purpose parser for Photoshop files. PSDs are broken up in to 4 logical sections:
| # the header, resources, the layer mask (including layers), and the preview image. We parse
| # each of these sections in order.

So I tried adding this to my next.config.ts:

import withCoffeescript from 'next-coffeescript'

const nextConfig = withCoffeescript({
   ...stuff
})

export default nextConfig

But no go, any ideas?

In trying/using webpack coffee-loader in my nextjs config, I am now getting this error in the browser:

./node_modules/.pnpm/[email protected]/node_modules/psd/lib/psd.coffee
CoffeeScriptError: ./mysite/node_modules/.pnpm/[email protected]/node_modules/psd/lib/psd.coffee:41:5: error: Can't reference 'this' before calling super in derived class constructors
    @file = new File(data)
    ^

Do I need a specific version of coffeescript to compile this for the browser?