Comments (15)
Just switched to v16.17.0 to test it, but the issue still remains.
My env keys are set up the same way. Content Delivery Key and Space ID, and blogPost for the content key.
My tags match yours as well.
I've a single test post as well.
from tech-blog-vue3-nuxt3.
Update:
I just tried a fresh install using yarn, as I was using npm earlier. However the problem remains.
yarn -v => 1.22.19
and node -v => v16.17.0
Steps:
git clone --depth=1 https://github.com/longrun/tech-blog-vue3-nuxt3 ./techblog-2
cd .\techblog-2\
yarn install
cp .env.template .env
vim .env
Then, I ran:
λ yarn dev
Nuxt CLI v3.0.0-rc.6 21:19:16
21:19:22
> Local: http://localhost:3000/
> Network: http://172.31.160.1:3000/
> Network: http://192.168.56.1:3000/
> Network: http://192.168.36.2:3000/
> Network: http://192.168.0.63:3000/
i Vite client warmed up in 3789ms 21:19:29
i Vite server warmed up in 618ms 21:19:31
√ Vite server built in 4133ms 21:19:35
√ Nitro built in 1003 ms nitro 21:19:36
You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
[warn] [nuxt] Some plugins are not exposing a function and skipped: [
{
manual: undefined,
disableWorkerMessageHandler: undefined,
util: {
encode: [Function: encode],
type: [Function: type],
objId: [Function: objId],
clone: [Function: deepClone],
getLanguage: [Function: getLanguage],
setLanguage: [Function: setLanguage],
currentScript: [Function: currentScript],
isActive: [Function: isActive]
},
languages: {
plain: {},
plaintext: {},
text: {},
txt: {},
extend: [Function: extend],
insertBefore: [Function: insertBefore],
DFS: [Function: DFS],
markup: [Object],
html: [Object],
mathml: [Object],
svg: [Object],
xml: [Object],
ssml: [Object],
atom: [Object],
rss: [Object],
css: [Object],
clike: [Object],
javascript: [Object],
js: [Object]
},
plugins: {},
highlightAll: [Function: highlightAll],
highlightAllUnder: [Function: highlightAllUnder],
highlightElement: [Function: highlightElement],
highlight: [Function: highlight],
tokenize: [Function: tokenize],
hooks: { all: [Object], add: [Function: add], run: [Function: run] },
Token: [Function: Token] { stringify: [Function: stringify] }
}
]
[nitro] [dev] [unhandledRejection] TypeError: Cannot read properties of undefined (reading 'fields')
at file:///C:/ashbeats/software-source-codes/2022-projects/techblog-2/.nuxt/dist/server/server.mjs:9344:320
at Module.ssrRenderList (C:\ashbeats\software-source-codes\2022-projects\techblog-2\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:915:13)
at _sfc_ssrRender (file:///C:/ashbeats/software-source-codes/2022-projects/techblog-2/.nuxt/dist/server/server.mjs:9343:25)
at renderComponentSubTree (C:\ashbeats\software-source-codes\2022-projects\techblog-2\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:253:13)
at C:\ashbeats\software-source-codes\2022-projects\techblog-2\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:185:29
at processTicksAndRejections (node:internal/process/task_queues:96:5)
[nuxt] [request error] Cannot read properties of undefined (reading 'fields')
at /C:/ashbeats/software-source-codes/2022-projects/techblog-2/.nuxt/dist/server/server.mjs:9344:320
at Module.ssrRenderList (C:\ashbeats\software-source-codes\2022-projects\techblog-2\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:915:13)
at _sfc_ssrRender (/C:/ashbeats/software-source-codes/2022-projects/techblog-2/.nuxt/dist/server/server.mjs:9343:25)
at renderComponentSubTree (C:\ashbeats\software-source-codes\2022-projects\techblog-2\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:253:13)
at C:\ashbeats\software-source-codes\2022-projects\techblog-2\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:185:29
at processTicksAndRejections (node:internal/process/task_queues:96:5)
(node:9940) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 1)
(Use `node --trace-warnings ...` to show where the warning was created)
[nitro] [dev] [unhandledRejection] TypeError: Cannot read properties of undefined (reading 'fields')
at file:///C:/ashbeats/software-source-codes/2022-projects/techblog-2/.nuxt/dist/server/server.mjs:9344:320
at Module.ssrRenderList (C:\ashbeats\software-source-codes\2022-projects\techblog-2\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:915:13)
at _sfc_ssrRender (file:///C:/ashbeats/software-source-codes/2022-projects/techblog-2/.nuxt/dist/server/server.mjs:9343:25)
at renderComponentSubTree (C:\ashbeats\software-source-codes\2022-projects\techblog-2\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:253:13)
at C:\ashbeats\software-source-codes\2022-projects\techblog-2\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:185:29
at processTicksAndRejections (node:internal/process/task_queues:96:5)
[nuxt] [request error] Cannot read properties of undefined (reading 'fields')
at /C:/ashbeats/software-source-codes/2022-projects/techblog-2/.nuxt/dist/server/server.mjs:9344:320
at Module.ssrRenderList (C:\ashbeats\software-source-codes\2022-projects\techblog-2\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:915:13)
at _sfc_ssrRender (/C:/ashbeats/software-source-codes/2022-projects/techblog-2/.nuxt/dist/server/server.mjs:9343:25)
at renderComponentSubTree (C:\ashbeats\software-source-codes\2022-projects\techblog-2\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:253:13)
at C:\ashbeats\software-source-codes\2022-projects\techblog-2\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:185:29
at processTicksAndRejections (node:internal/process/task_queues:96:5)
(node:9940) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 2)
from tech-blog-vue3-nuxt3.
@y-takebe Thanks for replying.
Yes. All the fields have content.
It works when I hit the api directly in a test file.
// test-api.js
require('dotenv').config()
const { CONTENTFUL_SPACE_ID, CONTENTFUL_ACCESS_TOKEN, CONTENTFUL_CONTENT_KEY } = process.env;
const contentful = require("contentful");
const client = contentful.createClient({
space: CONTENTFUL_SPACE_ID,
accessToken: CONTENTFUL_ACCESS_TOKEN
});
client
.getEntries({
content_type: CONTENTFUL_CONTENT_KEY,
})
.then(entry => console.log(JSON.stringify(entry.items, null, 2 )))
.catch(err => console.log(err));
Output:
[
{
"metadata": {
"tags": [
{
"sys": {
"type": "Link",
"linkType": "Tag",
"id": "culture"
}
}
]
},
"sys": {
"space": {
"sys": {
"type": "Link",
"linkType": "Space",
"id": "0ksykyejmkrc"
}
},
"id": "zSzHf5KqlBInLSLGdj5jV",
"type": "Entry",
"createdAt": "2022-08-29T15:10:37.913Z",
"updatedAt": "2022-08-30T05:34:26.169Z",
"environment": {
"sys": {
"id": "master",
"type": "Link",
"linkType": "Environment"
}
},
"revision": 3,
"contentType": {
"sys": {
"type": "Link",
"linkType": "ContentType",
"id": "blogPost"
}
},
"locale": "en-US"
},
"fields": {
"title": "Sample Blogpost",
"articleBody": "# This is some content\n\nThis is some body test. \n\n- apple\n- pear\n- chair",
"slug": "sample-page",
"coverArt": {
"metadata": {
"tags": []
},
"sys": {
"space": {
"sys": {
"type": "Link",
"linkType": "Space",
"id": "0ksykyejmkrc"
}
},
"id": "6hIvJoeUtGUYiWUPZNRGkt",
"type": "Asset",
"createdAt": "2022-08-29T13:35:42.791Z",
"updatedAt": "2022-08-29T13:35:42.791Z",
"environment": {
"sys": {
"id": "master",
"type": "Link",
"linkType": "Environment"
}
},
"revision": 1,
"locale": "en-US"
},
"fields": {
"title": "Media One",
"description": "Some Description",
"file": {
"url": "//images.ctfassets.net/0ksykyejmkrc/6hIvJoeUtGUYiWUPZNRGkt/707f16fc3e7c15f914a6ad562514919e/ID-01484Q.jpg",
"details": {
"size": 57380,
"image": {
"width": 870,
"height": 420
}
},
"fileName": "ID-01484Q.jpg",
"contentType": "image/jpeg"
}
}
}
}
}
]
from tech-blog-vue3-nuxt3.
@y-takebe no worries. :) I'm getting familiar with contentful while debugging this.
So the problem still happens on the container.
This is the Dockerfile:
FROM node:16
RUN yarn --version
RUN apt-get -y update
RUN apt-get -y install git
WORKDIR /usr/src/app
RUN git clone --depth=1 https://github.com/longrun/tech-blog-vue3-nuxt3 .
RUN yarn install
COPY .env ./
EXPOSE 3000
CMD [ "yarn", "dev" ]
To use:
docker build . -t <your username>/tech-blog-vue3-nuxt3
docker run -p 3000:3000 <your username>/tech-blog-vue3-nuxt3
Let me know if you can see anything on your end. Hope this helps.
from tech-blog-vue3-nuxt3.
@y-takebe build and start both yield the same results.
Got a feeling it might be related to ssrRender
. This could be related.
vuejs/core#3660
Update:
Steps I took to get to this stage:
- added
"resolutions": { "resolve": "1.20.0" }
to package.json and installed. - Rebuilt it without ssr.
And i got it to load in the browser.
So, now, after stepping through the code, it stems from the data field being empty.
from tech-blog-vue3-nuxt3.
@y-takebe still having the same issue. Let me take a look tonight. I'll test it on a cloud instance.
from tech-blog-vue3-nuxt3.
Hi, Ash!
Thanks for the question.
First, set the Delivery API Key
for the CONTENTFUL_ACCESS_TOKEN.
And set the CONTENT TYPE ID
for the CONTENTFUL_CONTENT_KEY.
Next is the NavBar error, but it doesn't occur in my environment.
I think it's the version of Node. What version are you using? I'm on Node v16.17.0.
Thanks!
from tech-blog-vue3-nuxt3.
Thanks for sharing the update information.
I tried the exact same procedure and did not encounter any errors in my environment.
I think it means that I am not getting the fields
that I actually want to be present in Contentful.
Could you please check to see if all the fields actually have values in them?
from tech-blog-vue3-nuxt3.
I pushed #68, so can you clone the latest code and try again?
- Fixed a bug in the await code.
- Updated packages.
from tech-blog-vue3-nuxt3.
@y-takebe Sorry. I'm having the same issue, plus an additional error.
Steps:
git fetch
git pull
yarn install
yarn dev
Returns:
Nuxt CLI v3.0.0-rc.8 14:18:07
14:18:33
> Local: http://localhost:3000/
> Network: http://172.31.160.1:3000/
> Network: http://192.168.56.1:3000/
> Network: http://192.168.36.2:3000/
> Network: http://192.168.6.100:3000/
i Vite server warmed up in 1510ms 14:18:49
i Vite client warmed up in 9907ms 14:18:51
√ Vite server built in 5615ms 14:18:54
ERROR [worker reload] [worker init] The requested module 'file://C:/ashbeats/software-source-codes/2022-projects/techblog-2/node_modules/vue-bundle-renderer/dist/index.mjs' does not provide an ex
port named 'createRenderer'
import { createRenderer } from 'C:/ashbeats/software-source-codes/2022-projects/techblog-2/node_modules/vue-bundle-renderer/dist/index.mjs';
^^^^^^^^^^^^^^
SyntaxError: The requested module 'C:/ashbeats/software-source-codes/2022-projects/techblog-2/node_modules/vue-bundle-renderer/dist/index.mjs' does not provide an export named 'createRenderer'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:533:24)
at async loadESM (node:internal/process/esm_loader:91:5)
at async handleMainPromise (node:internal/modules/run_main:65:12)
√ Nitro built in 1129 ms
I'll try again on a docker container later tonight to see if the problem persists. If it persists, then I'll be able to share the container with you to reproduce on your end.
from tech-blog-vue3-nuxt3.
Sorry #68 didn't solve your problem!
Wait for the results to see if Container solves your problem.
from tech-blog-vue3-nuxt3.
Thanks for the Dockerfile.
Bad news. My Docker container did not error out.
And good news: I added an assert plugin in #70.
It will step through to see where the anomaly is and dump the object to the console if there is a problem.
I hope you will give it a try!
from tech-blog-vue3-nuxt3.
@y-takebe that's really weird yea. then the issue probably lies outside the repo's build processes.
Is there anything else I need to setup over at Contentful?
Could you share your yarn version?
from tech-blog-vue3-nuxt3.
I have tried both versions of yarn, 1.22.19 and 3.2.3, and have not experienced any problems.
And I can't think of any special setup about Contentful either.
Does yarn build
-> yarn start
have the same result?
Thanks!
from tech-blog-vue3-nuxt3.
Thanks for the additional info!
And detailed screenshots, appreciated.
I have pushed #71 and #72.
Maybe #72 will solve the problem, so please give it a try that latest main branch.
from tech-blog-vue3-nuxt3.
Related Issues (20)
- Development server fails to start HOT 2
- Can't access sub pages after yarn generated HOT 1
- Static image is not visible with static mode (ssg) HOT 1
- Article section generated by contentful is hidden on the Production environment HOT 1
- Determine the license
- Implement initial features
- Load tags from contentful
- add style lint
- add lint reviewdog on github actions
- optimize of large size images
- Repair breaking mobile layout
- Implement v0.2.0 features
- Set OGP properties
- tune-up for Lighthouse
- Lighthouse perfect score
- Category is broken
- Setting up Nuxt3 + Contentful on dev/production HOT 4
- Broken layout if use code block in markdown (only mobile) HOT 1
- Upgrade to Nuxt 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tech-blog-vue3-nuxt3.