@lexstile

Как исправить ошибку сборки webpack в react приложении?

Ошибка:
633eac238133a580108197.png
Уже 10 раз все переменял - один хрен - не нравится ему, не могу понять - что именно...

Обратить на комментарий перед импортом apiAuth.
EmailConfirmation.jsx
import React from 'react';
import { useHistory, useLocation, useParams } from 'react-router-dom';
import { View, Panel, PanelHeader, PanelHeaderBack, Group, Placeholder, Button } from '@vkontakte/vkui';
import { Icon56GhostOutline } from '@vkontakte/icons';
// комментирую строку ниже и компонент работает корректно
// но apiAuth используется и на других страницах, до этого момента все работало
import { apiAuth } from 'api/auth';

export const EmailConfirmation = () => {
  const history = useHistory();
  const { search } = useLocation();
  const { userId, hash } = useParams();

  const onConfirmation = async () => {
    // await apiAuth.emailConfirmation({ userId, hash, search });
  };

  console.log('useParams', { userId, hash, search });

  return (
    <View id="confirmation-email" activePanel="main">
      <Panel id="main">
        <PanelHeader before={<PanelHeaderBack onClick={history.goBack} />}>Подтверждение почты</PanelHeader>
        <Group>
          <Placeholder
            icon={<Icon56GhostOutline />}
            action={
              <Button size="m" onClick={onConfirmation}>
                Подтвердить
              </Button>
            }
          >
            Подтвердите адрес электронной почты
          </Placeholder>
        </Group>
      </Panel>
    </View>
  );
};


Обратить на комментарий перед экспортом apiAuth.
apiAuth
import { register } from './register';
import { login } from './login';
import { logout } from './logout';
import { restore } from './restore';
import { restoreAccount } from './restoreAccount';
// import { emailConfirmation } from './emailConfirmation';

// прикол в том, что если я убираю register и restoreAccount - начинает работать
// но в них точно не ошибок, т. к. до этого я их не менял и регистрация работала
export const apiAuth = {
  register,
  login,
  logout,
  restore,
  restoreAccount,
  // emailConfirmation,
};


Обратить на комментарий перед импортом history.
register.js
import get from 'lodash/get';
// Если комментирую эту строку, тоже начинает работать
// restoreAccount есть подключение history
import { history } from 'utils/routes';
import { apiShell, httpAuth } from 'utils/http';
import { APP_ROUTES } from 'constants/routes';
import { ENDPOINTS } from 'constants/endpoints';

const callRegister = (data) => httpAuth.post(ENDPOINTS.AUTH.REGISTER, data);

export const register = async (data) => {
  const [execute] = apiShell(callRegister);
  const response = await execute(mapperRegister(data));

  const success = get(response, 'success');

  if (success) {
    history.push(APP_ROUTES.LOGIN);
  }
};

export const mapperRegister = (params) => ({
  ...params,
  first_name: params.firstName,
  last_name: params.lastName,
  password_confirmation: params.passwordConfirm,
});

history
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

Подключение history из файла выше
import React, { useMemo } from 'react';
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { Router } from 'react-router';
import get from 'lodash/get';
import { ConfigProvider, AdaptivityProvider, AppRoot, WebviewType, Platform } from '@vkontakte/vkui';
import { NotFoundPage } from 'pages/services';
import { history, getRoutes, getDiffRoutes, getDefaultRedirect } from 'utils/routes';
import { messageSlice } from 'store/messageSlice';
import { Layout, Notifications } from 'components';

export const App = () => {
  const dispatch = useDispatch();

  const scheme = useSelector((state) => get(state, 'app.scheme'));
  const role = useSelector((state) => get(state, 'user.role'));
  const messages = useSelector((state) => get(state, 'message.items'));

  const routes = useMemo(() => getRoutes(role), [role]);
  const routesPaths = useMemo(() => getDiffRoutes(role), [role]);
  const redirectURL = useMemo(() => getDefaultRedirect(role), [role]);

  return (
    <ConfigProvider isWebView webviewType={WebviewType.INTERNAL} platform={Platform.IOS} scheme={scheme}>
      <AdaptivityProvider>
        <AppRoot>
          <BrowserRouter>
            <Router history={history}>
              <Layout>
                <Switch>
                  {mapperRoutes(routes)}
                  <Route exact path={routesPaths} component={() => <Redirect to={redirectURL} />} />
                  <Route component={NotFoundPage} />
                </Switch>
              </Layout>
            </Router>
          </BrowserRouter>
          <Notifications
            messages={messages}
            onClose={(key) => () => dispatch(messageSlice.actions.deleteMessage(key))}
          />
        </AppRoot>
      </AdaptivityProvider>
    </ConfigProvider>
  );
};

const mapperRoutes = (routes) =>
  routes.map(({ component: Component, path, exact }) => (
    <Route key={path} path={path} exact={exact}>
      <Component />
    </Route>
  ));

Итого: после исключения history компонент начинает отображаться. Но что не так - вопрос. Заранее благодарен за ответы/идеи.
  • Вопрос задан
  • 38 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы