-
Notifications
You must be signed in to change notification settings - Fork 200
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Contentful.js doesn't work with Nuxt3 #1233
Comments
I've run into the same issue in an Astro project. Interestingly in my case I only have this issue when building the site, not whilst Vite is running in watch mode. I've played around with the stable and beta version of this package, along with named vs default imports and found this combination to work for me in both dev and production mode: Install the beta version with
Then switch your usage like this - import { createClient } from 'contentful';
+ import contentful from 'contentful';
- export const client = createClient({...});
+ export const client = contentful.createClient({...}); |
What is the difference between the two?
|
Your solution is not working. In short, this is a problem when using contenful.js with Vite. |
I had this same issue. Worked in Dev, but not in Production. Hope this helps someone else.
|
Thanks @fmarcheski! I had to do the same thing, ended up forgetting to post it here. That solution works for me too. |
Any updates on a fix for this? I've tried the suggestions above, but no success. |
Hi @JackEdwardLyons, As far as I can see the import is working fine - the only error I see is expected (no space id and credentials provided, therefore also no entries returned) |
Hi @marcolink thanks for the quick response. I appreciate it. I forked it and bumped the version to the latest RC release, and now it's not loading correctly. If you open the terminal and run Please take a look: https://codesandbox.io/s/small-breeze-5fnx3x Note: I've tested from |
@JackEdwardLyons https://codesandbox.io/s/great-dust-v0oqz8
Not sure what it means? |
Hi @marcolink thanks again, I checked your fork, and set the nuxt verion to the latest RC. I've updated the plugin code and been able to run a build - it's not a full reproduction of the issue I am facing, but at least running https://codesandbox.io/s/stoic-cherry-9jl09s?file=/plugins/contentful.js And just for reference here is the full error from my actual app:
|
Hey @marcolink just want to say thanks for the help and that it's likely a Nuxt/Vite issue or something else on my side. I don't think you need to look into this any more. |
Hey Jack have you found a way to solve this, I am really not getting it to work, I am getting the same error messages. |
@ruriarte-zaelot what version of |
Hey marco thanks for your quick response. I'm using version 9.2.17 |
Ok, that version introduces a fix for ESM builds. |
@marcolink The problem I'm facing is that the way you imported in the sandbox is working for me but only in local. Same problem @thiagorossener was having. When I deploy to dev/production it throws this error.
What worked best for me so far was to use the procedure suggested by @fmarcheski . That is working but only for v10beta, not for v9. |
I am also having this issue in my current application using |
@adi-kumar using nuxt 3.0.0 with contentful v10beta applying the procedure given by @fmarcheski works. |
You don't need to switch to the beta version of contentful to fix this. The beta version seems to have some issues (it didn't respect the Anyway, I solved it like this:
I'm using nuxt 3.2.3 and contentful 9.3.3. |
Cannot find contentful.default.. |
The solution still works for me on nuxt 3.3.1 and contentful 9.3.5. I build the app with If I run the app with |
I had to ignore this with
|
For me, @fmarcheski solution worked like a charm! Thank you. |
I am importing with dev server
build
|
This is a known issue when using Vite for server side rendering a CommonJS module, but it sounds like they're looking into fixing it for Vite 5. This issue thread has more information. One more potential fix would be to import contentful this way:
But then you'll also want to polyfill
|
closing this for now |
It seems they stated it as fixed on the "contentful": "^10.9.3",
"nuxt": "^3.11.2",
"vite": "5.2.11" |
I just wanted to add that we also experienced this issue with Vite and Contentful and were able to resolve it with: https://github.com/cyco130/vite-plugin-cjs-interop |
Expected Behavior
Contentful.js SDK works with Nuxt3 when building for production.
Actual Behavior
When creating a plugin to use Contentful:
It works fine locally when running
npm run dev
.However, when building for production, this happens:
Steps to Reproduce
Create an entry with a "title" field in Contentful.
Create a project using Nuxt3:
npx nuxi init nuxt-app
cd nuxt-app
Install Contentful.js
npm install contentful -D
Create the file
plugins/contentful.js
and add:app.vue
:npm run dev
and see that the title appears as expected.npm run build
, thennpm run preview
. An error 500 occurs, in the log you see:[nuxt] [request error] contentful.createClient is not a function
Context
I'm trying to deploy my application on Netlify.
Environment
Darwin *** 21.3.0 Darwin Kernel Version 21.3.0: Wed Jan 5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_X86_64 x86_64
"contentful": "^9.1.25"
and"nuxt": "3.0.0-rc.1"
The text was updated successfully, but these errors were encountered: