Estoy buscando el mejor enfoque para tratar con usuarios que tienen las cookies deshabilitadas. En mi archivo raíz index.tsx coloqué una condición para procesar la aplicación solo si el usuario tiene sus cookies habilitadas; de lo contrario, se debe generar una página de error. Aquí está el código para eso:

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

En varios archivos dentro de nuestra aplicación estamos usando localStorage.getItem y localStorage.setItem . Sin embargo, incluso con esta condición (código anterior), nuestra aplicación React arroja un error. Los errores que recibimos son solo de archivos con localStorage que se usa fuera de una función.

Esto se debe a que React está escaneando nuestro main.chunk.js y los elementos de localStorage están causando el error. Hay 3 archivos específicos que tienen localStorage fuera del alcance y si envuelvo los elementos con la condición de verificar navigator.cookieEnabled , no hay error. Sin embargo, me preguntaba si había una manera de abarcar o nombrar estos elementos, en lugar de tener una condición. O cuáles son los pensamientos sobre las mejores prácticas.

Aquí están los archivos:

Un reductor redux:

 // 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 }

Analítica:

 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

API de Axios

 // 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