#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'