ExecJS::ProgramError: TypeError: bundle.render is not a function

[sphinxc0re]

I get this error when after I just set up a fresh installation of Rails. I did everything according to the README

[wtfiwtz]

Seems related to the component_name - see node_modules/svelte_ujs_ng/svelte_ujs/index.js

  static serverRender(component_name, props) {
    const requireComponent = require.context('components', true)
    const bundle = requireComponent('./' + component_name).default
    const {html} = bundle.render(props)

    return html
  }

[wtfiwtz]

Ok I can confirm it works with these versions:

• Ruby 2.7.2 (for svelte-rails-demo app - which needs mimemagic 0.3.5)
• Rails 6
• Webpacker 4.2.2
• Node 14

There are issues with newer versions of Node and Webpack that need to be resolved.

To get puma to install on Mac Big Sur in the demo app I also needed gem install puma:4.3.5 -- --with-cflags="-Wno-error=implicit-function-declaration" (from https://github.com/puma/puma/issues/2304)

~~You also need to use the version of svelte_ujs that is in this svelte-rails repo... it is linked from package.json to ..\svelte-rails which includes svelte_ujs getSvelteEnvironments.js~~

[wtfiwtz]

This package.json works with my project

{
  "name": "svelte-my-demo",
  "private": true,
  "scripts": {
    "start": "webpack-cli serve --mode development"
  },
  "dependencies": {
    "@rails/actioncable": "^6.1.4-1",
    "@rails/activestorage": "^6.1.4-1",
    "@rails/ujs": "^6.1.4-1",
    "@rails/webpacker": "^4.3.0",
    "svelte": "^3.44.2",
    "svelte-loader": "^2.13.6",
    "svelte-preprocess": "^4.9.8",
    "svelte_ujs": "../svelte-rails",
    "svelte_ujs_ng": "^0.3.4",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.3"
  }
}

[wtfiwtz]

This error seems to come about from upgrading svelte-loader from 2.13.6 to 3.1.2

[wtfiwtz]

It does work with Rails 7.0.0 alpha 2 and Ruby 3.0.0 as long as svelte-loader stays on 2.13.6 (and below 3.0.0).

Here's another package.json:

{
  "name": "svelte-my-demo",
  "private": true,
  "scripts": {
    "start": "webpack-cli serve --mode development"
  },
  "dependencies": {
    "@rails/actioncable": "^7.0.0-alpha2",
    "@rails/activestorage": "^7.0.0-alpha2",
    "@rails/ujs": "^7.0.0-alpha2",
    "@rails/webpacker": "^6.0.0-rc.6",
    "svelte": "^3.44.2",
    "svelte-loader": "~2.13.6",
    "svelte-preprocess": "^4.9.8",
    "svelte_ujs": "^0.0.2",
    "svelte_ujs_ng": "^0.3.4",
    "turbolinks": "^5.3.0-beta.1"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.3"
  }
}

Here's a related issue (https://github.com/sveltejs/svelte-loader/issues/191) and PR (https://github.com/sveltejs/svelte-loader/pull/159) Change log: https://github.com/sveltejs/svelte-loader/blob/master/CHANGELOG.md#300

config\webpack\loaders\svelte-ssr.js needs to have compilerOptions:

module.exports = {
  test: /\.svelte$/,
  use: [{
    loader: 'svelte-loader',
    options: {
      compilerOptions: {
        generate: 'ssr',
        css: false
      },
      emitCss: false
    }
  }],
}

Maybe config\webpack\loaders\svelte.js also needs this:

    {
      loader: 'svelte-loader',
      options: {
        compilerOptions: {
          dev,
        },
        hotReload: true,
        hydratable: true,
        emitCss: true,
        preprocess: sveltePreprocess()
      }
    }

... and it works on svelte-loader between 3.0.0 and 3.1.2

[wtfiwtz]

One caveat is the styling is broken in prerender: true mode...

You can set prerender: false to fix this as a workaround (non-SSR): <%= svelte_component :Hello, {name: 'Svelte'}, {prerender: false} %>

Probably related to the WebPack version... see https://github.com/sveltejs/svelte-loader/issues/169

Unfortunately Webpacker 6 is totally different which makes it hard to upgrade to Webpack 5+ 😭 For example: https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/pull/9