Object equality issue after babelification in Next.js - javascript

I have a React project build with Next.js. I added the React Simple Dropdown module and am just using the basic sample author provides. All works fine. Now I would like to copy the 3 dropdown files from the module and modify them. So I copied the src files to my components directory and changed my line in my code from:
import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown'
to:
import Dropdown, { DropdownTrigger, DropdownContent } from './Dropdown/Dropdown'
This causes this line to no longer work: if (child.type === DropdownTrigger).
Inspecting the child.type I see a difference (top is my code):
It seems that my Next.js webpack is handling things differently than whatever tool the author use to babelify the original code. I am able to handle the match in other ways but would like to understand what is happening. It seems related so some default export but I am not clear why things are different and what Babel setting handles this.

Evidently class comparison doesn't work with React Hot Loader in dev mode. Known issue with no fix at the moment. So using item.type.displayNane === 'DropdownTrigger' would be a workaround.

Related

Using Nuxt context inside custom js class

I'm new in Nuxt, Vue and JS at all. So I can't understand how exactly imports and exports works in JS, what is it about contexts and more..
So I have a class (~/helpers/foo.js)
export default class Foo {
static bar () {
console.log(this.$nuxt); // or this.$config, this.$nuxt.$config or smth
}
}
and in some component I called this function and got (it correctly imported and working) and got "undefined" in console on this console.log
Can someone explain me, how this is working? How can I pass the Nuxt's context to my class (if I can)? Should I define my class as a plugin for Nuxt (and rewrite it to single function 'cos Nuxt's plugins should be a fn? Class in my case used as a namespace for some functions, that is used for ab-testing)
First off, if you're new to JS, you should not be using Vue. Even less Nuxt, learn the basics and come back. You'll get a far easier time debugging and learning overall.
Skipping steps will not good in the mid/long term.
As for your question, you don't need to use Classes overall, especially for what you showed.
You can use the following answer to have both a successful export + import and the usage of Vue/Nuxt's context in a .js file. Reading the export page from MDN can also help quite a lot.

importing ConnectButton from web3uikit gives Error: Invalid hook call. Hooks can only be called inside of the body of a function component

I am using nextjs along with tailwind css and a bunch of other libraries like web3uikit.
the app work totally fine but as soon as I import ConnectButton from web3uikit and use it in the sidebar component, it gives me the following error:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Here's the link to the github repo, just cloning and install the dependencies would help you in setting up the project and then npm run dev.
Link: https://github.com/oneknucklehead/marketplace-web3
I believe it is a server-side rendering issue! A screenshot of how I got the <ConnectButton /> to render in a nextjs application is below:
Implementing the ConnectButton Component Screenshot
When the error popped up saying I had an invalid hook call, I closed the error box and the button was rendered in and when I click on it, it showed the web3Modal with the proper sign-in options. I thought that maybe it was a server-side issue
So I fixed it by using a useState hook with a boolean value as seen in the screenshot. It is false by default but will only become true when the component loads in(used a useEffect hook to implement) and I take advantage of that via conditional rendering which is also shown in the screenshot. Once I did that, I haven't encountered the issue at all! Hope this helps!
Go to node_modules -> web3uikit-> node_modules and delete the react folder under it.
web3uikit node module has a version of react pre-installed with it. Apparently, that's causing errors. Now, why does deleting the folder fix the error? Honestly, I don't know, but it removed the error. This answer is from someone named David MacDonald.

"TypeError: can't convert undefined to object" only after vite build, before, with vide dev, everything works perfectly

I'm using Vite combined with React and Typescript.
When I run vite dev the live version of the website runs perfectly, not even errors on the console.
When I run vite build and then vite preview all I get to see is a white page and the
TypeError: can't convert undefined to object
error in the console.
I cannot trace the problem in my code because the error happens after the build/minimization, but just to be sure, I added safety checks in the instances where I call Object.keys().
This is the segment of the code where the error starts:
Object.keys(pd).forEach(function (e) {
if (pd[e] === 0)
Xd.prototype["on" + e] = function () {
this.scope.emit(e);
};
else if (pd[e] === 1)
Xd.prototype["on" + e] = function (t) {
this.scope.emit(e, t);
};
});
Edit:
I was checking the minimized code and right before the long block of code where the bug is, I saw a MuiTouchRipple. I'm using the MaterialUI library, is it possible that the library is causing this problem?
I tried to update from version 5.4.2 to 5.6.3, but after the build it still crashes.
I managed to fix it.
Posting the debug steps for the newbies like me.
Debug
1. Disable minimization
This allows you to see the original code, it's still in a bundled form, so you still cannot identify the exact file where the problem is, but at least you know something more. (in my specific case, since I'm using vite I had to change a variable in the config file, see https://vitejs.dev/config/#build-minify).
2. Change typescript compiler options
In my case the target and module were set to ESNext, trying to change it to ES6 or to commonjs helped to have a better searchable code.
(see https://www.tsmean.com/articles/learn-typescript/typescript-module-compiler-option/)
3. Search the code that causes the error
When I tried to search the code in vscode it did not appear. That's a good sign, at least my code was not causing the problem!
But at the same time: what now?
The solution I found is to either disable vscode excluded folders from the search (by default vscode does not search in node_modules), or to use grep -r in the project folder.
I found the latter to be faster and more efficient.
Solution
In my specific case the problem was an old library that hasn't been updated in years (https://www.npmjs.com/package/react-html-parser). Once I removed it everything started working.
I had similar problem, and for me this was caused by "target": "es5" in tsconfig.json.
After changing to esnext, problem is gone.
https://esbuild.github.io/content-types/#es5
I had a similar problem. For me it was the build.lib.formats setting in vite.config.ts, that I needed to remove.

JS undefined import when defining global const(undefined error)

Context:
This is not important for core of the question, but still providing for clarity.
We are using ant-mobile in our react-native-web app, it uses react-native-collapsible internally(v1.5.1). Everything was working fine during web, but it started giving errors on release,
Error
Error looked something like this:
But it should be working as code seems like so:
Code can also be accessed here.
My solution:
I ended up writing a patch to remove this const and use its definition code where this const was being used(only 1 place). And everything worked.
Question
My question is,
Why this was working in development and not in production builds?
Why VIEW_PROPS global const doesn't show this issue?
And least importantly, is there any babel config type thing i can use to transpile this instead of patching?
Issue created on the original library is here.
UPDATE: Turns out we were just not quiet hitting the line which i have moved this constant initialization in our usage, but now we are hitting that line and it seems more like prop-types being removed issue(see the above issue i have linked for details).

SlateJS: slate-core Editor not updating value for simulated onKeyDown events

I'm attempting to simulate onKeyDown events on the Editor from slate-core -- as opposed to slate-react -- to test some plugins I am developing. However, the Editor is not updating its Value whatsoever.
I've extensively looked through the SlateJS 0.47.x documentation and from what I can tell the Editor component should respond to onKeyDown events out-of-the-box.
Here is a small codesandbox example that reproduces my problem.
^ Notice that despite me trying to simulate numerous onKeyDown events -- in the file core-editor-is-not-responding-to-on-key-down-events.js -- the value of the Editor never updates; it remains a blank document.
I am concerned about this difference in the behavior because seems like I would need to re-write functionality of inserting text as it gets typed out when said functionality I believe already exists.
Any help would be incredibly appreciated!
So it turns out to be a bug in Slate-Core, as #devinm mentioned. Without Slate-React, it doesn't react properly to onKeyDown.
I don't know how to bundle this up for other people to use, and also this issue affects a number of Slate versions so I think the best thing really is to explain what needs to be done anyway.
Note that your environment will need to support ES6 imports.
Go to the Slate codebase for the version you're using which is affected (0.44.x to 0.47.x) and find the slate-react/plugins/DOMPlugin files
Copy the contents of the directory into a new folder in your project called slate-react-dom-plugin
Copy these directories into the path alongside the slate-react-dom-plugin/index.js file - utils and constants (again, from slate-react)
Update the import paths for each module to match their new structure (note that you don't actually need every file in the utils folder, only the ones referenced by the DOMPlugin but it's just easier to copy the entire folder)
In your test use import DOMPlugin from './slate-react-dom-plugin'
When creating your test-editor, use the following plugin configuration:
new Editor({
value: value
plugins: [DOMPlugin({ plugins: [...ANY_OTHER_PLUGINS] })], // Wrap any plugins you use with the DOMPlugin
});
Run your test, and it should fire onKeyDown events as expected now
Let me know if you have any questions!

Categories