csstips icon indicating copy to clipboard operation
csstips copied to clipboard

Unable to import * from csstips using rollup

Open kellycampbell opened this issue 5 years ago • 1 comments

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

kellycampbell avatar Jul 26 '19 02:07 kellycampbell

I just ran into this on webpack with babel 7 as well. Unfortunately your fix didn't work for me.

brandoncc avatar May 22 '20 05:05 brandoncc