Forem: NullVoxPopuli

Errors encountered with one-shot AI

NullVoxPopuli — Thu, 18 Dec 2025 20:51:00 +0000

This is a lists of silly errors I've seen agents encounter, and how they should fix them.

Could not resolve `@glimmer/application.json`

Error

✘ [ERROR] Could not resolve "@glimmer/application.json" [plugin embroider-esbuild-resolver]

    node_modules/.pnpm/@glimmer+component@1.1.2_@babel+core@7.28.5/node_modules/@glimmer/component/dist/modules/es2017/src/component.js:2:36:
      2 │ import { setComponentManager } from '@glimmer/application';
        ╵                                     ~~~~~~~~~~~~~~~~~~~~~~

Solution

Upgrade @glimmer/component to ^2.0.0

failed to load config from vite.config.mjs ... ember-scoped-css

Error

failed to load config from <repo>/vite.config.mjs
error when starting dev server:
file://<repo>/node_modules/.vite-temp/vite.config.mjs.timestamp-1766089944685-a3e3cc4ce187e8.mjs:5
import scopedCss from "file://<.pnpm>/<package path>/ember-scoped-css/src/build/public-exports/vite.js";

Solution

Read the docs at https://github.com/auditboard/ember-scoped-css to see how to configure vite

ERR_PNPM_NO_MATCHING_VERSION ... for @glimmer/tracking@^2.0.0

Error

ERR_PNPM_NO_MATCHING_VERSION  No matching version found for @glimmer/tracking@^2.0.0

Solution

Remove @glimmer/tracking from package.json. It is a virtual package provided by ember-source via the ember() vite plugin.

RegExp.escape is not a function (or other node related version issues)

Error

  ✘ [ERROR] <file-path>: RegExp.escape is not a function [plugin <plugin-name>]

Solution

Use node 24, likely by updating either the package.json.volta config or the engines.node option (which many tools read).
If the environment is using proto, delete the .nvmrc or update it to also use noed 24.

Multiple exports with the same name "default"

Error

✘ [ERROR] Multiple exports with the same name "default"

    src/components/search-widget.gjs:99:7:
      99 │ export default setComponentTemplate(createTemplateFactory(
         ╵        ~~~~~~~

  The name "default" was originally exported here:

    src/components/search-widget.gjs:1:0:
      1 │ import Component from '@glimmer/component';
        ╵ ~~~~~~

<file-name> (330:0): Duplicate export "default"
file: <file-name>:330:0

328: }
329: 
330: <template>
     ^

Solution

This happens because the agent did this:

export default class X extends Component { ... }

<template>
...
</template>

This is an incorrect understanding of how gjs works, and the Agent should review the #ember-mcp-provided documentation again, or check this brief overview.

The <template>...</template> must go inside the component like this:

export default class X extends Component { 
  // ...

  <template>
  ...
  </template>
}

When having bare <template>...</template> in module space, that is known as the "implicit default form", as described in RFC #779

Logging tests to the terminal in browser tests to help AI find your test results

NullVoxPopuli — Thu, 06 Nov 2025 16:45:11 +0000

Before doing this though, you should see if your AI tool has tool to run your browser tests (VSCode has simpleBrowser, for example). That will yield better output, behavior, and interactions. AIs currently mistakenly want to use bad terminal commands for everything, so it's never a default for an AI to run tests in the browser without first being told.

When using vite, you have a huge ecosystem of plugins to choose from.

If you don't already have a vite app

Create one via:

pnpm dlx ember-cli@latest new demo-terminal-logging-during-ember-browser-testing --pnpm
cd demo-terminal-logging-during-ember-browser-testing

I found https://github.com/patak-dev/vite-plugin-terminal by Patak, one of the vite developers!

Setting this plugin up an an ember project to get browser-test results in the terminal is quite straight-forward:

In your vite config, add the plugin:

+ import Terminal from 'vite-plugin-terminal';

  export default defineConfig({
    plugins: [
+     Terminal({ console: 'terminal' }),
      ember(),
      babel({
        babelHelpers: 'runtime',
        extensions,
      }),
    ],
  });

And QUnit doesn't log to the console in /tests mode by default, so let's add some logging in tests/test-helper.js

import * as QUnit from 'qunit';

QUnit.testDone(function (info) {
  let status = info.failed === 0 ? '✅' : '❌';
  let statusText = info.failed === 0 ? 'passed' : 'failed';
  console.group();
  console.log(`${status} ${info.module} > ${info.name}: ${statusText}`);
  console.log(`   Assertions:`);
  for (let assertion of info.assertions) {
    console.log(`     ${assertion.result}: ${assertion.message}`);
  }
  console.log('');
  console.groupEnd();
});

And that's it!

Now when you run tests, you'll get output like this:

» [vite] connected.
» DEBUG: -------------------------------
» DEBUG: Ember : 6.8.1
» DEBUG: -------------------------------
»   ✅ example > example test: passed
»      Assertions:
»        true: okay
»
»   ✅ ember-qunit: Ember.onerror validation > Ember.onerror is functioning properly: passed
»      Assertions:
»        true: Ember.onerror handler with invalid testing behavior detected. An Ember.onerror handler _must_ rethrow exceptions when `Ember.testing` is `true` or the test suite is unreliable. See https://git.io/vbine for more details.
»

Try it out here: https://github.com/NullVoxPopuli/demo-terminal-logging-during-ember-browser-testing

Repository growth over time

NullVoxPopuli — Fri, 15 Aug 2025 15:18:00 +0000

For large corporate projects where performance often comes up, it's important to take things in to perspective.

I like to use codebase size over time, which can be measured with tokei.

And then there is are a couple secret git commands to checkout commits with relative dates.

Git will actively fight you trying to fetch every commit for all of time.

See this other post for more/related information.

git checkout $(git rev-list -1 --before="Aug 15 2024" main)

There is a more ergonomic way to checkout old commits, but it only works if you already have the list of commits fetched, which is less easy to do than the above

git checkout main@{1.year.ago} 
# warning: log for 'main' only goes back to Tue, 15 Jul 2025 ...

This would get you the wrong commit (from only a month ago, instead of a year ago)

Once we have the old commit (verified with the top of git log), we can run tokei

tokei
#  Total                 18638      1981370      1671372        92166       217832
#                                   ^ total lines

What to do when your git worktree is not detecting file changes

NullVoxPopuli — Mon, 07 Apr 2025 16:20:11 +0000

I find that I run in to this problem about every other month or so -- just long enough to forget how to solve it.

Here is the situation:

I have local changes
editor tools can point out which lines have changes
my cat replacement (bat), shows the changed lines

The Problem:

git diff and git status report no local changes
creating new files also do not show up in git diff and git status

This leads to me being unable to create a commit.

What I expect:

git status to show changed files, and the new file, if I make one
git diff should only show changed tracked files (it wouldn't report new / untracked files by default)

Things I've verified:

The working directory of both the copy of the repo with the file changes and the terminal where I'm checking git status are the same (sometimes it's easy to forget you can be in two very similar directories (but not exactly) when using worktrees) -- this is verified because bat shows line-wise git information in the gutter.

The fix

git update-index --no-assume-unchanged ./file1
git update-index --no-assume-unchanged ./file2

# for every package.json
git update-index --no-assume-unchanged  $(git ls-files | grep package.json)

# for all files 
# (for large repos we can't use the above command because 
#   update-index has a limit on the number of args passed)
#
# NOTE: this can be very slow
for file in $(git ls-files); do
  git update-index --no-assume-unchanged $file
done

On the repo I have at work where I run in to this problem, I have to do the above fix in every worktree and commit.

It seems once I commit in a particular worktree, git starts tracking files automatically again.

of note, the work computer:

is macOS 15.3.2, but I observed this behavior on 14.x, as well
has various security tools on it, but they've been changed out a number of times, so I don't think I can blame a specific one
git is installed via homebrew
permanently in clamshell mode (laptops are notoriously not good at this -- especially macOS)

On Linux, I also make heavy use of worktrees, but have not run in to this problem -- but it's hard to compare

no XProtect (mac's default security software part of "System Integrity Protection")
I manage the system myself
I don't use clamshell (I use my linux laptop as an actual laptop, and my linux desktop... has no clamshell mode haha)

Vite supports your ember project back to ember 3.28!

NullVoxPopuli — Sun, 06 Apr 2025 21:44:48 +0000

Originally posted by the EmberJS account on bluesky

Last week the Ember Tooling team released the embroider project from alpha to stable, signalling that non-explorers should now try Vite with their ember projects if they want a massive performance boost to their build system.

There is a codemod by mainmatter to help everything with their migration.

It (and embroider-vite) supports every LTS form 3.28+ and then ember-source 5.12+

So that's

3.28
4.4
4.8
4.12
5.4
5.8
5.12
6.4+

That is > 4 years of supported ember versions!

There are now many vite-using ember apps in the wild, and I look forward to seeing what all everyone comes up with!

Ember.js Acquires React in Hostile Takeover, Demands it Learn Real Reactivity

NullVoxPopuli — Sun, 06 Apr 2025 21:07:36 +0000

for April 1st day, I asked GPT to make an onion headline... and OMG Chat GPT is savage.

Originally posted on bluesky

It reads:

Ember.js Acquires React in Hostile Takeover, Demands It Learn Real Reactivity

React agrees to add templates, router, and sense of humility.

Vue.js declines to comment, just sips tea.

Just 🧑‍🍳

I wonder what source material it pulled from?
Is there a way to even know?

One shot convert React to Ember with AI

NullVoxPopuli — Sun, 06 Apr 2025 19:50:00 +0000

Original Post on bluesky

Using the Ember Assistant custom GPT, you can one-shot convert React components to Ember components.

For example, I asked the Ember Assistant, simply:

Can you convert this React component to Ember?

```jsx
import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <>
      <div>This is our counter Application</div>
      <div>
        <button onClick={decrement}>-</button>
        <span>Clicks {count}</span>
        <button onClick={increment}>+</button>
      </div>
    </>
  );
}
```

And this was Chat GPT's response -- which is not only correct, but also fixes a couple bugs!:

Here's a modern Ember (Polaris edition) version of your React Counter component using the .gjs format:

app/components/Counter.gjs

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class Counter extends Component {
  @tracked count = 0;

  increment = () => {
    this.count++;
  };

  decrement = () => {
    this.count--;
  };

  <template>
    <div>This is our counter Application</div>
    <div>
      <button type="button" {{on "click" this.decrement}} aria-label="Decrease count">-</button>
      <span>Clicks {this.count}</span>
      <button type="button" {{on "click" this.increment}} aria-label="Increase count">+</button>
    </div>
  </template>
}

Notes:

Uses @tracked for reactivity.
Uses arrow functions for actions (increment, decrement) — no need for the @action decorator.
The buttons use type="button" and aria-label for accessibility (important in Ember too).
Everything lives in a single .gjs file — ideal for Polaris.

Let me know if you’d like to see this in classic .js + .hbs Octane format too!

NOTE: it seems dev.to doesn't render gjs 🤔

Ember has typesafe HTML

NullVoxPopuli — Sun, 06 Apr 2025 19:47:00 +0000

Original post @ nullvoxpopuli.com

Ember has had typesafe HTML for a while now. Details on getting it set up are here on the Glint repo.

tl;dr: install the pre-release version of the Glint extension and enable @builtin typescript.

We're using the pre-release version of Glint here because it provides a far superior editing than the currently released stable version of Glint. Glint V2 is powered by Volar and lines up nicely with the Polaris efforts to align with broader ecosystem tooling in a way that unblocks all experimentation while also still supporting older code so that large codebase have a path to the modern tooling and DX.

For neovim, I need to PR to the built in configs to make switching to the glint ts-plugin automatic, but here is what it looks like!

Tired of the punycode deprecation message?

NullVoxPopuli — Tue, 06 Aug 2024 19:43:04 +0000

Are you tired of seeing this?:

[DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
     at node:punycode:3:9
     at BuiltinModule.compileForInternalLoader (node:internal/bootstrap/realm:399:7)
     at BuiltinModule.compileForPublicLoader (node:internal/bootstrap/realm:338:10)
     at loadBuiltinModule (node:internal/modules/helpers:96:7)
     at Module._load (node:internal/modules/cjs/loader:1070:17)
     at TracingChannel.traceSync  
     ...

The "Solve"

Change your start or dev script in package.json to be prefixed with:

NODE_NO_WARNINGS=1

For example,
if you previously had

"start": "vite"

change it to

"start": "NODE_NO_WARNINGS=1 vite"

Now you can enjoy console output with 80,000 less lines of spew.

If you are motivated and have the time, it is beneficial to try to help out packages by either:

upgrading them to a version that doesn't trigger the deprecation
PR a fix that doesn't trigger the deprecation (uses a userland module, as instructed).

The userland module is here: https://github.com/mathiasbynens/punycode.js

And you can scan all your dependencies for violations (so you don't have to rely on runtime to find every occurrance) with this tool: punycode-detector

npx punycode-detector

pnpm dlx punycode-detector

This also works for other tools

For example,
if you previously had

"start": "ember serve"

change it to

"start": "NODE_NO_WARNINGS=1 ember serve"

Effects in Ember

NullVoxPopuli — Fri, 07 Jun 2024 15:17:00 +0000

Originally from How to make an effect in Ember?

@trusktr asks:

What’s the equivalent of Solid.js createEffect() (or React useEffect(), Meteor Tracker.autorun(), MobX autorun(), Vue watchEffect(), Svelte $effect(), Angular effect()) in Ember.js?

This is certainly shocking to folks new to ember, but ember deliberately doesn't have an any effect by default.

Now, as a framework author, the concept does sort of exist (at a high level) -- but I'll circle back around to this in a smidge.

In your Solid demo, if you want to log function calls, you'd do:

const a = () => 1;
const b = () => 2;
const c = () => 3;

<template>
  {{log (a) (b) (c)}}
</template>

Some notes on function invocation syntax, if needed

We use templates as the sole entrypoint to reactivity, whereas solid's reactivity is more general purpose. With templates, and being DOM focused (for now), we can ask ourselves:

"If the user can't see the data rendered, does the data need to exist?"

Now, you're demo (with logging) is definitely effect-y. And if you had no other way (like the situation was somehow impossible to model in a derived data way), you can do this:

function myLog() {
  console.log(a(), b(), c());
}

<template>
  {{ (myLog) }}
</template>

This would auto-track, so as the consumed tracked data accessed from each of a, b, and c changed, myLog would get to re-run.
However, this has a caveat: data may not be set within myLog, else an infinite render loop would occur.

This is covered here

Glimmer Tutorial: synchronizing state (to the console in this case)

There is a way around the above caveat, not being able to set during render, by making myLog invoke an async-IIFE, and waiting a tiny bit (i.e.: setting slightly after render):

// now we're passing in the args directly so that they
// are tracked (all args are auto-tracked in all
// function / helper / component / modifier execution
// coming from the template)
function myLog(...args) {
  async function run() {
    await 0;
    // causes a change in a's data
    // and because we awaited, we don't infinite loop 
    setA(); 
    // prints a pre-setA, because a was passed in
    console.log(...args);
  }
 // return nothing, render nothing 
 // (we have no result to show the user)
}

<template>
  {{myLog (a) (b) (c)}}
</template>

This is nuanced, and is why I made this tiny abstraction a whole thing over here https://reactive.nullvoxpopuli.com/functions/sync.sync.html
it's 95% documentation, 5% code 😅

So coming back to:

"We deliberately don't have effects"

Because of a couple current facts about our ecosystem:

we want derived data to be preferred, because it is the most efficient way to have your render state settle
calling a function from a template can only happen after the template is rendered, so doing so causes a second render (I believe this is true in React as well)
there is a need to synchronize external state, and that has been part of the exploration of Resources, and Sync
- Starbeam Docs on Sync
- Starbeam Docs on Resources
- Current ember implementation does not have sync capabilities: ember-resources (due to limitations of the private APIs implementing reactivity (ember-resources is public-API only))
- Tutorial Chapters on Resources
we think that effects are overused and a huge footgun (for app devs), so by documenting a story more around synchronizing external state, we can continue to guide devs in to a pit of success.

Note: Starbeam is where we're extracting our reactivity primitives, and are planning to swap to Starbeam entirely at some point once we work out some composition ergonomics for serial Resources (the coloring problem).

Hope this helps!
If anything is unclear or if you have more questions, let me know!

unsupported ambiguity between helper and component

NullVoxPopuli — Tue, 09 Apr 2024 20:11:33 +0000

This error occurs when you're progressing towards a modern ember app and have the following situation in your embroider options:

staticHelpers: true,
staticComponents: false,

and you reference a helper, such as {{t}} from ember-intl.

Here is the full text:

<path to source of issue>: 
  unsupported ambiguity between helper and component: 
    this use of "{{t}}" could be helper "{{ (t) }}" or
    component "<T />", and your settings for 
    staticHelpers and staticComponents do not agree. 
  Either switch to one of the unambiguous forms, 
    or make staticHelpers and staticComponents agree, 
    or use a "disambiguate" packageRule to work around 
    the problem if its in third-party code you cannot 
    easily fix. 
  in <path to source of issue>

To resolve, in your ember-cli-build.js, you want:

 const { Webpack } = require('@embroider/webpack');

  return require('@embroider/compat').compatBuild(app, Webpack, {
    // ...
    staticHelpers: true,
    staticComponents: true,
    // ...
  });

When both of these options are true, there is no more ambiguity with curly syntax ({{ }}) -- if it exists, it will be either a helper or a component, we don't need to guess at runtime anymore.

Setting up Tailwind, the easy way

NullVoxPopuli — Tue, 24 Oct 2023 20:23:05 +0000

In the root of your ember app, follow these steps

add tailwindcss to your devDependencies
make a config/tailwind folder
copy these files to a your config/tailwind folder.
add <link integrity="" rel="stylesheet" href="{{rootURL}}assets/tailwind.css"> in your app/index.html
add <link rel="stylesheet" href="{{rootURL}}assets/tailwind.css"> in your tests/index.html

add two package.json scripts:

"tailwind:build":
  "npx tailwindcss -c ./config/tailwind/tailwind.config.js -i ./config/tailwind/tailwind-input.css -o ./public/assets/tailwind.css",
"tailwind:watch": 
  "npx tailwindcss -c ./config/tailwind/tailwind.config.js -i ./config/tailwind/tailwind-input.css -o ./public/assets/tailwind.css --watch"

change your build script

"build": "npm run tailwind:build && ember build --environment=production"

add public/assets/tailwind.css to your .gitignore file.

🥳 You did it! you're done now!

When you run your app (or build it), you'll run tailwind:build or `tailwind:watch' along with your app

or, if you have node 18+, you can automate all this with npx ember-apply tailwind

Note that this is an automation of what the Tailwind CLI documentation guides you through (and what the above 6 steps have you do as well)

Forem: NullVoxPopuli

Errors encountered with one-shot AI

Could not resolve @glimmer/application.json

Error

Solution

failed to load config from vite.config.mjs ... ember-scoped-css

Error

Solution

ERR_PNPM_NO_MATCHING_VERSION ... for @glimmer/tracking@^2.0.0

Error

Solution

RegExp.escape is not a function (or other node related version issues)

Error

Solution

Multiple exports with the same name "default"

Error

Solution

Logging tests to the terminal in browser tests to help AI find your test results

Repository growth over time

What to do when your git worktree is not detecting file changes

The fix

Vite supports your ember project back to ember 3.28!

Ember.js Acquires React in Hostile Takeover, Demands it Learn Real Reactivity

One shot convert React to Ember with AI

Notes:

Ember has typesafe HTML

Tired of the punycode deprecation message?

The "Solve"

Effects in Ember

unsupported ambiguity between helper and component

Setting up Tailwind, the easy way

Could not resolve `@glimmer/application.json`