Styled Components, Next.js, SWC compiler, Production Build sharing too many IDs

I ran into a hard to debug issue today.

The production build of styled-components was failing by sharing a common CSS class for many styled components, but not in dev.

The issue was also fixed when switching to babel from SWC. But that turned out to be another false road.

I started a repo to try to reproduce the bug, but my patterns still failed to fail: https://github.com/department-nyc/next-swc-styled-components-bug/blob/main/next/components/example3.js

The bottom line is that every styled component was outputting a .styledComponentId that was exactly the same, so the logic in the ID generator was somehow not working well with my particular setup. I know that it uses filepaths and all kinds of info to try to reliably identify components uniquely, so it’s just a black box to me.

Ultimately I found the solution in an undocumented option in the typescript typings: withConfig({displayName: <insert unique>}).

const Component = styled.div.withConfig({
            displayName: styleName,  // this was necessary to hint to styled components that these components are dynamic/different. 
        })<TypographyModifierProps>`
            ${handleReset}
            ${css_}
            ${typographyModifiers}
        `

Now, I’m not sure why it works in the example. It may have to do with the monorepo structure or barrel files confusing the file paths. No idea, and not worth digging into. In today’s frontend world, you just have to compartmentalize some things as black boxes.

Bottom line: if you have issues with production styled component ID’s being wrong/the same, try logging the IDs first and see if styled-components is able to generate unique ones as expected. If it can’t, try to give it hints as to its uniqueness.

It looks like withConfig also supports a componentId param to fully customize that internal id, but beware of using unsupported features.

Styled Component CSS Prop Not Working w/ Next.js

If the css styled-components prop isn’t working in Next.js, most answers will point you to the babel plugin (‘babel-plugin-styled-components’) not working, in a bug state, or config problem.

If you’re using the Next.js custom compiler which replaces Babel, the current version simply does not support the css prop. https://nextjs.org/docs/advanced-features/compiler

Either accept slower builds by bypassing the custom compiler with a .babelrc file or find ways around using the css prop.

I basically only use the css prop for defining local css vars, so just pass those vars to the styled component instead if you want to lean on its css engine.

You can always use regular old style as well, if you don’t need anything offered by styled components like selectors.

Use styled components with framer motion

The cleanest way to use framer motion divs with styled components is by passing the replacement motion component via the as styled components prop.

<styles.MyStyledComponent as={motion.div}></styles.MyStyledComponent>

This maintains the same mental flow as replacing a native HTML element with the motion.<ELEMENT> equivalent.

Jekyll Deps — An error occurred while installing ffi (1.9.10), and Bundler cannot continue.

I’m maintaining some very old Jekyll projects on an M1 or otherwise modern system. If you get this error, there are many solutions online but the simplest is to stop trying to install an old dependency.

Try updating the ffi version via bundle update ffi

If your build works after this (e..g bundle exec jekyll) you’re good to go.

Making the old versions of software work is often much hackier.

Contentful Management API (CMA) how to upload references

This is not documented. If it is, please show me where.

To upload a reference field, ensure the reference already exists, and upload an object containing the sys key whose value is an object containing type linkType and id

Example: you have an Entry with id: MY_PARENT_ID with a MY_REFERENCES field.

this.managementClient
      .getSpace(this.config.space_id)
      .then((space) => space.getEnvironment(this.config.environment));
      .then((environment) => environment.getEntry("MY_PARENT_ID"))
      .then((entry) => {
        entry.fields = {
          ...entry.fields,
          MY_REFERENCES: { // replace with your own multi reference field
            "en-US": [
              {
                sys: {
                  type: "Link",
                  linkType: "Entry",
                  id: "my_reference_id"
                },
              },
              // ...repeat as needed
            ],

docker-machine can’t connect to droplet

docker-machine ls outputs: Unable to query docker version: Cannot connect to the docker engine endpoint

Apparently it’s a problem with the latest docker engine version, and you can specify an override to docker-machine via --engine-install-url

There are various versions available here: https://github.com/rancher/install-docker, and this company/repo seems to be verified by docker.

Source: https://www.digitalocean.com/community/questions/unable-to-verify-the-docker-daemon-is-listening @sithembisok

I also had the same problem with Linode so it’s probably an issue on any host. The solution comment above is quite old, so I imagine a lot of folks in the entire ecosystem are having issues. The low visibility and lack of fix on the latest version kind of struck me as odd.

Here’s my Digital Ocean command:

docker-machine create \
        -d digitalocean `# driver` \
        --digitalocean-access-token your-token `# ` \
        --digitalocean-image ubuntu-20-04-x64 `# LTS release` \
        --digitalocean-region sfo3 `# region` \
        --digitalocean-backups=false `# backups` \
        --engine-install-url "https://releases.rancher.com/install-docker/19.03.9.sh" `# use older docker engine; current broken ` \
        default `# machine name`

ERR_UNHANDLED_REJECTION Unexpected token: punc (.) terser

I’m getting a prod only build error that wasn’t very helpful with no line numbers and an error thrown deep in terser.

This error for me turned out to be unsupported handling of the new Optional Chaining operator (foo?.) — make sure if you’re using it your bundler configurations are handling said feature.

In my case I’m using a node environment set up by what looks like a Contentful UI Extension starter app, so I don’t want to modify any build configurations. I just removed it and moved on.

Docker Compose Up (v2) – “Can’t separate key from value”

If you’re trying to use docker compose up and have enabled docker compose v2 in the Docker client, have no trouble using docker-compose up , but get the error “Can’t separate key from value”, then see if your .env file contains any unsupported scripting.

In my case, I had some bash scripting in my .env file from years ago when I used autoenv to activate some local state upon cding into the directory.

Seems like the old docker-compose didn’t mind, but docker compose does. Deleted the scripting and I’m good to go.

Generally speaking when you get this error, review your env files.

M1 Mac Install Python 3.3.7

Installing legacy pythons is _hard_

I think that the trick to installing 3.3.7 is to have homebrew temporarily remove the openssl@1.1 library by entering brew uninstall openssl

Now, install pyenv with the target version, with all the compiler flags for zlib, bzip2 etc., and the arch detect patch.

brew uninstall --ignore-dependencies openssl@1.1

CPPFLAGS="-I$(brew --prefix openssl)/include -I$(brew --prefix bzip2)/include -I$(brew --prefix readline)/include -I$(xcrun --show-sdk-path)/usr/include" 

LDFLAGS="-L$(brew --prefix openssl)/lib -L$(brew --prefix readline)/lib -L$(brew --prefix zlib)/lib -L$(brew --prefix bzip2)/lib"

pyenv install --patch 3.3.7 < <(curl -sSL https://github.com/python/cpython/commit/8ea6353.patch)

This should force the installer to install the applicable (old) openssl == 1.0.2k and successfully complete.

Reinstall openssl@1.1 when complete.

Other things of note:

type in which python if it’s not the pyenv shim, add export PATH="$HOME/.pyenv/shims:$PATH" to your .zshrc

Top post here is also useful for a step by step forced Rosetta brew install that’s comprehensive https://stackoverflow.com/questions/65349982/issues-installing-python-3-x-via-pyenv

I’m still struggling to get a pyenv virtualenvwrapper pip install to appear from the local python.

More to come…

macOS keeps registering my monitor as a new speaker