Unexpected identifier

[jMoulis]

Hi, I tried to install redux-persist but when installing it i have this error Unexpected identifier in my app.js Here is le line:

import React, { PureComponent } from 'react'; // eslint-disable-line import/no-unresolved
// eslint-disable-line import/no-unresolved

// It's the import line from the react.js of the redux-persist module

Here is my config:

Store configuration Index.js:

/*
 * Npm import
*/
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

/*
 * Local Import
*/
import appReducer from 'src/store/reducer/appReducer';
import userReducer from 'src/store/reducer/userReducer';
import projectReducer from 'src/store/reducer/projectReducer';
import appAjax from 'src/store/middleware/appAjax';
import userAjax from 'src/store/middleware/userAjax';
import projectAjax from 'src/store/middleware/projectAjax';

/*
 * Code
*/
const persistConfig = {
  key: 'root',
  storage,
};

// Redux DevTools extension
let devTools = [];
if (window.devToolsExtension) {
  devTools = [window.devToolsExtension()];
}
const rootReducer = combineReducers({
  appReducer,
  userReducer,
  projectReducer,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(
  persistedReducer,
  compose(
    applyMiddleware(appAjax),
    applyMiddleware(userAjax),
    applyMiddleware(projectAjax),
    ...devTools,
  ),
);

/*
 * Export default
*/
export default () => {
  const persistor = persistStore(store);

  return { persistor, store };
};

index.js:

/*
 * Npm import
 */
import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, browserHistory } from 'react-router-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/es/integration/react';

/*
 * Local import
 */
import App from 'src/containers/App';
import configureStore from 'src/store';

/*
 * Code
 */
const { store, persistor } = configureStore();

document.addEventListener('DOMContentLoaded', () => {
  const rootComponent = (
    <Provider store={store}>
      <PersistGate loading={<div />} persistor={persistor}>
        <Router history={browserHistory}>
          <App />
        </Router>
      </PersistGate>
    </Provider>
  );
  const node = document.getElementById('root');
  render(rootComponent, node);
});

my package.json:

{
  "name": "boiler-plate-react",
  "version": "0.0.1",
  "description": "Boiler Plate React Redux Router",
  "main": "index.js",
  "repository": "",
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "auto-reload-brunch": "^2.7.1",
    "autoprefixer": "^7.1.6",
    "babel-brunch": "^6.1.1",
    "babel-eslint": "^8.0.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "brunch": "^2.10.12",
    "eslint": "^4.11.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-import-resolver-node": "^0.3.1",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.5.1",
    "postcss-brunch": "^2.1.0",
    "sass-brunch": "^2.10.4",
    "uglify-js-brunch": "^2.10.0"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "babel-polyfill": "^6.26.0",
    "body-parser": "^1.18.2",
    "bootstrap": "^4.0.0",
    "classnames": "^2.2.5",
    "connect-slashes": "^1.3.1",
    "event-stream": "^3.3.4",
    "history": "^4.7.2",
    "json-brunch": "^1.5.4",
    "jwt-decode": "^2.2.0",
    "prop-types": "^15.6.0",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-fontawesome": "^1.6.1",
    "react-icons": "^2.2.7",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.8",
    "redux": "^3.7.2",
    "uuid": "^3.2.1",
    "redux-persist": "^5.9.1"
  },
  "scripts": {
    "start": "brunch watch --server",
    "prod": "brunch build --production",
    "save-deps": "rm -rf node_modules && npm update --save && npm update --save-dev",
    "lint": "eslint --fix app"
  }
}

Brunch config:

exports.config = {
  files: {
    stylesheets: {
      joinTo: '/css/app.css',
      order: {
        before: 'app/styles/css/app/reset.css',
      },
    },
    javascripts: {
      joinTo: '/js/app.js',
    },
  },
  plugins: {
    postcss: {
      processors: [require('autoprefixer')],
    },
    sass: {
      mode: 'ruby',
    },
    babel: {
      presets: ['env', 'react'],
      plugins: [
        'transform-object-rest-spread',
        'transform-class-properties',
      ],
      ignore: [
        /^node_modules/,
      ],
    },
  },
};

Can you help me finding my error please ;-)

[jMoulis]

Ok I checked, I have the error when I import PresistGate from 'redux-persist/es/integration/react'

[mgscreativa]

Hi! How did you solve this?

[mgscreativa]

Finally fixed it by importing PersistGate like this:

import { PersistGate } from 'redux-persist/integration/react';