Ember with vite?

Questions
1

Hi Emberistas :wave:

It’s been a long time since I’ve used Ember (:cry:) or been involved in the Ember community. It’s clear a lot of cool stuff has been going on and there’s a lot that has changed.

I’m working on a Rails monolith and my team has a habit of building small React apps for various parts of the frontend to handle pieces that require more interactivity. The build was done with webpack (and the Ruby gem), though recently we’ve switched to vite.

Judging from commit messages in the embroider repo, it seems that embroider is compatible with vite, however some quick Googling hasn’t yielded much in the way of a “how-to” guide or even much in the way of embroider docs.

Goal: ember new some-app and add it to the rails monolith I work on, having it built by our existing (or slightly modified) vite build. Is this a pipe dream?

2

Figured I’d try the simplest, most naïve thing I could: just move a freshly-built ember app to app/javascripts/entrypoints and add a javascript tag to a page, eg

    <%= vite_javascript_tag "entrypoints/test-ember-app/app/app.js" %>

I deleted node_modules from test-ember-app and pushed all the devDependencies from package.json in test-ember-app into the package.json we have in rails root. Ran yarn again and tried to load the page.

[plugin:vite:import-analysis] Failed to resolve import "@ember/application"
19 |  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
20 |  
21 |  import Application from '@ember/application';
   |                           ^
22 |  import Resolver from 'ember-resolver';
23 |  import loadInitializers from 'ember-load-initializers';

It’s probably worth mentioning we’re only on Node 16.20.2, so the latest version of ember-cli I could install was 5.3.0, though I did add these to my package.json file

    "@embroider/compat": "^3.5.5",
    "@embroider/core": "^3.4.14",
    "@embroider/vite": "^0.2.0",

Truly, I have no idea what I’m doing here. Please help! :pray:

3

have you seen the vite blueprint?

2 Likes
4

@NullVoxPopuli ooooh no I had not found that, thank you! I was actually contemplating @'ing you on Twitter but figured I’d poll the hive mind here. Super grateful for your help—I’ll give this a try today :pray:

1 Like