When trying to import in components: Cannot use import statement outside a module

[dinedal]

Simple example:

<script>
  import Button from "svelma/src/components/Button.svelte";
</script>

<Button on:click={() => alert('Clicked!')}>Just a Button</Button>

This results in:

Controller code:

  def index(conn, _params) do
    component_path = "#{File.cwd!()}/assets/js/components/Button.svelte"

    {:safe, helloWorld} = SvelteRender.render(component_path, props)

    render(conn, "index.html", helloWorldComponent: helloWorld)
  end

Is it not possible to import other components when doing SSR?

The same component code renders fine outside of SSR.

[benwoodward]

You absolutely can import components when doing SSR. I'm working on app that relies on this.

The error you're seeing can be caused by different things it seems. It could be caused by using an outdated version of Node for example.

Some issues I've found that might be relevant:

sveltejs/sapper#936
storybookjs/storybook#9421

EDIT: Can you try changing the following:

import Button from "svelma/src/components/Button.svelte";

to:

import { Button } from "svelma/src/components/Button.svelte";

I think Sapper probably does SSR differently to how we're doing it here.

[dinedal]

That change didn't do anything differently than before.

I'm using node v14.2.0

iex(6)> System.find_executable("node")
"/usr/local/bin/node"

And

$ /usr/local/bin/node --version
v14.2.0

I'm not sure how to triage this - I've compared my rollup.config.js with others out there and it seems fine. I do believe this to be an issue with my setup somehow, except all I've done is follow the steps in the readme and here: https://dev.to/joshnuss/setup-phoenix-with-svelte-rollup-36dk

Here is my rollup.config.js anyway:

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import autoPreprocess from 'svelte-preprocess';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';

// it's production mode if MIX_ENV is "prod"
const production = process.env.MIX_ENV == 'prod';

export default {
  input: 'js/main.js',

  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: '../priv/static/js/app.js',
  },

  plugins: [
    svelte({
      preprocess: autoPreprocess({
        scss: {
          includePaths: ['./theme', './node_modules'],
        },
      }),

      dev: !production,
      emitCss: true,
    }),

    // the resolve plugin resolves modules located in node_modules folder
    resolve({
      browser: true,
      dedupe: (importee) =>
        importee === 'svelte' || importee.startsWith('svelte/'),
    }),

    commonjs(),
    postcss({
      minimize: production,
      sourceMap: true,
    }),
    production && terser(),
  ],

  watch: {
    clearScreen: false,
  },
};

[dinedal]

It's like the svelte code isn't being parsed prior to being rendered

[dinedal]

After updating my mix.exs to point to master on this repo instead of the released version, I had a copy of cli.js and after a npm install -g minimist i could run it.

{
  path: '/.../assets/js/components/HelloWorld.svelte',
  error: {
    type: 'SyntaxError',
    message: 'Cannot use import statement outside a module',
    stack: '/.../assets/node_modules/svelma/src/utils/index.js:1\n' +
      "import * as transitions from 'svelte/transition'\n" +
      '^^^^^^\n' +
      '\n' +
      'SyntaxError: Cannot use import statement outside a module\n' +
      '    at Object.compileFunction (vm.js:344:18)\n' +
      '    at wrapSafe (internal/modules/cjs/loader.js:1106:15)\n' +
      '    at Module._compile (internal/modules/cjs/loader.js:1140:27)\n' +
      '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10)\n' +
      '    at Module.load (internal/modules/cjs/loader.js:1040:32)\n' +
      '    at Function.Module._load (internal/modules/cjs/loader.js:929:14)\n' +
      '    at Module.require (internal/modules/cjs/loader.js:1080:19)\n' +
      '    at require (internal/modules/cjs/helpers.js:72:18)\n' +
      '    at Object.<anonymous> (/.../assets/node_modules/svelma/src/components/Button.svelte:7:18)\n' +
      '    at Module._compile (internal/modules/cjs/loader.js:1176:30)'
  },
  markup: null,
  component: null
}
{name: 'Svelte'}

the problem remains

[dinedal]

however i think that's because the cli.js script does even less pre-processing that the rollup verison