NextJS + Apollo + i18n - unexpected error - javascript

The client I am working with at the moment has requested I build a SSR React app which includes i18n. To solve this problem I tried to use NextJS and i18Next.
I managed to get react and apollo linked up without issue but when I tried to connect next + i18n I keep getting a very unhelpful 'an unexpected error' occured, error.
Inspecting the console I also see the following:
Cannot read property 'prototype' of undefined
TypeError: Cannot read property 'prototype' of undefined
at Object.inherits (http://localhost:3000/_next/1515592576452/page/index.js:36080:46)
at Object.<anonymous> (http://localhost:3000/_next/1515592576452/page/index.js:30216:6)
at Object.<anonymous> (http://localhost:3000/_next/1515592576452/page/index.js:30440:30)
at __webpack_require__ (http://localhost:3000/_next/1515592576452/manifest.js:714:31)
at fn (http://localhost:3000/_next/1515592576452/manifest.js:117:20)
at Object.<anonymous> (http://localhost:3000/_next/1515592576452/page/index.js:28246:12)
at Object.module.exports.exports.byteLength (http://localhost:3000/_next/1515592576452/page/index.js:28507:30)
at __webpack_require__ (http://localhost:3000/_next/1515592576452/manifest.js:714:31)
at fn (http://localhost:3000/_next/1515592576452/manifest.js:117:20)
at Object.<anonymous> (http://localhost:3000/_next/1515592576452/page/index.js:24501:18)
Also this warning but i'm not sure it's related
warning.js?e7f4ca8:33 Warning: Expected server HTML to contain a matching <div> in <div>.
I've also noticed that in ./libs/withData.js there is the following line:
enter code herestatic displayName = WithData(${getComponentDisplayName(
ComposedComponent
)})
My editor flags that as an invalid token but this code came from the nextjs example and there is no issue on that repo which suggests it's a typo.
I've included all the code that pertains to this issue in the following codepen project.
https://codepen.io/foxleigh81/project/editor/DnYJWB

OK I've sort of worked it out.
In a nutshell. I was thinking about this all wrong. I was thinking I was adding next to my react app, whereas the reality is more like I'm putting my react app inside next. I took it apart and rebuilt it from scratch, assembling the examples on the nextjs repo and it all worked.

Related

TypeError: undefined is not an object (evaluating '_reactNative.Image.propTypes.source')

After upgrading to Expo 46, suddenly I started seeing these errors. I have searched on them, but did not find a solution so far. The app doesn't start anymore, it directly shows these errors.
Any ideas?
ERROR TypeError: undefined is not an object (evaluating '_reactNative.Image.propTypes.source')
Error: Unable to resolve module ./http://192.168.xx.xx:19000/index.ts from C:\xx/.:
None of these files exist:
* http:\192.168.xx.xx:19000\index.ts(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.svg|.native.svg|.svg|.android.cjs|.native.cjs|.cjs)
* http:\192.168.xx.xx:19000\index.ts\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.svg|.native.svg|.svg|.android.cjs|.native.cjs|.cjs)
at ModuleResolver.resolveDependency (C:\xx\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:136:15)
at DependencyGraph.resolveDependency (C:\xx\node_modules\metro\src\node-haste\DependencyGraph.js:231:43)
at C:\xx\node_modules\metro\src\lib\transformHelpers.js:129:24
at Server._resolveRelativePath (C:\xx\node_modules\metro\src\Server.js:1137:12)
at async Server.requestProcessor [as _processBundleRequest] (C:\xx\node_modules\metro\src\Server.js:464:37)
at async Server._processRequest (C:\xx\node_modules\metro\src\Server.js:420:9)
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called
I solved the issue by divide and conquer strategy.
Commenting out every component and uncommenting them step by step until I found the issue.
In my case it was one of my plugins react-native-qrcode-svg, which needed to be updated in order to support the Expo 46 upgrade.

Nextjs HookWebpackError: Cannot set properties of undefined (setting 'type')

Im getting this error when i try to build my nextjs app. This error didn't occur on the last version of my app though, I didn't play with any config file, only added a couple of animation libraries and thats it, in addition to the code I wrote of course.
repo link: https://github.com/aliSalehAbdulhadi/Daily adding-inner-todos branch
yarn run v1.22.19
$ next build
info - Linting and checking validity of types
info - Creating an optimized production build
Failed to compile.
HookWebpackError: Cannot set properties of undefined (setting 'type')
at makeWebpackError (/home/ali/Desktop/development/projects/daily-app/node_modules/next/dist/compiled/webpack/bundle5.js:49590:9)
at /home/ali/Desktop/development/projects/daily-app/node_modules/next/dist/compiled/webpack/bundle5.js:33095:12
at eval (eval at create (/home/ali/Desktop/development/projects/daily-app/node_modules/next/dist/compiled/webpack/bundle5.js:23385:10), :34:1)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
-- inner error --
TypeError: Cannot set properties of undefined (setting 'type')
at /home/ali/Desktop/development/projects/daily-app/static/css/04a7d2f9c1ff8270.css:1335:3
at flatten (/home/ali/Desktop/development/projects/daily-app/node_modules/next/dist/compiled/cssnano-simple/index.js:190:64125)
at getValue (/home/ali/Desktop/development/projects/daily-app/node_modules/next/dist/compiled/cssnano-simple/index.js:190:63922)
at normalizeBoxShadow (/home/ali/Desktop/development/projects/daily-app/node_modules/next/dist/compiled/cssnano-simple/index.js:190:67038)
at /home/ali/Desktop/development/projects/daily-app/node_modules/next/dist/compiled/cssnano-simple/index.js:190:63635
at /home/ali/Desktop/development/projects/daily-app/node_modules/next/node_modules/postcss/lib/container.js:72:18
at /home/ali/Desktop/development/projects/daily-app/node_modules/next/node_modules/postcss/lib/container.js:55:18
at Rule.each (/home/ali/Desktop/development/projects/daily-app/node_modules/next/node_modules/postcss/lib/container.js:41:16)
at Rule.walk (/home/ali/Desktop/development/projects/daily-app/node_modules/next/node_modules/postcss/lib/container.js:52:17)
at /home/ali/Desktop/development/projects/daily-app/node_modules/next/node_modules/postcss/lib/container.js:60:24
at Root.each (/home/ali/Desktop/development/projects/daily-app/node_modules/next/node_modules/postcss/lib/container.js:41:16)
caused by plugins in Compilation.hooks.processAssets
TypeError: Cannot set properties of undefined (setting 'type')
at /home/ali/Desktop/development/projects/daily-app/static/css/04a7d2f9c1ff8270.css:1335:3
at flatten (/home/ali/Desktop/development/projects/daily-app/node_modules/next/dist/compiled/cssnano-simple/index.js:190:64125)
at getValue (/home/ali/Desktop/development/projects/daily-app/node_modules/next/dist/compiled/cssnano-simple/index.js:190:63922)
at normalizeBoxShadow (/home/ali/Desktop/development/projects/daily-app/node_modules/next/dist/compiled/cssnano-simple/index.js:190:67038)
at /home/ali/Desktop/development/projects/daily-app/node_modules/next/dist/compiled/cssnano-simple/index.js:190:63635
at /home/ali/Desktop/development/projects/daily-app/node_modules/next/node_modules/postcss/lib/container.js:72:18
at /home/ali/Desktop/development/projects/daily-app/node_modules/next/node_modules/postcss/lib/container.js:55:18
at Rule.each (/home/ali/Desktop/development/projects/daily-app/node_modules/next/node_modules/postcss/lib/container.js:41:16)
at Rule.walk (/home/ali/Desktop/development/projects/daily-app/node_modules/next/node_modules/postcss/lib/container.js:52:17)
at /home/ali/Desktop/development/projects/daily-app/node_modules/next/node_modules/postcss/lib/container.js:60:24
at Root.each (/home/ali/Desktop/development/projects/daily-app/node_modules/next/node_modules/postcss/lib/container.js:41:16)
Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I cloned your repository and made a build, it gave no error! I think it's a problem with your local configuration.
It was a CSS syntax error, which didn't appear during development but only during build time. Keep that in mind to anyone who might see this.

while using the prerender cli, terminal gives TypeError: Cannot read property 'endsWith' of undefined

I have been trying to implement this plugin using the cli in my Vue app (Vue 3)
vue add prerender-spa
. After I am done with the cli, I get this error.
� Invoking generator for Vue-cli-plugin-prerender-spa...
⚓ Running completion hooks...
ERROR TypeError: Cannot read property 'endsWith' of undefined
TypeError: Cannot read property 'endsWith' of undefined
at C:\Users\hp\Documents\WebDev\projects\VueAndFirebase\learnvue\Myprerender-attempt\dojo-blog\node_modules\vue-cli-plugin-prerender-spa\generator.js:22:42
at runGenerator (C:\Users\hp\AppData\Roaming\npm\node_modules\#vue\cli\lib\invoke.js:132:13)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async invoke (C:\Users\hp\AppData\Roaming\npm\node_modules\#vue\cli\lib\invoke.js:92:3)
What could be the problem, or should I just abandon this pre-rendering and focus on SSR(Nuxt.js). Although the app is a small one and based on my findings, SSR is overkill. It is giving me too much headache.

" 'app' is undefined " when developing an Office add-in

So I am learning how to develop an MS Project add-in.
I was successful in deploying the tutorial (yayy!): https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/project-quickstart
Then I replaced the html and the js code with the example code from here: https://dev.office.com/reference/add-ins/shared/projectdocument.gettaskbyindexasync
And it stopped working!
I started a new project from scratch. Again, as in the tutorial, "Office Add-in project using Jquery framework", "Javascript" as selected options.
And it still didn't work.
Error message from F12 dev tools:
jQuery.Deferred exception: 'app' is undefined ReferenceError: 'app' is undefined
at Anonymous function (eval code:14:13)
at mightThrow (https://localhost:3000/node_modules/jquery/dist/jquery.js:3534:10)
at Anonymous function (https://localhost:3000/node_modules/jquery/dist/jquery.js:3602:12) undefined
SCRIPT5009: 'app' is undefined
jquery.js (3827,3)
The error is spawned from the following row from the JS code:
app.initialize();
There is no "app.initialize();" in the tutorial. If I decide to delete this row, the error goes away (naturally), but then interacting with the functionality spawns another error message:
Unable to get property 'push' of undefined or null reference
Then I tried to define some 'app' Object.
I initialized it with
var app = Object.context;
The error then is:
Unable to get property 'initialize' of undefined or null reference
I am still trying to figure out, where this 'app' Object comes from. Or at least, how can I define it properly. Any ideas?

Uncaught ReferenceError: Meteor is not defined

I'm following a tutorial to create a Meteor app and I've been having the same error regarding different things in the developer console.
> Meteor.users.find().count();
VM2034:1 Uncaught ReferenceError: Meteor is not defined(…)(anonymous function) # VM2034:1
> Session.set('pageTitle', 'A different title');
VM2035:1 Uncaught ReferenceError: Session is not defined(…)
From researching the problem, the 2 solutions that come up are: (1) doing
meteor add session
which I have done; (2) updating the Meteor version but I am running Meteor 1.3.3. Neither works.
EDIT: After doing meteor update, the Meteor error disappeared once but came back the second time I tried a command based on Meteor.
Any idea on how to solve this?
If you are trying to set the session outside the client folder you will get this error. Which is why you must do:
if(Meteor.isClient) {
Session.set('pageTitle', 'A different title');
}
Then you can check it worked simple write in console:
Session.get('pageTitle')
Will output: "A different title"
Good luck!

Categories