Solid.JS support?

[EdoElgx]

Hi All,

I have a Meteor/Sold.JS app which works wonderfully in my dev enviroment.

However, the deployed app just shows the inital page. The console shows React.JS related error messages!

Restart Meteor to enable HMR
react-fast-refresh.js?hash=601323d97e0ae2f7f5b20d6c609bb6847e18cc88:257 Uncaught Error: React Refresh runtime should not be included in the production bundle.
    at module (react-fast-refresh.js?hash=601323d97e0ae2f7f5b20d6c609bb6847e18cc88:257:20)
    at fileEvaluate (modules-runtime-hot.js?hash=0990604f99408d08cb3a9ff8e3bbfa6692eb6570:388:7)
    at Module.require (modules-runtime-hot.js?hash=0990604f99408d08cb3a9ff8e3bbfa6692eb6570:270:27)
    at require (modules-runtime-hot.js?hash=0990604f99408d08cb3a9ff8e3bbfa6692eb6570:310:21)
    at module (react-fast-refresh.js?hash=601323d97e0ae2f7f5b20d6c609bb6847e18cc88:233:20)
    at fileEvaluate (modules-runtime-hot.js?hash=0990604f99408d08cb3a9ff8e3bbfa6692eb6570:388:7)
    at Module.require (modules-runtime-hot.js?hash=0990604f99408d08cb3a9ff8e3bbfa6692eb6570:270:27)
    at require (modules-runtime-hot.js?hash=0990604f99408d08cb3a9ff8e3bbfa6692eb6570:310:21)
    at module (react-fast-refresh.js?hash=601323d97e0ae2f7f5b20d6c609bb6847e18cc88:78:15)
    at fileEvaluate (modules-runtime-hot.js?hash=0990604f99408d08cb3a9ff8e3bbfa6692eb6570:388:7)
dynamic-import.js?hash=caa9f5335c0d8081056ae41330e869efafca0631:19 Uncaught TypeError: Cannot read properties of undefined (reading 'fetch')
    at dynamic-import.js?hash=caa9f5335c0d8081056ae41330e869efafca0631:19:27
    at dynamic-import.js?hash=caa9f5335c0d8081056ae41330e869efafca0631:573:3
jorgenvatle_vite-bundler.js?hash=1f92769c7dd6097da13acb9d3cc8ecb55533e89f:18 Uncaught TypeError: Cannot read properties of undefined (reading 'fetch')
    at jorgenvatle_vite-bundler.js?hash=1f92769c7dd6097da13acb9d3cc8ecb55533e89f:18:27
    at jorgenvatle_vite-bundler.js?hash=1f92769c7dd6097da13acb9d3cc8ecb55533e89f:352:3

This is my vite.config.js file:

import { defineConfig } from 'vite'
import solidPlugin from 'vite-plugin-solid'
import solidSvg from 'vite-plugin-solid-svg'
import suidPlugin from '@suid/vite-plugin'

export default defineConfig({
  plugins: [suidPlugin(), solidPlugin(), solidSvg({
    defaultExport: 'component'
  })],
  meteor: {
    clientEntry: 'imports/ui/main.jsx',
    stubValidation: {
      warnOnly: true
    }
  }
})

Does meteor-vite support Solid.JS? If so, how should I configure it?

Thank you.

[JorgenVatle]

Hmm. Not sure where the culprit for this is. If you have the chance, could you set up an example repository reproducing the issue so I have something to test against? 🙏

[EdoElgx]

@JorgenVatle I added you to the repo. Let me know if it helps or if you need a brand new repo.

[JorgenVatle]

Thank you. I'll try to get through it today or later in the week. 🙌

[EdoElgx]

Great!

[JorgenVatle]

Hey there! @EdoElgx So sorry for taking so long to get through to this. I didn't manage to catch that repo invitation in time. Any chance I could get another one? 🙏

[EdoElgx]

Sure. In a minute.

[JorgenVatle]

Thank you! This one had me scratching my head for quite a while.

It seems like we're running into an edge-case with the Meteor JS minifier. When pulling down your project, I ran into the following error message upon building for production.

Related to https://github.com/meteor/meteor/issues/11644.

Moving the Vite entrypoint from imports/ui/main.jsx to e.g. imports/entrypoint/vite.js seems to have resolved the issue during production builds. I haven't been able to reproduce the error message mentioned in the issue. However. the app appears to load just fine after moving the entrypoint. 👍

[EdoElgx]

Jorgen,

Thank you so much for your answer.

I tried the changes in your pull request, but I get this:

❯ node main.js
⚡   Starting Vite server...
/Users/edoelk/Developer/ademsys/temp/vite-test/bundle/programs/server/npm/node_modules/meteor/promise/node_modules/meteor-promise/promise_server.js:218
      throw error;
      ^

MeteorViteError:
⚡  Unable to locate Meteor-Vite workers! Make sure you've installed the 'meteor-vite' npm package.
 L Install it by running the following command:
 L $  npm i -D meteor-vite
    at createWorkerFork (packages/jorgenvatle:vite-bundler/workers.ts:15:15)
    at module (packages/jorgenvatle:vite-bundler/vite-server.ts:23:24)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at require (packages/modules-runtime.js:258:21)
    at /Users/edoelk/Developer/ademsys/temp/vite-test/bundle/programs/server/packages/jorgenvatle_vite-bundler.js:619:15
    at /Users/edoelk/Developer/ademsys/temp/vite-test/bundle/programs/server/packages/jorgenvatle_vite-bundler.js:624:3
    at /Users/edoelk/Developer/ademsys/temp/vite-test/bundle/programs/server/boot.js:385:38
    at Array.forEach (<anonymous>)
    at /Users/edoelk/Developer/ademsys/temp/vite-test/bundle/programs/server/boot.js:210:21
    at /Users/edoelk/Developer/ademsys/temp/vite-test/bundle/programs/server/boot.js:439:7
    at Function.run (/Users/edoelk/Developer/ademsys/temp/vite-test/bundle/programs/server/profile.js:256:14)
    at /Users/edoelk/Developer/ademsys/temp/vite-test/bundle/programs/server/boot.js:438:13

What meteor version are you using? And node version?

Thanks again.

[JorgenVatle]

Oh, is that from running the production bundle?

If so, make sure that NODE_ENV isn't set to something like 'development' or undefined.

I'm running the server using the Meteor-tool's bundled Node version. $ meteor node main.js

Node v14.21.3 Meteor v2.12

[EdoElgx]

Yes. That was from the production bundle.

Clearing NODE_ENV did the trick, but now when I run it all I get is a static page (client/main.html). More or less the same I had at the beginning, but without any console error message.

Cheers!

[JorgenVatle]

Oh, I don't believe that's not the case on my end.

Would you be okay if I added a workflow to your repo with some build steps to make sure we're seeing the same thing?

[EdoElgx]

Sure, no problem.

BTW, I just executed: meteor build ../temp/vite-test

[EdoElgx]

It runs on a fresh Ubuntu 22 installation. That's the target, so that's perfect.

It doesn't work on local macOS 14.1 (Intel and M1). Any idea why?

Thanks!

[JorgenVatle]

Same production bundle, just works on Ubuntu but not Mac OS? 👀

Or do you mean when built on Mac OS, it doesn't work?

[EdoElgx]

Sorry, I mean when built on macOS, the resulting bundle doesn't work, either locally or for Linux.

As I mentioned, I used a simple meteor build <path_to_build>. May be I'm missing some important parameter for the build command (apart from the architecture)?

Anyway, I cloned the repo in another fresh Ubuntu VM and the build works perefectly.

My conclusion: Building in macOS doesn't work. We'll try in another few mac machines and let you know the results.

[JorgenVatle]

Oh, that's interesting.

If you put the following into your package.json, do you still have the same issue?

"meteorVite": {
  "tempDir": ".build" 
}

[EdoElgx]

Jorgen,

I put that code in package.json and I get the same result: A static page, no console messages/errors:

I've tried in just one Intel machine. Tomorrow we'll test in other machines (M1) and let you know.

Thank you.

[EdoElgx]

Update: On M1 mac, it works ok.

On Ubuntu, it always works.

[JorgenVatle]

I see. So I'm guessing just an environment thing then - thinking maybe Meteor or npm had cached an older version of the packages. But if it works, it works. 😄

If you run into the issue again, do let me know. 🙌