Wails init using Svelte fails

[SophieAu]

Description

When trying to initialize a new project using the Svelte template, the frontend build fails with what looks like a bundler error.

To Reproduce Steps to reproduce the behaviour:

1. run wails init selecting Svelte (3) as the frontend template
2. See below for the error that appears

System Details

Name	Value
Wails Version	v1.11.0
Go Version	go1.15.5
Platform	darwin
Arch	amd64
GO111MODULE	on
GCC	12.0.0
Npm	6.14.9
Node	v14.4.0

Additional context This is the error message:

wails init                                                                                                                                                                             
Wails v1.11.0 - Initialising project

The name of the project (My Project): test-project
Project Name: test-project
The output binary name (test-project): 
Output binary Name: test-project
Project directory name (test-project): 
Project Directory: test-project
Please select a template (* means unsupported on current platform):
  1: Angular - Angular 8 template (Requires node 10.8+)
  2: React JS - Create React App v4 template
  3: Svelte - A basic Svelte template
  4: Vanilla - A Vanilla HTML/JS template
  5: Vue3 Full - Vue 3, Vuex, Vue-router, and Webpack4
  6: Vue2/Webpack Basic - A basic Vue2/WebPack4 template
  7: Vuetify1.5/Webpack Basic - A basic Vuetify1.5/Webpack4 template
  8: Vuetify2/Webpack Basic - A basic Vuetify2/Webpack4 template
Please choose an option [1]: 3
Template: Svelte
✓ Generating project...
⣷ Building project (this may take a while)...
Wails v1.11.0 - Building Application

✓ Ensuring frontend dependencies are up to date (This may take a while)
⢿ Building frontend...
src/main.js → public/build/bundle.js...
(!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
src/main.js: (5:12)
(!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
src/main.js: (16:7)
(!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/svelte/internal/index.mjs: (41:12)
(!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/svelte/internal/index.mjs: (1830:9)
  4017 | 
  4018 |     return Object.prototype.hasOwnProperty.call(obj, prop);
> 4019 |   }.bind(undefined);
       |   ^ Unexpected token: punc (.)
  4020 | 
  4021 |   var is_client = typeof window !== 'undefined';
  4022 |   var now = is_client ? function () {
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
src/main.js
3: import _newArrowCheck from "@babel/runtime/helpers/esm/newArrowCheck";
4: 
5: var _this = this;
               ^
6: 
7: import App from './App.svelte';
...and 1 other occurrence
node_modules/svelte/internal/index.mjs
39: import _newArrowCheck from "@babel/runtime/helpers/esm/newArrowCheck";
40: 
41: var _this = this;
                ^
42: 
43: function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
...and 6 other occurrences
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
@webcomponents/webcomponentsjs (imported by src/main.js)
[!] (plugin terser) SyntaxError: Unexpected token: punc (.)
SyntaxError: Unexpected token: punc (.)
    at js_error (/Users/sophie/test-project/frontend/node_modules/terser/dist/bundle.min.js:546:11)
    at croak (/Users/sophie/test-project/frontend/node_modules/terser/dist/bundle.min.js:1264:9)
    at token_error (/Users/sophie/test-project/frontend/node_modules/terser/dist/bundle.min.js:1272:9)
    at unexpected (/Users/sophie/test-project/frontend/node_modules/terser/dist/bundle.min.js:1278:9)
    at statement (/Users/sophie/test-project/frontend/node_modules/terser/dist/bundle.min.js:1397:17)
    at _embed_tokens_wrapper (/Users/sophie/test-project/frontend/node_modules/terser/dist/bundle.min.js:1322:26)
    at block_ (/Users/sophie/test-project/frontend/node_modules/terser/dist/bundle.min.js:2155:20)
    at _function_body (/Users/sophie/test-project/frontend/node_modules/terser/dist/bundle.min.js:2067:21)
    at function_ (/Users/sophie/test-project/frontend/node_modules/terser/dist/bundle.min.js:1711:20)
    at expr_atom (/Users/sophie/test-project/frontend/node_modules/terser/dist/bundle.min.js:2489:24)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-project@ build: `rollup -c`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the test-project@ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sophie/.npm/_logs/2021-01-23T19_45_48_945Z-debug.log

> test-project@ build /Users/sophie/test-project/frontend
> rollup -c

✗ Building frontend...
Error: exit status 1

✗ exit status 1
Error: exit status 1

[leaanthony]

Hi @SophieAu - Thanks for raising this. Looks like something has changed upstream. Will investigate today 👍

[leaanthony]

Yeah, looks like I've found the issue. It's in svelte. The has_prop method gets compiled to something that's invalid.

[SophieAu]

I've looked into it some more and it looks like the issue gets triggered when the spec option is set in the babel plugin in the rollup config (https://github.com/wailsapp/wails/blob/master/cmd/templates/svelte/frontend/rollup.config.js#L83).

...
'@babel/preset-env',
{
  targets: '> 0.25%, not dead, IE 11',
  modules: false,
  spec: true, 
  useBuiltIns: 'usage',
  forceAllTransforms: true,
  corejs: 3,
},
...

If you set the value to false or delete it the build seems to run just fine.

Is there a specific reason that line has to be in there? From the docs it seems not too important (https://babeljs.io/docs/en/babel-preset-env#spec) but this is the first time I've ever played around with babel so some input from someone with more experience would probably be a good idea.

[leaanthony]

You rock! Great sleuthing. If you have time, it would be great to get a PR for this. The templates are in cmd. If not, i'll try and dind time tomorrow. We PR against develop. Cheers!

[SophieAu]

This should be fixed with PR #593

[leaanthony]

@SophieAu - The latest pre-release has this fix. Please install using wails update -pre. Thanks again! 👍