benjazehr / svelte-example-museums Goto Github PK

Followed your rollup setup on my app but I'm getting SCRIPT445: Object doesn't support this action. Can't seem to find a solution. Any ideas?

Hey Angelo;
Great post on svelte and ie11 support - I tried using the approach but ran into the following issue - also I tried your museums example and also had the same issue

Function.prototype.toString: 'this' is not a Function object

Any thoughts here what is the cause?

It fails to load properly with Internet Explorer 11.
Issue:
SCRIPT5002: Function.prototype.toString: 'this' is not a Function object

I tried both of the ways you suggested, buble first, but that failed colossal (errors in modern browsers too) for me. So i tried babel with your tweaks.

But it still fails with an undefined Promise in ie11 and there might be even more bugs for ie11 there.

I'd be happy if you can take a look.
If needed, i can point you to the complete code, but here's my rollup-config, for starters:

import svelte from 'rollup-plugin-svelte';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import { scss } from '@kazzkiq/svelte-preprocess-scss';
import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { uglify } from "rollup-plugin-uglify";
// 
const production = !process.env.ROLLUP_WATCH;
// 
const filepath = 'public/ng-cb/ng-cb.js';
// ----------------------- ROLLUP-Options ------------------------->
export default {
	input: ['src/Main.js'],
	output: {
		sourcemap: false,
		format: 'iife',
		name: 'app',
		file: filepath,
	},
	plugins: [
		svelte({
			dev: !production,
			preprocess: {
	        	style: scss({
	        		outputStyle: 'compressed',
	        		sourceMap: false,
	        		file: 'public/ng-cb/ng-cb.css'
	        	}, { name: 'scss' } ),
	      },
		}),
		resolve({
			browser: true,
			dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
		}),
		!production && livereload('public'),
		babel({
			babelrc: false,
      	extensions: [ '.js', '.mjs', '.html', '.svelte' ],
      	babelHelpers: 'runtime',
      	exclude: [ 'node_modules/@babel/**', 'node_modules/@babel/core/**' ],
      	presets: [
        		[
	          	'@babel/preset-env',
	          	{
	            	targets: '> 0.5%, last 2 versions, not dead',
	            	modules: false,
	            	spec: true,
	            	forceAllTransforms: true,
	            	useBuiltIns: 'usage',
	            	corejs: 3,
	            	debug:true
	          	}
	        ]
      	],
      	plugins: [
        		'@babel/plugin-syntax-dynamic-import',
        		['@babel/plugin-transform-runtime', {
         		useESModules: true
          	}]
      	]
 		}),
		// commonjs({
		// 	sourceMap: true,
		// }),
		// uglify({

		// }),
		production && terser(),
	],
	watch: {
		clearScreen: false
	}
};

I started to code this "blob of code", which will widely be used in completely different situations: CMS, SPAs etc. So i wanted a single src-file and Svelte seemed to be perfect for this without much fuzz and without much tooling i thought.
Now i want to support ie11 (well i dont want to, but it'd be nice, complaining customer ... ) and whatever i try somethings still fail.
The "App" is one base Svelte file which uses some other svelte components and the most "critical" code is in Main.js
The problem i'm facing seems to be, that i'm probably (conf~)using babel with mixed js-styles and or incompatible versions of rollup-plugins etc (the exact point i wanted to avoid: the dependency-hell).

This is exactly what I'm looking for, but following these steps, the page does not load in IE

git clone https://github.com/angelozehr/svelte-example-museums.git
npm install
npm run dev
Browse to http://localhost:5000 in IE 11

Text shown is lorem ipsum
Error in debugger:
redefine.js line 38: Function prototype.toString: 'this' is not a Function object

any help would be appreciated,
Felix

When testing out svelte on an existing legacy application, it may be beneficial to compile the code into a single html file. Using https://github.com/remy/inliner is a quick and dirty solution for inlining those resources. Posting and closing as a future note to self (who knows, it may help others too)

Thanks for the template! It’s super helpful.