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

sphinxc0re commented 3 years ago

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

wtfiwtz commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

wtfiwtz commented 2 years ago

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"
  }
}

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 commented 2 years ago

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

nning / svelte-rails

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