Ошибка с ссылками на функции

@Norail · Регистрация: 07.01.2023

Студворк — интернет-сервис помощи студентам

Вот ошибка:
./src/components/modals/CreateBrand.js
Attempted import error: 'createBrand' is not exported from '../../services/DeviceService'.

вот CreateBrand.js он находится /src/components/modals/CreateBrand.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React, {useState} from 'react';
import Modal from "react-bootstrap/Modal";
import {Button, Form} from "react-bootstrap";
import {createBrand, createType} from "../../services/DeviceService";
 
const CreateBrand = ({show, onHide}) => {
    const [value, setValue] = useState('')
 
    const addBrand = () => {
        createBrand({name: value}).then(data => {
            setValue('')
            onHide()
        })
    }
    return (
        <Modal
            show={show}
            onHide={onHide}
            centered
        >
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-vcenter">
                    Добавить тип
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Form>
                    <Form.Control
                        value={value}
                        onChange={e => setValue(e.target.value)}
                        placeholder={"Введите название типа"}
                    />
                </Form>
            </Modal.Body>
            <Modal.Footer>
                <Button variant="outline-danger" onClick={onHide}>Закрыть</Button>
                <Button variant="outline-success" onClick={addBrand}>Добавить</Button>
            </Modal.Footer>
        </Modal>
    );
};
 
export default CreateBrand;

вот DeviceService.js он находится в src/services почему-то phpstormпоказывает что от туда функции не подхватываются

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import  {$host,$authHost} from "../http";
 
export default class DeviceService {
    static fetchUsers() {
        return $authHost.get('/users')
    }
     createType = async (type) => {
        const {data} = await $authHost.post('api/type', type)
        return data
    }
 
     fetchTypes = async () => {
        const {data} = await $host.get('api/type')
        return data
    }
 
    createBrand = async (brand) => {
        const {data} = await $authHost.post('api/brand', brand)
        return data
    }
 
    fetchBrands = async () => {
        const {data} = await $host.get('api/brand', )
        return data
    }
 
    createDevice = async (device) => {
        const {data} = await $authHost.post('api/device', device)
        return data
    }
 
    fetchDevices = async (typeId, brandId, page, limit= 5) => {
        const {data} = await $host.get('api/device', {params: {
                typeId, brandId, page, limit
            }})
        return data
    }
 
     fetchOneDevice = async (id) => {
        const {data} = await $host.get('api/device/' + id)
        return data
    }
 
}

вот index.js который находится в src/http

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import axios from 'axios';
 
 
export const API_URL = `http://localhost:5000/api`;
const $host = axios.create({
    baseURL: API_URL
})
 
const $authHost = axios.create({
    withCredentials: true,
    baseURL: API_URL
})
 
 
$authHost.interceptors.request.use((config) => {
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
    return config;
})
 
$authHost.interceptors.response.use((config) => {
    return config;
},async (error) => {
    const originalRequest = error.config;
    if (error.response.status == 401 && error.config && !error.config._isRetry) {
        originalRequest._isRetry = true;
        try {
            const response = await axios.get(`${API_URL}/refresh`, {withCredentials: true})
            localStorage.setItem('token', response.data.accessToken);
            return $authHost.request(originalRequest);
        } catch (e) {
            console.log('НЕ АВТОРИЗОВАН')
        }
    }
    throw error;
})
 
export {
    $host,
    $authHost
}

@voraa · 28.01.2026, 20:40

Так ты не экспортируешь createBrand и createType. Ты экспортируешь класс DeviceService. У него нет таких полей (есть только fetchUsers, т.к. оно static). Эти поля будут у объекта - экземпляра класса, когда ты его создашь.
Тогда должно быть как то так

JavaScript
1
2
3
4
5
6
import DeviceService from "../../services/DeviceService";
.....
const devserv = new DeviceService
 
// и тогда уже можно 
devserv.createBrand();

krvsa · 29.01.2026, 09:26

Судя по текстам методов класса DeviceService они там все должны быть static, поскольку никаких упоминаний про this в них нет.

Добавлено через 3 минуты
P.S.
Вообще не понятно зачем использовался именно класс. Там просто набор функций, никак между собой не связанных. Их можно было бы экспортировать по отдельности из модуля с тем же эффектом.

Добавлено через 18 минут
Norail, вот твой аналог вместо не нужного класса

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import  {$host,$authHost} from "../http";
 
 
export const fetchUsers = () => $authHost.get('/users')
 
export const createType = async type => 
    (await $authHost.post('api/type', type)).data
 
export const fetchTypes = async () => 
    (await $host.get('api/type')).data
 
export const createBrand = async brand => 
    (await $authHost.post('api/brand', brand)).data
 
export const fetchBrands = async () => 
    (await $host.get('api/brand', )).data
 
export const createDevice = async device => 
    (await $authHost.post('api/device', device)).data
 
export const fetchDevices = async (typeId, brandId, page, limit= 5) => 
    (await $host.get('api/device', {
        params: {typeId, brandId, page, limit}
    })).data
 
export const fetchOneDevice = async id => 
    (await $host.get('api/device/' + id)).data

@Norail · 30.01.2026, 01:56 **[ТС]**

Спасибо

@Norail · 08.02.2026, 13:40 **[ТС]**

DeviceService.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import $api from "../http";
 
export default class DeviceService {
    static fetchUsers() {
        return $api.get('/users')
    }
    static createBrand (brand) {
        const {data} =  $api.post('api/brand', brand);
        return data;
    }
 
    static fetchBrands () {
        const {data} = $api.get('api/brand', );
        return data;
    }
}

CreateBrand.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React, {useState} from 'react';
import Modal from "react-bootstrap/Modal";
import {Button, Form} from "react-bootstrap";
import {DeviceService} from "../../services/DeviceService";
 
const CreateBrand = ({show, onHide}) => {
    const [value, setValue] = useState('')
    const devServ=new DeviceService;
    const addBrand = () => {
        devServ.createBrand({name: value}).then(data => {
            setValue('')
            onHide()
        })
    }
    return (
        <Modal
            show={show}
            onHide={onHide}
            centered
        >
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-vcenter">
                    Добавить тип
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Form>
                    <Form.Control
                        value={value}
                        onChange={e => setValue(e.target.value)}
                        placeholder={"Введите название типа"}
                    />
                </Form>
            </Modal.Body>
            <Modal.Footer>
                <Button variant="outline-danger" onClick={onHide}>Закрыть</Button>
                <Button variant="outline-success" onClick={addBrand}>Добавить</Button>
            </Modal.Footer>
        </Modal>
    );
};
 
export default CreateBrand;

пишет ошибку

./src/components/modals/CreateBrand.js
Attempted import error: 'DeviceService' is not exported from '../../services/DeviceService'.

@voraa · 08.02.2026, 13:46

Сообщение от Norail

пишет ошибку

Если
export default class DeviceService {
то
import без {}

JavaScript
1
import DeviceService from "../../services/DeviceService";

krvsa · 08.02.2026, 13:56

Norail, если у класса все методы static - не нужно делать экземпляр класса.

Зачем тебе вообще класс?

@voraa · 08.02.2026, 14:13

Да, я не посмотрел дальше

JavaScript
1
2
3
const devServ=new DeviceService;
....
 devServ.createBrand({name: value}).then(data =>

Это совсем не правильно. У devServ нет метода createBrand. Он есть у DeviceService, ибо статический.
Надо DeviceService.createBrand

С классами у вас как то туговато идет. Подучить надо бы.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Norail -133 / 0 / 0 Регистрация: 07.01.2023 Сообщений: 81
	30.01.2026, 01:56 [ТС]
	Спасибо 0

krvsa 3834 / 1678 / 431 Регистрация: 14.03.2022 Сообщений: 4,235
	08.02.2026, 13:56
	Norail, если у класса все методы `static` - не нужно делать экземпляр класса. Зачем тебе вообще класс? 0