Upgrade Bloom Frontend to Node 17
Closed this issue · 13 comments
Overview
We would like to upgrade Bloom-frontend to Node 17 as a step to the latest. There is likely to be dependency issues as part of this change so it will require a bit of time.
Action Items
- Create a branch from develop
- Have a look through the code and see all the places where the Node version is specified. I will list some but perhaps not all examples below.
- Update node version locally and try and install packages and run the application. You will probably encounter some errors which you will need to fix.
- Update ReadMe to specify Node version
- Update github actions to use newer version
- Commit and Push and tag @kyleecodes and @eleanorreem
Resources/Instructions
Hi!
If no one's taken this up, I can try and take a run at it!
Thanks!
@DustyDogCodex issue assigned.
Thank you!
Hi @kyleecodes ,
Hope you are enjoying your Friday!
I am currently working on this issue and I wanted to know if there is a specific version of Node17 you want me to install? Currently I have node v17.9.1 installed for this project, which was the last major update to node 17. Please let me know if you would like me to switch to a different version.
Additionally, Cypress will work only with node: "^16.0.0 || ^18.0.0 || >=20.0.0". Would you like cypress to be rolled back to an earlier version that works with node 17?
Thanks!
@DustyDogCodex Yes, that node 17 version works! You may need to change to other node 17 versions depending on other dependencies, but overall the last updated full release is preferred.
Also, I want to note that this issue may not be possible without more significant code changes, so if needed I'll monitor to split this up into more issues and take on some of those code changes myself.
As for Cypress, yes, you may update or rollback any other dependencies like Cypress as needed.
Thanks again and happy hacking!
@DustyDogCodex - thanks for your efforts so far! Just to let you know - I am doing a Nextjs Update to 13.5.4 which is now on develop. This update might impact this. Hopefully not! Just incase, ensure you have pulled the most recent develop to ensure you have the most recent package.json.
Hi @kyleecodes ,
Thanks! I'm going to bring my local develop branch upto date with the new update to Next 13.5 and continue working on this. I'll let keep you updated as issues pop up and need fixing!
@eleanorreem thanks for letting me know! I'll update my branch and continue working on this issue.
thanks!
hi @kyleecodes ,
Hope you are enjoying your day!
Would it be possible for me to get access to the projects environment variables? I am having trouble running this locally as I keep getting a 401 error since I do not have a storyblok access token.
Thanks!
@DustyDogCodex you bring up a great point, thanks.
We are looking into this now, thank you for your patience. I will comment here and tag you ASAP with updates. Meanwhile, are you able to share more details about the error / screenshots?
Hi @kyleecodes ,
Hope you are enjoying your Friday :)
Here is a screenshot of the 401 error I get. Additionally I've also added the error message I received in my terminal. All of these were received when I start up the porject and run it on localhost:3000.
- Error 1
Error: Request failed with status code 401
at createError (C:\Users\varun\OneDrive\Documents\OS Forks\bloom-frontend\node_modules\axios\lib\core\createError.js:16:15)
at settle (C:\Users\varun\OneDrive\Documents\OS Forks\bloom-frontend\node_modules\axios\lib\core\settle.js:17:12)
at IncomingMessage.handleStreamEnd (C:\Users\varun\OneDrive\Documents\OS Forks\bloom-frontend\node_modules\axios\lib\adapters\http.js:293:11)
at IncomingMessage.emit (node:events:539:35)
at endReadableNT (node:internal/streams/readable:1345:12)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
type: 'Error',
config: {
transitional: {
silentJSONParsing: true,
forcedJSONParsing: true,
clarifyTimeoutError: false
},
transformRequest: [ null ],
transformResponse: [ null ],
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
maxBodyLength: -1,
headers: {
Accept: 'application/json, text/plain, */*',
'User-Agent': 'axios/0.24.0'
},
baseURL: 'https://api.storyblok.com/v2',
proxy: false,
params: { version: 'published', token: '' },
method: 'get',
url: '/cdn/links/'
},
status: 401,
page: '/444.js'
}
- Error 2
Error: Request failed with status code 401
at createError (C:\Users\varun\OneDrive\Documents\OS Forks\bloom-frontend\node_modules\axios\lib\core\createError.js:16:15)
at settle (C:\Users\varun\OneDrive\Documents\OS Forks\bloom-frontend\node_modules\axios\lib\core\settle.js:17:12)
at IncomingMessage.handleStreamEnd (C:\Users\varun\OneDrive\Documents\OS Forks\bloom-frontend\node_modules\axios\lib\adapters\http.js:293:11)
at IncomingMessage.emit (node:events:539:35)
at endReadableNT (node:internal/streams/readable:1345:12)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
config: {
transitional: {
silentJSONParsing: true,
forcedJSONParsing: true,
clarifyTimeoutError: false
},
adapter: [Function: httpAdapter],
transformRequest: [ [Function: transformRequest] ],
transformResponse: [ [Function: transformResponse] ],
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
maxBodyLength: -1,
validateStatus: [Function: validateStatus],
headers: {
Accept: 'application/json, text/plain, */*',
'User-Agent': 'axios/0.24.0'
},
baseURL: 'https://api.storyblok.com/v2',
proxy: false,
params: { version: 'published', language: 'en', token: '', cv: undefined },
paramsSerializer: [Function: paramsSerializer],
method: 'get',
url: '/cdn/stories/home',
data: undefined
},
request: <ref *1> ClientRequest {
_events: [Object: null prototype] {
abort: [Function (anonymous)],
aborted: [Function (anonymous)],
connect: [Function (anonymous)],
error: [Function (anonymous)],
socket: [Function (anonymous)],
timeout: [Function (anonymous)],
prefinish: [Function: requestOnPrefinish]
},
_eventsCount: 7,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: true,
_last: true,
chunkedEncoding: false,
shouldKeepAlive: false,
maxRequestsOnConnectionReached: false,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: false,
sendDate: false,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
_contentLength: 0,
_hasBody: true,
_trailer: '',
finished: true,
_headerSent: true,
_closed: true,
socket: TLSSocket {
_tlsOptions: [Object],
_secureEstablished: true,
_securePending: false,
_newSessionPending: false,
_controlReleased: true,
secureConnecting: false,
_SNICallback: null,
servername: 'api.storyblok.com',
alpnProtocol: false,
authorized: true,
authorizationError: null,
encrypted: true,
_events: [Object: null prototype],
_eventsCount: 9,
connecting: false,
_hadError: false,
_parent: null,
_host: 'api.storyblok.com',
_readableState: [ReadableState],
_maxListeners: undefined,
_writableState: [WritableState],
allowHalfOpen: false,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: undefined,
_server: null,
ssl: null,
_requestCert: true,
_rejectUnauthorized: true,
parser: null,
_httpMessage: [Circular *1],
write: [Function: writeAfterFIN],
[Symbol(res)]: null,
[Symbol(verified)]: true,
[Symbol(pendingSession)]: null,
[Symbol(async_id_symbol)]: 67916,
[Symbol(kHandle)]: null,
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: null,
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(kCapture)]: false,
[Symbol(kSetNoDelay)]: false,
[Symbol(kSetKeepAlive)]: false,
[Symbol(kSetKeepAliveInitialDelay)]: 0,
[Symbol(kBytesRead)]: 747,
[Symbol(kBytesWritten)]: 200,
[Symbol(connect-options)]: [Object],
[Symbol(RequestTimeout)]: undefined
},
_header: 'GET /v2/cdn/stories/home?version=published&language=en&token=&cv=undefined HTTP/1.1\r\n' +
'Accept: application/json, text/plain, */*\r\n' +
'User-Agent: axios/0.24.0\r\n' +
'Host: api.storyblok.com\r\n' +
'Connection: close\r\n' +
'\r\n',
_keepAliveTimeout: 0,
_onPendingData: [Function: nop],
agent: Agent {
_events: [Object: null prototype],
_eventsCount: 2,
_maxListeners: undefined,
defaultPort: 443,
protocol: 'https:',
options: [Object: null prototype],
requests: [Object: null prototype] {},
sockets: [Object: null prototype] {},
freeSockets: [Object: null prototype] {},
keepAliveMsecs: 1000,
keepAlive: false,
maxSockets: Infinity,
maxFreeSockets: 256,
scheduling: 'lifo',
maxTotalSockets: Infinity,
totalSocketCount: 0,
maxCachedSessions: 100,
_sessionCache: [Object],
[Symbol(kCapture)]: false
},
socketPath: undefined,
method: 'GET',
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
path: '/v2/cdn/stories/home?version=published&language=en&token=&cv=undefined',
_ended: true,
res: IncomingMessage {
_readableState: [ReadableState],
_events: [Object: null prototype],
_eventsCount: 3,
_maxListeners: undefined,
socket: [TLSSocket],
httpVersionMajor: 1,
httpVersionMinor: 1,
httpVersion: '1.1',
complete: true,
rawHeaders: [Array],
rawTrailers: [],
aborted: false,
upgrade: false,
url: '',
method: null,
statusCode: 401,
statusMessage: 'Unauthorized',
client: [TLSSocket],
_consuming: false,
_dumped: false,
req: [Circular *1],
responseUrl: 'https://api.storyblok.com/v2/cdn/stories/home?version=published&language=en&token=&cv=undefined',
redirects: [],
[Symbol(kCapture)]: false,
[Symbol(kHeaders)]: [Object],
[Symbol(kHeadersCount)]: 38,
[Symbol(kTrailers)]: null,
[Symbol(kTrailersCount)]: 0,
[Symbol(RequestTimeout)]: undefined
},
aborted: false,
timeoutCb: null,
upgradeOrConnect: false,
parser: null,
maxHeadersCount: null,
reusedSocket: false,
host: 'api.storyblok.com',
protocol: 'https:',
_redirectable: Writable {
_writableState: [WritableState],
_events: [Object: null prototype],
_eventsCount: 2,
_maxListeners: undefined,
_options: [Object],
_ended: true,
_ending: true,
_redirectCount: 0,
_redirects: [],
_requestBodyLength: 0,
_requestBodyBuffers: [],
_onNativeResponse: [Function (anonymous)],
_currentRequest: [Circular *1],
_currentUrl: 'https://api.storyblok.com/v2/cdn/stories/home?version=published&language=en&token=&cv=undefined',
[Symbol(kCapture)]: false
},
[Symbol(kCapture)]: false,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype] {
accept: [Array],
'user-agent': [Array],
host: [Array]
}
},
response: {
status: 401,
statusText: 'Unauthorized',
headers: {
'content-type': 'application/json; charset=utf-8',
'content-length': '24',
connection: 'close',
date: 'Fri, 20 Oct 2023 16:24:50 GMT',
server: 'nginx/1.18.0',
'x-frame-options': 'SAMEORIGIN',
'x-xss-protection': '1; mode=block',
'x-content-type-options': 'nosniff',
'x-download-options': 'noopen',
'x-permitted-cross-domain-policies': 'none',
'referrer-policy': 'strict-origin-when-cross-origin',
'cache-control': 'max-age=0, public, s-maxage=604800',
'x-request-id': 'ffe5f785-1e9f-40aa-82d0-6a31d4e505e6',
'x-runtime': '0.005691',
vary: 'Origin',
'x-cache': 'Error from cloudfront',
via: '1.1 1d70b90303ff56b86662db87683a2a04.cloudfront.net (CloudFront)',
'x-amz-cf-pop': 'MIA3-C1',
'x-amz-cf-id': '0SfDtNvMuQ7Kr3Y5qS_8Azl1rwHC9rHv12sadH2cbk3u2EgeIGajyw=='
},
config: {
transitional: [Object],
adapter: [Function: httpAdapter],
transformRequest: [Array],
transformResponse: [Array],
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
maxBodyLength: -1,
validateStatus: [Function: validateStatus],
headers: [Object],
baseURL: 'https://api.storyblok.com/v2',
proxy: false,
params: [Object],
paramsSerializer: [Function: paramsSerializer],
method: 'get',
url: '/cdn/stories/home',
data: undefined
},
request: <ref *1> ClientRequest {
_events: [Object: null prototype],
_eventsCount: 7,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: true,
_last: true,
chunkedEncoding: false,
shouldKeepAlive: false,
maxRequestsOnConnectionReached: false,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: false,
sendDate: false,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
_contentLength: 0,
_hasBody: true,
_trailer: '',
finished: true,
_headerSent: true,
_closed: true,
socket: [TLSSocket],
_header: 'GET /v2/cdn/stories/home?version=published&language=en&token=&cv=undefined HTTP/1.1\r\n' +
'Accept: application/json, text/plain, */*\r\n' +
'User-Agent: axios/0.24.0\r\n' +
'Host: api.storyblok.com\r\n' +
'Connection: close\r\n' +
'\r\n',
_keepAliveTimeout: 0,
_onPendingData: [Function: nop],
agent: [Agent],
socketPath: undefined,
method: 'GET',
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
path: '/v2/cdn/stories/home?version=published&language=en&token=&cv=undefined',
_ended: true,
res: [IncomingMessage],
aborted: false,
timeoutCb: null,
upgradeOrConnect: false,
parser: null,
maxHeadersCount: null,
reusedSocket: false,
host: 'api.storyblok.com',
protocol: 'https:',
_redirectable: [Writable],
[Symbol(kCapture)]: false,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype]
},
data: { error: 'Unauthorized' }
},
isAxiosError: true,
toJSON: [Function: toJSON],
page: '/'
}
- Screenshot Of Error
Hey @DustyDogCodex! Thank you so much for your patience.
Can you try the token listed in our tech volunteer guide here?
Let me know how that works, thanks again!
Hi @kyleecodes ,
Hope you are doing well! thanks for your response. This does indeed fix the issue I encountered.
Thanks again!
As per Chayn policy, after 60 days of inactivity, we will be unassigning this issue to open it back up for contributors. Please comment to be re-assigned. Thank you for interest in contributing to Chayn!
Closing this issue because it's been solved in recent app upgrades done by our dev team, thank you for your time!