csstips
csstips copied to clipboard
Unable to import * from csstips using rollup
I'm trying to use csstips in a server-side rendered app. The same import style doesn't work for both.
When I use the following in a .tsx file:
import * as csstips from 'csstips';
import * as csx from 'csx';
the resulting rollup js for csstips is this:
var csstips = /*#__PURE__*/Object.freeze({
default: index,
__moduleExports: lib
});
and the generated code has undefined
where I use csstips functions:
style(csstips.vertical, csstips.centerJustified, csstips.width(450))
in the original .tsx file becomes the following in the rolled up js:
style(undefined, undefined(percent(100)), undefined(percent(100))
causing an error like TypeError: undefined is not a function
Changing the import style to this fixes the problem for the browser, but doesn't work for the server side:
import csstips from 'csstips';
import * as csx from 'csx';
The csx
imports work for both SSR and browser however.
Note: I originally reported this issue here as I thought it was a tool problem unrelated to the csstips library code: https://github.com/bazelbuild/rules_nodejs/issues/933
I just ran into this on webpack with babel 7 as well. Unfortunately your fix didn't work for me.