Ember Upgrade on Mac M1

Ember CLI
1

So question, our Ember app was no too long ago upgraded to 3.28 and I was asked to explore updating from our current direct API calls to using GraphQL. This seems like it should be an easy way to do things but of course nothing is that simple.

I installed ember-auto-import - npm but of course that now relies on webpack 5 and I think 3.28 is still webpack 4 or not using webpack. Not sure on that one. So I tried to upgrade Ember and well that did not work because Node-Sass does not support the M1 architecture… so it will not allow any upgrades. Node Sass is deprecated but I assume some of the add ons are older and relying on it.

Creating a brand new app in the new ember cli works just fine. The entire company is slowly migrating to M1 macs but I believe if I was on my old computer I could probably upgrade and then patch something to make it build (i.e alias node-gyp to 9.4 or npm rebuild node-sass or something) but being blocked on even starting an update.

Just hoping I am missing something obvious.

Thanks

2

Hi @sanshou our team just went through the same thing. I managed to shim an old python into my laptop (running in Rosetta) to get the build working ok, but that obviously wasn’t a viable solution for us long-term so we migrated from “node-sass” to “sass”:

-    "node-sass": "^4.14.1",
     ...
+    "sass": "^1.58.3",

It did require changing some of our SASS code to match some pickier syntax rules but it wasn’t all that bad and well worth the time. I think everything runs a little faster now and we don’t have build issues on any architecture.

3

Our application already uses sass and not node-sass. It has never used node-sass. It is being used by various other packages including broccoli

broccoli-sass-source-maps@^2.0.0:
  version "2.2.0"
  resolved "https://artifactory.sie.sony.com/artifactory/api/npm/ce-sie-npm-prod-virtual/broccoli-sass-source-maps/-/broccoli-sass-source-maps-2.2.0.tgz#1f1a0794136152b096188638b59b42b17a4bdc68"
  integrity sha1-HxoHlBNhUrCWGIY4tZtCsXpL3Gg=
  dependencies:
    broccoli-caching-writer "^3.0.3"
    include-path-searcher "^0.1.0"
    mkdirp "^0.3.5"
    node-sass "^4.7.2"
    object-assign "^2.0.0"
    rsvp "^3.0.6"

So it not something I can just remove from out project without finding all the dependencies and getting them to remove it.

4

I cannot even use ember version.

****** ~/code/******* [*********/cafe/graphql] $ ember --version
Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Unsupported runtime (108)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1


Stack Trace and Error Report: /var/folders/d4/lwkm56r125dflpd09kfl939c0000gp/T/error.dump.a0f3e14025db19a9c2eaba2142b43d38.log
5

Sounds like you should try to upgrade ember-cli-sass?

We are on a newer broccoli-sass-source-maps via newer ember-cli-sass and it no longer includes node-sass by default:

  /ember-cli-sass@11.0.1:
    resolution: {integrity: sha512-RMlFPMK4kaB+67seF/IIoY3EC4rRd+L58q+lyElrxB3FcQTgph/qmGwtqf9Up7m3SDbPiA7cccCOSmgReMgCXA==}
    engines: {node: '>= 10.*'}
    dependencies:
      broccoli-funnel: 2.0.2
      broccoli-merge-trees: 3.0.2
      broccoli-sass-source-maps: 4.1.0
      ember-cli-version-checker: 2.2.0
    transitivePeerDependencies:
      - supports-color
...
  /broccoli-sass-source-maps@4.1.0:
    resolution: {integrity: sha512-So3gTlP9AEJTponlRoL9Ti+xaMX1LnJUWD52mVT0Oq6PI8nIjX97XMW91JfY/4CXsprIDyGe/7rkiauE+XHdPQ==}
    engines: {node: '>=10.24.1'}
    dependencies:
      broccoli-caching-writer: 3.0.3
      include-path-searcher: 0.1.0
      rsvp: 4.8.5
    transitivePeerDependencies:
      - supports-color
6

That got me farther… now a different error running but at least the upgrade and the sass errors are gone.

7

that now relies on webpack 5 and I think 3.28 is still webpack 4 or not using webpack

FWIW Webpack isn’t a dependency of Ember unless you’re using embroider, so you should have no issues moving to webpack 5 (without upgrading Ember past 3.28) as long as you can safely follow the upgrade guide for auto import. We had to update our prod deploy config a little bit with the new chunks but it wasn’t too bad. Getting to babel >6 compat was a bit challenging as we had to update a lot of addons.

In general I’d recommend updating your addons to the furthest forward compatible version you can before/during upgrades. I find most of the issues upgrading are due to subtle addon dependency or build issues.

8

FWIW Webpack isn’t a dependency of Ember unless you’re using embroider,

webpack is in the default blueprint, because it’s used to import dependencies from npm - and is mentioned in the auto-import upgrade guide :upside_down_face:

9

I basically got everything working. The only problem I have with the changes above is that now it takes forever for the page to first build and load often causing our application to timeout. Even without doing the auto import section, just updating the version of ember-cli-sass to remove node-sass causes this to be extremely slow.

Basically our application is running in another application in an iFrame to handle certain secure transactions. We built in a layer to communicate securely and if the ember application does not respond in a certain amount of time that layer will trigger an exception that it failed to load.

This is all in a development platform and developers could work around this but for automated testing this could be nightmarish using docker containers since the first load would fail every time.

10

Ha :man_facepalming: yeah forgot EAI is in the default blueprint whoops

@sanshou glad you got everything “working” at least. Curious… is there some way you can sync the outer application to the inner application more closely? Like what causes it to start waiting for the Ember app? I think Embroider and Vite will alleviate a lot of these problems but hard to say how much of a migration that would be for you.