static-tweets gets ERR_REQUIRE_ESM because of unist-util-visit bump (example broken in v0.5.5)

[MartinCura]

Summary: Even included example app as is (v0.5.5) breaks because static-tweets's cjs build tries to require dep unist-util-visit which is ESM-only now.

Reproduction

Included example/ (simple enough which makes me think i'm not doing anything weird)

1. yarn (complains it's missing @types/react, add it)
2. yarn dev, open page; or yarn build

Detail

Hi! Thank you for these wonderful packages! We're using them in our main landing website for a serious performance boost because we had a lot of embedded tweets (from around 25 to 80 in Lighthouse's metric, was even worse in a tweet-ful page). This is more of an FYI because i solved it by downgrading.

I'm not sure if this is a general Next.js thing (don't completely understand the CJS/ESM rift)), there's a couple of issues like this (vercel/next.js#23725 (comment) even mentions unist-util-visit and recommends next-transpile-modules, which didn't work for me). But basically app tries to use static-tweets's cjs version and this makes unist-util-visit complain. Trying combinations with webpack 4/5 or Node 10/11 didn't make a difference.

I see the last couple of releases are in fact about webpack and bumping versions. I'm not sure if this is the result of combining these but because unit-util-visit was bumped to a ESM-only version, it stopped working for me. I finally managed to solve this after a couple of days by downgrading static-tweets to v0.5.3 (silly of me not trying this earlier) and locking to it.

The weirdest thing for me is that building locally and yarn linking static-tweets seems to make it work in v0.5.5 🤯 I am really curious about how this can be so, but somehow webpack works that way. Steps for this:

1. Checkout clean latest
2. yarn && yarn build
3. cd packages/static-tweets && yarn link && cd node_modules/react && yarn link && cd ../react-dom && yarn link && cd ../../../.. (for some reason i need to make sure react and react-dom are the same version so i link them too; this is probably me not understanding 100 % how to use yarn link)
4. cd example/ && yarn link static-tweets && yarn link react && yarn link react-dom && yarn && yarn dev
5. Works.
6. (don't forget to clean-up those links)

If i understood this better i'd send a PR but i'm clueless. With some guidance maybe i could.

Error

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/martin/<...>/react-static-tweets/example/node_modules/static-tweets/node_modules/unist-util-visit/index.js
require() of ES modules is not supported.
require() of /home/martin/<...>/react-static-tweets/example/node_modules/static-tweets/node_modules/unist-util-visit/index.js from /home/martin/<...>/react-static-tweets/example/node_modules/static-tweets/build/cjs/markdown/rehype-tweet.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/martin/<...>/react-static-tweets/example/node_modules/static-tweets/node_modules/unist-util-visit/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/home/martin/<...>/react-static-tweets/example/node_modules/static-tweets/build/cjs/markdown/rehype-tweet.js:4:26)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/home/martin/<...>/react-static-tweets/example/node_modules/static-tweets/build/cjs/markdown/htmlToAst.js:45:38)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32) {
  code: 'ERR_REQUIRE_ESM'
}

Workaround

Lock to static-tweets@0.5.3.

[normdoow]

Thanks for the workaround. I was getting this as well. 😁

[transitive-bullshit]

This has been fixed as of 0.6.0. Thanks!