smooth-code / smooth-ui

Modern React UI library πŸ’…πŸ‘©β€πŸŽ€πŸ­

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Can't render inputs in browser, react 16.12, smooth 11.1.5

dhenson02 opened this issue Β· comments

πŸ› Bug Report

Attempting to render a component (so far Checkbox and Input) fails with the following error:

Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at getThemeCache (smooth-ui-core-sc.cjs.js:105)
    at getTheme (smooth-ui-core-sc.cjs.js:118)

One example:

<label>
    <Checkbox
        onChange={e => onChange(!!e?.target?.checked)}
        checked={value} /> {label}
</label>

When debugging I can see in getThemeCache(theme) it doesn't find a cached theme and at that point tries to cache a new one but does so using the undefined theme var (hence the error). I am doing nothing with themes, just npm install and imported to JS.

To Reproduce

  • Babel 7.8.0
  • React 16.12.0
  • Chrome 79

.babelrc

{
    "presets": [
        "@babel/preset-flow",
        "@babel/preset-react",
        ["@babel/preset-env", {
            "targets": {
                "browsers": ["last 2 versions"]
            },
            "loose": true
        }]
    ],
    "plugins": [
        "@babel/plugin-proposal-export-default-from",
        "@babel/plugin-proposal-export-namespace-from",
        "syntax-exponentiation-operator",
        "transform-node-env-inline",
        "@babel/plugin-transform-react-constant-elements",
        "@babel/plugin-transform-react-inline-elements",
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-object-rest-spread",
        ["@babel/plugin-transform-modules-commonjs", { "loose": true }],
        ["@babel/plugin-transform-runtime", { "corejs": 2, "helpers": false, "regenerator": true }]
    ]
}

Expected behavior

Input components should render.

Link to repl or repo (highly encouraged)

Repo I've been playing with: https://github.com/dhenson02/form-template-ui

Run npx envinfo --system --binaries --npmPackages @smooth-ui/core-sc,@smooth-ui/core-em,styled-components,@emotion/core,@emotion/styled,emotion-theming --markdown --clipboard

Paste the results here:

☁  inputs [reorg-files] ⚑  npx envinfo --system --binaries --npmPackages @smooth-ui/core-sc,@smooth-ui/core-em,styled-components,@emotion/core,@emotion/styled,emotion-theming --markdown --clipboard
npx: installed 1 in 0.69s

*** Clipboard option removed - use clipboardy or clipboard-cli directly ***


## System:
 - OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
 - CPU: (32) x64 AMD Ryzen Threadripper 2950X 16-Core Processor
 - Memory: 1.20 GB / 31.34 GB
 - Container: Yes
 - Shell: 5.4.2 - /bin/zsh
## Binaries:
 - Node: 12.13.0 - ~/node/bin/node
 - Yarn: 1.21.1 - /usr/bin/yarn
 - npm: 6.13.6 - ~/node/bin/npm

Getting same issue with same react and smooth versions. Downgrading to react @ 16.11.0 or smooth @ 11.1.1 appears to fix the issue.

I do notice that there are a few changes made in 11.1.1 (fc74682) which appear to change the way themes are handled

You need to specify a ThemeProvider - see #167