I wonder why it says "not found" even though the variable called "not found" exists?

Question

I do not know why I am facing this error. I tried many ways to solve it for a few days but I could not. I thought that javascript does not allow multiple exports but I found that it does. So what do you guys think about this error? Here is the error I take.

Compiled with problems:X

ERROR in ./src/screens/ProductScreen.js 29:13-27

export 'detailsProduct' (imported as 'detailsProduct') was not found in '../actions/productActions' (possible exports: datailsProduct, listProducts)

The ProductScreen.js file is below.

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useParams, Link } from 'react-router-dom';
import {detailsProduct} from '../actions/productActions';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
import Rating from '../components/Rating';

export default function ProductScreen(props) {
  const dispatch = useDispatch();
  const params = useParams();
  const {id: productId} = params;
  const productDetails = useSelector((state) => state.productDetails);
  const { loading, error, product } = productDetails;

  useEffect(() => {
    dispatch(detailsProduct(productId));
  }, [dispatch, productId]);

  return (
    <div>
      {loading ? (
        <LoadingBox></LoadingBox>
      ) : error ? (
        <MessageBox variant="danger">{error}</MessageBox>
      ) : (
        <div>
          <Link to="/">Geri Dön</Link>
          <div className="row top">
            <div className="col-2">
              <img
                className="large"
                src={product.image}
                alt={product.name}
              ></img>
            </div>
            <div className="col-1">
              <ul>
                <li>
                  <h1>{product.name}</h1>
                </li>
                <li>
                  <Rating
                    rating={product.rating}
                    numReviews={product.numReviews}
                  ></Rating>
                </li>
                <li>Fiyat: {product.price}TL</li>
                <li>
                  Açıklama:
                  <p>{product.description}</p>
                </li>
              </ul>
            </div>
            <div className="col-1">
              <div className="card card-body">
                <ul>
                  <li>
                    <div className="row">
                      <div>Fiyat</div>
                      <div className="price">${product.price}</div>
                    </div>
                  </li>
                  <li>
                    <div className="row">
                      <div>Durum</div>
                      <div>
                        {product.countInStock > 0 ? (
                          <span className="success">Mevcut</span>
                        ) : (
                          <span className="danger">Mevcut değil</span>
                        )}
                      </div>
                    </div>
                  </li>
                  <li>
                    <button className="primary block">Sepete Ekle</button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

The productActions.js file is:

import Axios from "axios";
import { PRODUCT_DETAILS_FAIL, PRODUCT_DETAILS_REQUEST, PRODUCT_DETAILS_SUCCESS, PRODUCT_LIST_FAIL, PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS } from "../constants/productConstants"

export const listProducts = () => async (dispatch) =>{
    dispatch({
        type: PRODUCT_LIST_REQUEST
    });
    try{
        const {data} = await Axios.get('/api/products');
        dispatch({type: PRODUCT_LIST_SUCCESS, payload: data});
    }catch(error){
        dispatch({type:PRODUCT_LIST_FAIL, payload: error.message});
    }
}

export const datailsProduct = (productId) => async(dispatch) =>{
    dispatch({type: PRODUCT_DETAILS_REQUEST, payload: productId});
    try{
        const {data} = await Axios.get(`/api/products/${productId}`);
        dispatch({type: PRODUCT_DETAILS_SUCCESS, payload: data});
    }catch(error){
        dispatch({type: PRODUCT_DETAILS_FAIL,
        payload: error.response && error.response.data.message 
        ? error.response.data.message: error.message,
        });
    }
};

Answer 1

You've mispelt detailsProduct (you called it datailsProduct) in productActions.js