Ошибка ReactJS — «Ошибка типа: объект (…) не является функцией» после реализации абсолютного импорта

#reactjs #import #typeerror

#reactjs #импорт #ошибка типа

Вопрос:

У меня есть следующий код:

App.js

 ...
import {sortData, prettyPrintStat} from 'util/util';
...
<div className="app__stats">
<InfoBox 
  isRed
  active={casesType === 'cases'}
  onClick={e => setCasesType('cases')}
  title="Cases" 
  cases={prettyPrintStat(countryInfo.todayCases)} 
  total={prettyPrintStat(countryInfo.cases)}/>
...
 

util.js

 ...
export const sortData = (data) => {
    const sortedData = [...data];
    sortedData.sort((a, b) => {
        if (a.cases > b.cases) {
            return -1;
        }
        else{
            return 1
        }
    });
    return sortedData;
};
export const prettyPrintStat = (stat) => {
    return stat ? ` ${numeral(stat).format("0.0a")}` : " 0"
};
...
 

Для абсолютного импорта я реализовал файл jsconfig следующим образом

jsconfig.json

 {
    "compilerOptions": {
      "baseUrl": "./src"
    }
}
 

Во время выполнения этого я получаю сообщение об ошибке

 TypeError: Object(...) is not a function
 

Прилагаю скриншот ошибки.
Скриншот ошибки

Я попробовал некоторые решения из Интернета, такие как обновление React и React-DOM до последних версий. Также пытался удалить папку node_modules и переустановить. Ни один из них, похоже, не помогает.

Однако, если я удалю реализацию абсолютного импорта и использую приведенный ниже код, кажется, все работает нормально

App.js

 ...
import {sortData, prettyPrintStat} from './util/util';
...
 

Может кто-нибудь, пожалуйста, помочь мне понять, что происходит не так?

Спасибо

Комментарии:

1. как упоминалось здесь в документах для create-react-app, синтаксис для baseUrl baseUrl: "src" также должен include: ['src'] содержать ключ в конце этого объекта.

2. @humanbean Спасибо за ответ. Я попробовал то же самое из документации, но ошибка все еще существует.

3. возможно, у этого есть более подробная документация по использованию jsconfig.json

Ответ №1:

Я смог исправить эту проблему, переименовав свой файл утилиты в helper.js

Например,

 import { prettyPrintStat, sortData } from 'util/helper'
 

вместо

 import { prettyPrintStat, sortData } from 'util/util'