I came across this issue when trying to deploy my React app using the Rollouts wrapper.
TypeError: optimizely.setUser is not a function
new OptimizelyProvider
node_modules/@optimizely/react-sdk/dist/react-sdk.js:196
193 | }
194 |
195 | if (finalUser) {
> 196 | optimizely.setUser(finalUser);
197 | }
198 |
199 | return _this;
Below is the main app with the wrapper. The app is deployed with the real sdkKey (not included below). We attempted to hard code the .setUser function, but to no avail. (commented out) The package.json file is included below. File structure below that.
Thanks for your help!
import React, { Component } from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import { OptimizelyProvider, OptimizelyFeature } from '@optimizely/react-sdk';
import * as optimizelySDK from '@optimizely/optimizely-sdk';
import OptimizelyFullStack from './views/OptimizelyFullStack'
import Links from './views/Links';
import About from './views/About';
import Audience from './views/Audience';
import WheelWorks from './views/WheelWorks';
import Kb4 from './views/Kb4';
import NotFound from './views/NotFound';
import './App.css';
import { AwesomeButton } from "react-awesome-button";
import "react-awesome-button/dist/styles.css";
import 'react-awesome-button/dist/themes/theme-blue.css';
const optimizely = optimizelySDK.createInstance({
sdkKey: '<my_key>',
})
// optimizely.setUser = () => {}
// optimizely.userId = {id: 'user 123'}
class App extends Component {
render() {
return (
<OptimizelyProvider
optimizely={optimizely}
userId={'user123'}
userAttributes={{
'customerId': 123,
'isVip': true,
}}>
<div>
<OptimizelyFeature feature="secondary_icon">
{(isEnabled) => (
isEnabled
? (
<div className="App">
<AwesomeButton className="banner" type="secondary" style={{ height: '120px'}}>
<Link to="/" style={{
textDecoration: 'none',
fontSize: '300%'
}}>Optimizely Experimental Knowledge Base 💡</Link>
</AwesomeButton>
<div id="container">
<p className="bannerSubText"> How to's, Routes and Rabbit Holes. . .</p>
</div>
<Switch>
<Route exact path="/" component={Links} />
<Route exact path="/about" component={About} />
<Route exact path="/OptimizelyFullStack" component={OptimizelyFullStack} />
<Route exact path="/audience" component={Audience} />
<Route exact path="/wheelWorks" component={WheelWorks} />
<Route exact path="/kb4" component={Kb4} />
<Route path="*" component={NotFound} />
</Switch>
</div>
) : (
<div className="App">
<AwesomeButton className="banner" type="primary" style={{ height: '120px'}}>
<Link to="/" style={{
textDecoration: 'none',
fontSize: '300%'
}}>Optimizely Experimental Knowledge Base 💡</Link>
</AwesomeButton>
<div id="container">
<p className="bannerSubText"> How to's, Routes and Rabbit Holes. . .</p>
</div>
<Switch>
<Route exact path="/" component={Links} />
<Route exact path="/about" component={About} />
<Route exact path="/OptimizelyFullStack" component={OptimizelyFullStack} />
<Route exact path="/audience" component={Audience} />
<Route exact path="/wheelWorks" component={WheelWorks} />
<Route exact path="/kb4" component={Kb4} />
<Route path="*" component={NotFound} />
</Switch>
</div>
)
)}
</OptimizelyFeature>
</div>
</OptimizelyProvider>
);
}
}
export default App;package.json file:
{
"name": "kb-proto-1",
"version": "0.1.0",
"private": true,
"dependencies": {
"@optimizely/react-sdk": "0.4.0-beta1",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}file structure:
Additionally, I looked in the react-sdk.js file and noticed the code does not match the error:
node_modules/@optimizely/react-sdk/dist/react-sdk.js
193 |
194 |function withOptimizely(Component) {
195 | var WithOptimizely = /** @class */ (function (_super) {
196 | __extends(WithOptimizely, _super);
197 | function WithOptimizely() {
198 | return _super !== null && _super.apply(this, arguments) || this;
199 | }
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent