Support Rollup and ES5
See original GitHub issueFirst of all thanks for the lib 😃 It looks very promising, but I struggle getting it to work in my rollup based project where I use ES5 modules.
Disclaimer: Maybe I am missing something essential, as I am new to this whole js module mess. However, other libraries work out of the box for me after importing them in a sapper project (i.e. nodejs framework for svelte). So that is why I still figure this could be an issue in the wildcard-api package.
I do the module conversion with the below rollup.config.js using the commonjs and node-resolve packages.
I played around with the preferBuiltins args of resolve() and commonjs(), but no luck…
It keeps complaining about: Error resolving module specifier: util
in the client
after calling the endpoint id = await wildcard.endpoints.getHelloWorldId();
(Sidenote: also import {endpoints} from '@wildcard-api/client';
as used in the examples, does not work for me, only when I do import wildcard from '@wildcard-api/client';
and use its endpoints property).
Also the build prints the warnings:
'util' is imported by node_modules/@brillout/assert/log.js, but could not be resolved – treating it as an external dependency
'util' is imported by util?commonjs-external, but could not be resolved – treating it as an external dependency
'util' is imported by node_modules/reassert/log.js, but could not be resolved – treating it as an external dependency
But when I add && typeof window === 'undefined'
to @brillout/assert/utils/isNodejs.js
and reassert/utils/isNodejs.js
, those build warnings go away, but not the error caught by the client
// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import commonjs from 'rollup-plugin-commonjs';
import svelte from 'rollup-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import config from 'sapper/config/rollup.js';
import pkg from './package.json';
const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;
const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning);
const dedupe = importee => importee === 'svelte' || importee.startsWith('svelte/');
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
dev,
hydratable: true,
emitCss: true,
preprocess: sveltePreprocess({ postcss: true }),
}),
resolve({
browser: true,
dedupe,
preferBuiltins: true,
customResolveOptions: {
moduleDirectory: 'node_modules'
}
}),
commonjs({}),
legacy && babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: ['node_modules/@babel/**'],
presets: [
['@babel/preset-env', {
targets: '> 0.25%, not dead'
}]
],
plugins: [
'@babel/plugin-syntax-dynamic-import', ['@babel/plugin-transform-runtime', {
useESModules: true
}]
]
}),
!dev && terser({
module: true
})
],
onwarn,
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
replace({
'process.browser': false,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
generate: 'ssr',
dev,
emitCss: true,
preprocess: sveltePreprocess({ postcss: true }),
}),
resolve({
dedupe,
preferBuiltins: true,
}),
commonjs({preferBuiltins: true})
],
external: Object.keys(pkg.dependencies).concat(
require('module').builtinModules || Object.keys(process.binding('natives'))
),
onwarn,
}
};
On another note, there are more warnings when building the client:
Circular dependency: node_modules/@brillout/format-text/index.js -> node_modules/reassert/warning.js -> node_modules/reassert/assert.js -> node_modules/@brillout/format-text/index.js
Circular dependency: node_modules/@brillout/format-text/index.js -> node_modules/reassert/warning.js -> node_modules/reassert/assert.js -> /home/malte/Dokumente/zeug/stage-2/svelte-start/node_modules/@brillout/format-text/index.js?commonjs-proxy -> node_modules/@brillout/format-text/index.js
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
67: return str.length;
68: }
69: const stringWidth = eval('require')('string-width');
^
70: return stringWidth(str);
71: }
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
21: // we use `eval('require')` instead of `require` to
22: // make sure that webpack doesn't bundle `node-fetch`
23: fetch = eval('require')('node-fetch');
^
24: }
EDIT: The above errors disappeared after using the rollup plugins
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';
for the client. However now the client simply catches the error: “require is not defined”
Issue Analytics
- State:
- Created 4 years ago
- Comments:9 (6 by maintainers)
Neat. I’ll consider re-writing everything with ES modules then.
Any luck on that? We can do it together if you want; let me know how things go and I’ll help whenever I can.
I see. If you don’t need SSR then yea don’t use Goldpage.
I know that svelte is marketing itself as mobile performant. Does svelte deliver on that promise? I’m curious.
I like our discussion 😃
Let me know if you still run into problems.