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