cssinjs / cssinjs/jss

The official "setup" example crashes with "preset is not a function"

Open
#1,569 3 comments 5 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

__Expected behavior:__
The official "setup" example works

__Describe the bug:__
The official "setup" example crashes

__Reproduction:__

```
npm install jss jss-preset-default
```

Create `test.js`:

```
import jss from 'jss'
import preset from 'jss-preset-default'

jss.setup(preset())

// Create your style.
const style = {
myButton: {
color: 'green'
}
}

// Compile styles, apply plugins.
const sheet = jss.createStyleSheet(style)

// If you want to render on the client, insert it into DOM.
sheet.attach()

// If you want to render server-side, get the CSS text.
sheet.toString()
```

```
$ node test.js
file:///Users/jim/dev/jameshfisher/test/test.js:4
jss.setup(preset())
^

TypeError: preset is not a function
at file:///Users/jim/dev/jameshfisher/test/test.js:4:11
at ModuleJob.run (internal/modules/esm/module_job.js:170:25)
at async Loader.import (internal/modules/esm/loader.js:178:24)
at async Object.loadESM (internal/process/esm_loader.js:68:5)
```

Weirdly, this works:

```
import jssModule from 'jss'
import presetModule from 'jss-preset-default'

const jss = jssModule.default
const preset = presetModule.default

jss.setup(preset())

// Create your style.
const style = {
myButton: {
color: 'green'
}
}

// Compile styles, apply plugins.
const sheet = jss.createStyleSheet(style)

// If you want to render server-side, get the CSS text.
console.log(sheet.toString())
```

__Versions (please complete the following information):__
- jss: 10.8.1
- Browser [e.g. chrome, safari]:
- OS [e.g. Windows, macOS]: macOS

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.