DEV Community: solring

Next.js 12 SCSS module resolution problem when importing other SCSS files.

solring — Sun, 14 Nov 2021 14:11:26 +0000

Just to note it down in case I forget about this issue (AGAIN).

Next version: 12.0.3

Issue description

When importing the scss source of bootstrap in my own global scss file, there seem to be some path resolution problems in the latest Next.js and I got these errors:

wait  - compiling...
error - ./styles/globals.scss:4:0
Module not found: Can't resolve '../node_modules/bootstrap/scss/forms/data:image/svg+xml,<svg xmlns='http:/www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke=''

Import trace for requested module:
./styles/globals.scss
./pages/_app.js

https://nextjs.org/docs/messages/module-not-found

globals.scss

@import 'bootstrap/scss/bootstrap.scss';
...

Current Solution

Then I found This issue. Exactly the same one.
So I simply down-grade Next.js to ^11, and it works.

Follow up

https://github.com/vercel/next.js/pull/31134
It seems that the fix has been merged, so we can just wait for the releases to include it.

[React newbie] Prevent redundant re-rendering when calling callbacks in useEffect(useLayoutEffect)

solring — Sun, 10 Oct 2021 18:37:04 +0000

When passing callbacks to child components to detect their changes, you may need to call the callbacks inside useEffect or useLayoutEffect and add the callbacks into its dependency array:

 useLayoutEffect(() => {
    if(onScroll) onScroll(x, pos) // call the callback
  }, [x, pos, onScroll])

However, this will cause an infinite loop when rendering if the callback will trigger the re-render of the parent component--even if it is just setting some states.

  const onScroll = (x, y) => {
    setScroll([x, y])
  }

The onScroll function(object) will be recreated in every re-render, consequently triggering the calling of itself since it's in the dependency list, and going on and on......boom.

You can simply remove the callback from the dependency list to fix the problem, but you will get the react-hooks/exhaustive-deps warning if you're using the lint.

Another solution is to use useCallback to memorize the callback function to prevent it from being recreated.

  const [scroll, setScroll] = useState([0, 0]
...
  const onScroll = useCallback((x, y) => {
    setScroll([x, y])
  }, [setScroll])

According to official doc, the state setting function created by setState won’t change on re-renders, so it can be used in the dependency list to retain the identity of the callback function.

[JS newbie] Array indexes in for...in loops.

solring — Thu, 07 Oct 2021 15:54:15 +0000

TL;DR. The indexes got in this way may not be what you anticipated.

If your are using for(idx in arr) to enumerate through an Array, note that the type of idx is actually string, not number.

> for(i in arr) { console.log(`type of key ${i}: ${typeof(i)}`) }
type of key 0: string
type of key 1: string
type of key 2: string
type of key 3: string
type of key 4: string

That is, if you want to derive some values from the index in your loop like this:

for (i in arr) {
    let val = i + 1 + arr2[i-1];
    // will probably become sth like "0122" rather than a number.
}

Your code will either explode or behave unexpectedly.

This is because the indexes of an Array are actually enumerable properties of an Object and are of type string. The MDN doc has some explanation, and you can also check the indexes of an Array as properties by Object.getOwnPropertyNames.

> Object.getOwnPropertyNames(arr)
[ '0', '1', '2', '3', '4', 'length' ]

Also, it is suggested that you'd better not use this to iterate through an Array if the order of execution is important since it is arbitrary according to MDN doc.

That's today's joke. Sorry if there is any misunderstanding and corrections are appreciated!.

[JS newbie] Array().fill() is marvellous but...don't do this.

solring — Sat, 07 Aug 2021 21:03:26 +0000

OK, the tragedy was like this.

Everyone knows how convenient the javascript Array fill() is to let users initialize array data elegantly. Perfect invention.

// create an array of length 6 with all elements equal to 0.
let arr = Array(6).fill(0)

It is even extremely useful if for creating a range of integers for iteration or some other fancy operations.

// you must fill the array or there won't be keys
Object.keys(Array(6).fill(0)).map((i) => dosomething(i));

Recently I was fascinated by these kinds of functional programming styles and mistakenly assumed that is was similar to Python collections.defaultdict() which lets you pass a primitive or an object as a factory so that it will automatically new an independent value for each entry in the array.

Unfortunately, it is not the case.

fill(0) works perfectly fine since the argument is a primitive. However, if you pass something like an object {}, Every entry in the array will actually contain(or point to?) the same object. Every element will be the same.

That is to say, if you try to modify one of the element object(like, assign or change some value of a key), every single element will be modified as well, which is very unlikely to be your original intention.

> arr = Array(6).fill({})
[ {}, {}, {}, {}, {}, {} ]
> arr[3]['someKey'] = "hello"
'hello'
> arr
[
  { someKey: 'hello' },
  { someKey: 'hello' },
  { someKey: 'hello' },
  { someKey: 'hello' },
  { someKey: 'hello' },
  { someKey: 'hello' }
]

Boom.

This problem is very similar a classical trap in Python when you try to initialize an array of array in this very intuitive but disastrous way:

>>> arr = [[0] * 3 ] * 3
>>> arr
[[0, 0, 0], [0, 0, 0], [0, 0, 0]]
>>> arr[1][1] = 777
>>> arr
[[0, 777, 0], [0, 777, 0], [0, 777, 0]]

Here the first level [0] * 3 is fine, but the second multiply is actually multiplying the reference to the array [0] * 3, therefore changing one element in one array will lead to changing all of the corresponding element in other arrays (because they are the same reference!)

OK, everyone can start to laugh!

IDK why I'm doing this again.....

solring — Sat, 07 Aug 2021 19:10:10 +0000

I think I just need a cool markdown-based blog platform to dump my tech notes & shitty code & tricky problems for future reference and backup.

# And code formatting!
# This function is so god damn important and Medium just doesn't give a shit to it.
rm -rf /

I remember that the last time I do this was ages ago......when Logdown was still alive.

After that I have been failing to find the reason of doing it again because I didn't think it's meaningful to share my struggles and knowledge any more.

Probably it's time to try again.

Most of time I use private Notion pages to note things, but I will try to share some interesting/exasperating/enigmatic findings here.