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.

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.

      .then((space) => space.getEnvironment(this.config.environment));
      .then((environment) => environment.getEntry("MY_PARENT_ID"))
      .then((entry) => {
        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:, and this company/repo seems to be verified by docker.

Source: @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 "" `# 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

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

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

More to come…

React Three Fiber Set Default Camera

To set the default camera in 2021+, use state.set exposed from useThree. Note that `setDefaultCamera` does not exist anymore, and every reference would use that.

“setDefaultCamera is not a function”

Instead, use the following:

const Camera = (props) => {
  const ref = useRef();
  const set = useThree((state) => state.set);
  useEffect(() => void set({ camera: ref.current }), []);
  useFrame(() => ref.current.updateMatrixWorld());
  return <perspectiveCamera ref={ref} {...props} />;

React three fiber docs (they are hard to find):