Skip to content

Unable to import * from csstips using rollup #13

@kellycampbell

Description

@kellycampbell

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: bazel-contrib/rules_nodejs#933

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions