ember-cli-mirage: @embroider/macros causing builds to fail > v2.2

Honestly. I don’t understand anything about embroider/macros and how it is causing the issues.

I have many years of Ember experience, but this is a complete mystery to me. Is there any documentation I can read up on to get a better understanding?

For anyone else struggling with this, I was able to get things working by forcing @embroider/macros to resolve to a single version in my package.json:

// package.json
{
  // ...
  "resolutions": {
    "@embroider/macros": "1.2.0"
  },
  // ...
}

This seems to work with a number of different possible @embroider/macros versions as long as I rm -rf node_modules before yarn install to ensure conflicting versions are not hanging around and causing issues.

I have many years of Ember experience, but this is a complete mystery to me. Is there any documentation I can read up on to get a better understanding?

The high level documentation for “what is @embroider/macros?” is in RFC 507

The particular reason there is breakage here is that the macros need to share one global configuration, and there was a bug in old versions that can make them choke on certain kinds of configuration, and some newer addons are using @embroider/macros to set that kind of configuration.

It is safe (in fact, much safer, hence this bug) to use yarn resolutions or NPM overrides to force all copies of @embroider/macros up to ^1.0.0. That gets you off the broken pre-1.0 versions.

The path of least resistance to fixing this particular issue cleanly is for ember-cli-mirage to do a major release dropping Node 10 support, without other breaking changes, so that it’s easy for users to upgrade. Node 10 is Very Dead. Even Node 12 has only a month of security patches remaining.

Path forward for anyone having such issue - upgrade to v3.

v3 isn’t working for me. Can’t even get ember-cli to build.

Build Error (broccoli-persistent-filter:Babel > [Babel: @embroider/macros]) in @embroider/macros/runtime.js

<snip>/@embroider/macros/runtime.js: @babel/template placeholder "APP": Expected string substitution

stack:

(node:349084) UnhandledPromiseRejectionWarning: Error: @babel/template placeholder "APP": Expected string substitution
    at applyReplacement (<snip>/node_modules/@babel/template/lib/populate.js:74:13)
    at <snip>/node_modules/@babel/template/lib/populate.js:44:7
    at Array.forEach (<anonymous>)
    at populatePlaceholders (<snip>/node_modules/@babel/template/lib/populate.js:42:43)
    at <snip>/node_modules/@babel/template/lib/string.js:20:51
    at <snip>/node_modules/@babel/template/lib/builder.js:75:14
    at Object.buildLiterals (<snip>/node_modules/ember-element-helper/node_modules/@embroider/macros/src/babel/evaluate-json.js:377:73)
    at Object.inlineRuntimeConfig (<snip>/node_modules/ember-element-helper/node_modules/@embroider/macros/src/babel/get-config.js:107:55)
    at PluginPass.enter (<snip>/node_modules/ember-element-helper/node_modules/@embroider/macros/src/babel/macros-babel-plugin.js:77:38)
    at newFn (<snip>/node_modules/@babel/traverse/lib/visitors.js:177:21)
    =============
    at Object.buildLiterals (<snip>/node_modules/ember-element-helper/node_modules/@embroider/macros/src/babel/evaluate-json.js:377:34)
    at Object.inlineRuntimeConfig (<snip>/node_modules/ember-element-helper/node_modules/@embroider/macros/src/babel/get-config.js:107:55)
    at PluginPass.enter (<snip>/node_modules/ember-element-helper/node_modules/@embroider/macros/src/babel/macros-babel-plugin.js:77:38)
    at newFn (<snip>/node_modules/@babel/traverse/lib/visitors.js:177:21)
    at NodePath._call (<snip>/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (<snip>/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (<snip>/node_modules/@babel/traverse/lib/path/context.js:100:31)
    at TraversalContext.visitQueue (<snip>/node_modules/@babel/traverse/lib/context.js:103:16)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:349084) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:349084) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

We are also talking about the imports in your mirage models, adapters, etc

For example: many people have

import { Model, belongsTo } from 'ember-cli-mirage';

which should be changed to

import { Model, belongsTo } from 'miragejs';

Anything that was extracted to MirageJS (almost everything) should be imported frommiragejs

The things left that ember-cli-mirage exports is setupMirage and things used in defining the server as below.

Previously your routes were the only thing defined in the config.js, now your config.js should look like this

import {
  discoverEmberDataModels,
} from 'ember-cli-mirage';
import { createServer } from 'miragejs';

export default function (config) {
  let finalConfig = {
    ...config,
    models: { ...discoverEmberDataModels(), ...config.models },
    routes,
  };

  return createServer(finalConfig);
}

function routes() {
// define your routes here
}

This now makes our definition of a server look like MirageJS documentation.

For anyone visiting this issue, I was having the reported issue with a fresh new project using Node 20.5.1, Ember 5.3.0, and ember-cli-mirage 2.4.0:

$ ember new mwe
$ cd mwe
$ ember install ember-cli-mirage
$ ember serve

Upgrade ember-cli-mirage to 3.0.0-alpha resolved the issue.

@kpfefferle I tried the resolutions again and this time it worked. I think I neglected to do the rm -rf node_modules last time. Thanks for the tip.