
This is specifically if you're using [`sharp`](https://github.com/lovell/sharp) in [Next.js](https://nextjs.org/) API endpoints, which [Netlify](https://www.netlify.com/) deploy as [functions](https://docs.netlify.com/functions/overview/). It might be relevant even if you're *not* using Next.js, but I haven't tested this.

Netlify may fail to build, or the build will be successful but the API endpoint will crash/500 when invoked.

I was getting successful builds, but the endpoint would fail, and the Netlify function log would report `Error: Cannot find module 'sharp'` because it seems Netlify excludes this package for Reasons(TM).

[Next.js documentation](https://nextjs.org/docs/messages/sharp-missing-in-production) recommends adding the `NEXT_SHARP_PATH` environment variable:

```bash
NEXT_SHARP_PATH=/tmp/node_modules/sharp
```

But this doesn't affect Netlify functions. Good to have, though.

Another recommendation was to add `sharp` to `external_node_modules` in `netlify.toml`, which explicitly tells Netlify which external modules to include in the bundle:

```text:title=netlify.toml
[functions]
  external_node_modules = ["sharp"]
```

Nice thought, but this didn't change anything for me.

What did work for me was using a package alias to give the `sharp` package a custom name so that it doesn't get filtered out. [This ticket](https://github.com/netlify/next-runtime/issues/1195#issuecomment-1030533349)[1] uses the `yarn` syntax, but the `npm` syntax is similar:

```bash
npm i some-alias@npm:package@version
```

This allowed the package to be found, but the package build was now failing with the error `Module parse failed: Unexpected character '' (1:0)`. I've lost where I found this solution, but adding this to the `webpack` config in `next.config.js` worked for me:

```javascript:title=next.config.js
config.module.rules.push({
    test: /\.node$/,
    use: "node-loader"
});
```

Adjust the syntax to whatever it is you're doing in your webpack config.

Anyway, this took far longer than I would have liked to resolve, hopefully this saves you some time.

---

[1] Further down, another user suggested creating a separate plugin that forcibly includes the `sharp` module. Tried this, didn't work for me.


Deploy sharp with Next.js on Netlify


If you've tried deploying [`node-canvas`](https://github.com/Automattic/node-canvas) on Netlify, you may have encountered a few errors.

## Incompatible Architecture

If you're deploying to Netlify using the CLI and you're not running linux, the errors may involve complaints about incompatible architecture.

`node-canvas` will build its binaries based on the architecture doing the install, so if you're deploying what you built locally (not linux) to Netlify (linux), it will complain. Easiest thing here is to do deploys via the Netlify's auto-deploy or via the UI so that the packages are built on the right architecture.

There's a way to `npm install` forcing the architecture, but at first thought this sounds like it may not run or build locally if it depends on the availability of local libs. Not sure, haven't tried.

## Bundle Size Exceeded

If you're using `node-canvas` in functions you may get a successful build, but see an error to the effect of:

`The function zip XXX.zip size is X MB, which is larger than the maximum supported size of Y MB`

It will then show you the list of large files contributing to this issue, and they'll most likely be `.so` files in the `node-canvas` directory. The biggest offender tends to be `librsvg`.

If you need svg support, I'm sorry.

If you don't need svg support, the good news is that [svg support is optional](https://github.com/Automattic/node-canvas/issues/1954) in `node-canvas`. *You just* have to build it without the modules you don't want.

The bad news is that while there are instructions for how to do this on the `node-canvas` [wiki](https://github.com/Automattic/node-canvas/wiki), getting it going on Netlify is not entirely straight-forward.

If you're building on linux, this may work if you do the custom build locally then deploy via CLI. If you're not using linux, you'll likely encounter the architecture issue above.

One solution I saw was to [use a Docker/multipass instance to build a custom version of `node-canvas`](https://answers.netlify.com/t/node-canvas-error-libuuid-so-1-cannot-open-shared-object-file-no-such-file-or-directory/30179/6) then as part of the build process, copy those files the shared instance folder into `node_modules` before running the app build, but that sounded like a right pain in the derrière.

Some people said that worked for them though, so yay for them.

## My Solution

Use [`pureimage`](https://github.com/joshmarinacci/node-pureimage) instead.

It's not entirely a drop-in replacement for `node-canvas`, but it's close. There are a few quirks, but nothing I haven't got a comparatively straight-forward workaround for, and it beats faffing around with complicated build and deploy strategies.


Server-Side Canvas on Netlify


Let's say you have a web service that you've managed to launch. And let's say you've decided to separate the marketing content from the application because you want to be able to deploy updates to the marketing copy without having to redeploy the whole application.

You now have two sites set up on Netlify: `https://www.myshiny.com` for the marketing content, and `https://app.myshiny.com` for the application.

But say your application generates some pages that are publicly visible, and you want these to be accessible through the marketing site. For example, your app might result in user generated pages like `https://app.myshiny.com/@username`, but wouldn't it look much better if it was accessible via `https://www.myshiny.com/@username` instead?

Provided both sites are under the same team in Netlify, you can set up proxy redirects.

In the marketing site `netlify.toml` (or in the equivalent syntax for `_redirects`) create redirect directives for the paths you want proxied:

```text:title=netlify.toml
[[redirects]]
  from = "/@*"
  to = "https://app.myshiny.com/@:splat"
  status = 200
  force = true
```

The trick with this is that all your assets for your proxied application pages will also use the marketing page url so the application will need to be updated to include the app domain as the URL prefix.

### `create-react-app`

In CRA, it should just be a matter of explicitly setting `PUBLIC_URL` to the application domain. If you have `i18n` set up, your translation paths also need to have the `PUBLIC_URL` prepended. With `react-i18next`, this may mean updating the `backeend.loadPath`.

### NextJS

In NextJS, `next.config.js` will need to have:

```javascript:title=next.config.js
assetPrefix: "https://app.myshiny.com",
images: {
  ...
  path: 'https://app.myshiny.com/_next/image',
},
```

## Limitations

As I mentioned before, both sites need to be under the same team on Netlify. There are other limitations but you can see what they are in Netlify's documentation below.

## See also

* [Netlify: Rewrites and proxies](https://docs.netlify.com/routing/redirects/rewrites-proxies/)


Proxy redirect parts of one Netlify site to another.

3 posts tagged “netlify”

Deploy sharp with Next.js on Netlify

Server-Side Canvas on Netlify

Proxy Redirect Netlify Sites