I am looking for the best approach for dealing with users who have their cookies disabled. In my root index.tsx file I placed a condition to render the application only if the user has their cookies enabled, otherwise an error page should be rendered. Here is the code for that:

ReactDOM.render(
  <React.StrictMode>
    {navigator.cookieEnabled ? (
      <Provider store={store}>
        <Router history={browserHistory}>
          <App />
        </Router>
      </Provider>
    ) : (
      <Error />
    )}
  </React.StrictMode>,
  document.getElementById('root')
)

In several files within our application we are using localStorage.getItem and localStorage.setItem. However, even with this condition(code above) our React application is throwing an error. The errors we are receiving are only from files with localStorage is being used outside a function.

This is because React is scanning our main.chunk.js and the localStorage items are causing the error. There are 3 specific files that have localStorage out of scope and if I wrap the items with a condition that to check navigator.cookieEnabled, there is no error. I was wondering, however if there was a way to scope or namespace these items, instead of having a condition. Or what the thoughts on best practices.

Here are the files:

A redux reducer:

// This line is causing the issue 
export const initialState: string = sessionStorage.getItem('example')

// Error fixed if updated to 
export const initialState: string = 
   navigator.cookieEnabled && sessionStorage.getItem('example')

export default (
  state: string = initialState,
  action: ExampleAction
): string => {
  if (action.type === 'UPDATE_EXAMPLE') {
    return action.payload
  }
  return state
}

Analytics:

import triggerAnalyticsEvent, {
  analyticsConfig
} from 'some-library/helpers/triggerAnalyticsEvent'


analyticsConfig.defaults.Country = 'us'
// This line is causing the issue 
analyticsConfig.defaults.ExampleItem = sessionStorage.getItem('exampleItem')

// Error fixed if updated to 
if (navigator.cookieEnabled) {
  analyticsConfig.defaults.ExampleItem = sessionStorage.getItem('exampleItem')
}

...

export default triggerAnalyticsEvent

Axios API

// This line is causing the issue 
const apiHost = sessionStorage.getItem('mockData') ? 'https://getsandbox.com' : API_HOST

// Error fixed if updated to 
const apiHost = 
  navigator.cookieEnabled &&  sessionStorage.getItem('mockData')
    ? 'https://getsandbox.com'
    : API_HOST


const api = axios.create({
  baseURL: apiHost,
  headers: {
    'Content-Type': 'application/json'
  }
})

...

export default api