DEV Community: Tona

XState `ActorProvider` bug

Tona — Sat, 25 Oct 2025 04:39:41 +0000

While I was working with my first project using XState, Astro and React I stumbled upon this nasty error.

Uncaught Error: You used a hook from "ActorProvider" but it's not inside a component.

I only found one issue in Github related to this HMR crash (under very specific circumstances)

// onboarding-form.ts
import { Step1 } from './step-1';

export const MachineContext = createActorContext(machine);

export function OnboardingForm() {
  return (
    <OnboardingMachineContext.Provider>
      <Onboarding />
    </OnboardingMachineContext.Provider>
  );
}

Then I thought it was related to circular dependencies since I was importing the MachineContext in my Step1, then I created the context in a separate file onboarding-machine-context and import it

// onboarding-form.ts
import { Step1 } from './step-1';
import { MachineContext } from './onboarding-machine-context'

export function OnboardingForm() {
  return (
    <OnboardingMachineContext.Provider>
      <Onboarding />
    </OnboardingMachineContext.Provider>
  );
}

And it fixed it. Hope this can help someone else.

Resolving Intellisense Autosuggest (Ctrl + Space) Issues in VS Code on macOS Ventura, Sonoma and Sequoia

Tona — Fri, 22 Dec 2023 15:26:58 +0000

TLDR

Check your global shortcuts

Go to System Settings > Keyboard > Keyboard Shortcuts ... > Input Sources
Disable "Select the previous input source"
Click "Done"
Restart machine
Enjoy!

Introduction

Recently, I encountered a frustrating issue while working in Visual Studio Code on my Mac running macOS Ventura, Sonoma and Sequoia (Thanks for the update). The Intellisense autosuggest, a crucial feature for any developer, suddenly stopped working. After some investigation, I realized that a specific keybinding conflict was the root cause. In this article, I’ll share how I fixed this issue, hoping it will help others facing a similar problem.
The Problem

Intellisense is an essential tool in a developer's arsenal, offering real-time code suggestions, parameter info, and quick fixes. However, a few months ago, it became unresponsive on my setup. The issue was perplexing, as there were no apparent changes in my VS Code settings or extensions that could have led to this.

After a bit of research and troubleshooting, I discovered that the problem was due to a keybinding conflict with macOS Ventura and Sonoma. The default keybinding for Intellisense in VS Code is Ctrl + Space. However, this combination is also used by macOS for switching input sources.
The Solution

Here's a step-by-step guide to resolve this keybinding conflict:
Step 1: Access Keyboard Shortcuts

Navigate to System Settings > Keyboard > Keyboard Shortcuts ... > Input Sources.
Step 2: Modify the Shortcut

Locate the option for "Select the previous input source" and disable it. This step is crucial as it removes the conflict with the VS Code Intellisense shortcut.
Step 3: Save Changes

After disabling the conflicting shortcut, click "Done" to save your changes.
Step 4: Restart Your Machine

For the changes to take full effect, restart your Mac. This ensures that the new settings are applied correctly.
Step 5: Enjoy Uninterrupted Coding

Once your machine restarts, open VS Code and enjoy the seamless functionality of Intellisense autosuggest.
Conclusion

Keybinding conflicts can be a subtle yet frustrating issue, especially when they interfere with essential development tools like Intellisense in VS Code. By following these simple steps, you can quickly resolve such conflicts on macOS Ventura and Sonoma, leading to a more efficient and enjoyable coding experience.

Remember, sometimes the solutions to complex problems are simpler than we think!

Follow me on X @tonadev

Google Analytics Tag using Astro

Tona — Fri, 26 May 2023 15:21:10 +0000

If you are using Astro and want to add Google Analytics with the copy/paste version provided by Google itself, which is the following.

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-V"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      window.gtag = gtag;
      gtag("js", new Date());

      gtag("config", "G-V");
    </script>

Just note that Astro by default would convert the second script tag without any attributes to a module type meaning that the function gtag would be scoped to that single script tag.

The fix is super simple, just remember to add type="application/javascript" so that Astro doesn't infer the script tag to a module one.

<!-- first script tag -->
<script type="application/javascript">

Thanks for reading!

Follow me on Twitter, @tonadev

Photo by Joao Tzanno on Unsplash

Cool way to use staging and production environment with Next.js

Tona — Sat, 27 Mar 2021 05:33:45 +0000

At work we've been using Next.js to develop a new app and so far we've been using only the staging or quality assurance environment, but as time passes the time to deploy this app to production is getting closer.

The task

I had to setup our Next.js app to make it work in multiple environments and load the env variables accordingly, the environments were development, staging and production. After some thought and reading how Next handles the .env files I was sad when I realized that the .env.staging file was not supported (and probably won't be supported in a long time).

I knew I had to keep using Next's cool implementation for .env files, like allowing me to expand variables, and keep some environment variables out of the client side and I didn't want to copy how they do it, because that'd imply adding more code to the project and also not taking advantage of a cool feature of a framework, fortunately I came with a solution.

The solution

Instead of having a .env.production file, I thought that at install time I'll generate the appropriate .env.production file based on a environment variable, I knew that we were using the TARGET_ENV variable to separte the staging and production deployments so if I read that value I can use our good friend node to create the file.

This is the script that I created

After creating that one, I chosen to create a custom step for the app called boot

{
  "scripts": {
     "boot": "npm install && node copyEnvFile.js",
     "copy:env": "node copyEnvFile.js"
  }
}

And that's it you are handling different environments using Next.js native dotenv file management.

Some troubles I faced

Before coming up with the full solution above I faced some problems

Consider the write permits of the user running `npm`

I thought that the best place to do the copy envfile test was inside the next build step, but because of some problems inside the deploying container I was not create files because of ownership permissions.

Using any of the `pre` or `pos` install hook.

In order to run any of the mentioned hooks, npm needs to be spawn by the owner of the files and because there were some unkwown discrepancies I had an error that wouldn't run any of these hooks inside my particular container.

Other alternatives

Using `env-cmd`

Checkout the env-cmd package

With that package you can load a specific .env file based on some variables but I chose not to use it because I'd be loosing cool Next.js features

Using `if-env`

Checkout the if-env package

It's really useful for running certain scripts based on the environment variables but again it's not a good solution because you won't be able to use some Next.js features

Thank you for reading

This is my first dev.to article and I hope you find value in it. See ya!