Breaking build after upgrade to contentful 11

[edlerd]

Building a nextjs application after upgrade of contentful from 10.15.1 to 11.0.2 fails due to the below message

Creating an optimized production build ...
Failed to compile.

./node_modules/contentful/dist/contentful.cjs
Module not found: Can't resolve 'fs'

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

Import trace for requested module:
./pages/index.tsx


> Build failed because of webpack errors

After downgrade to 10.15.1 the build is passing. I would like to upgrade, but how to make the build pass? Are you missing to declare the dependency to fs?

Happy to provide more info if needed.

[axe312ger]

We can not declare fs as a dependency, as it is a nodejs module.

You have two options:

1. tell nextjs to use the Contentful SDK only on server side
2. tell your nextjs inject replacement dependencies for nodejs modules.

This stack overflow answer should give you all the details and code snippets you need: https://stackoverflow.com/a/68098547

[axe312ger]

Rollup users might want to use this plugin: nodeResolve({ browser: true, preferBuiltins: false })

[edlerd]

Thanks for the suggestions, they didn't resolve the issue for me. But I found a workaround with the info you provided:

Moving all data loading into getServerSideProps lets the build pass with contentful 11. Previously I was doing that in getInitialProps, which seems to be unsupported since the update.

[axe312ger]

@edlerd depends, getServerSideProps executes on the server, while the other will execute on the browser clients as well. You might have/had issues with your client side bundling.

Glad it works for you now. I would recommend to load data server side as much as you can!