ashour
commented
5 years ago Hello @Sureiya. Yeah this seems to be a known issue with Rollup. To be consistent with native module implementations, Rollup sets this = undefined at the top level in modules. It also displays a warning if a module tries to use this at the top level. intl-messageformat has code that uses this at the top level, which upsets Rollup.
The intl-messageformat code seems to work just fine, however, and I've gotten rid of the warnings by using the suggestion in the Rollup documentation to provide the two culprit modules—node_modules\intl-messageformat\lib\core.js and node_modules\intl-messageformat\lib\compiler.js—with window instead of undefined as the this value. Since all our code runs in the browser, I'm assuming the two modules expect this = window. I've achieve the override in my rollup.config.js:
import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/bundle.js',
},
// 👇🏽 The added `moduleContext` key is the relevant override here.
moduleContext: (id) => {
const thisAsWindowForModules = [
'node_modules/intl-messageformat/lib/core.js',
'node_modules/intl-messageformat/lib/compiler.js',
];
if (thisAsWindowForModules.some(id_ => id.trimRight().endsWith(id_))) {
return 'window';
}
},
// 👆🏽
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file — better for performance
css: css => {
css.write('public/bundle.css');
}
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration —
// consult the documentation for details:
// https://github.com/rollup/rollup-plugin-commonjs
resolve({
browser: true,
dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
}),
commonjs(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};May be this should be addressed in the README doc? Happy to provide a PR if people agree.
kaisermann
Sureiya
omirobarcelo
JohnRSim
I'm currently building a small app using the basic rollup svelte template, and svelte-i18n, and rollup is currently throwing the following warning when I build with locale or dictionary imported.
My package.json
Anyone have any insights here?