0

我有一个运行相同架构的应用程序，它运行没有问题。我正在尝试使用 React 17.0.2 在 CRA 中复制。这只是一个文件，它使用module.exports. 这是我的文件：customHooks.js

import { useCallback, useEffect, useRef, useState } from "react";

module.exports = {
    usePrevious: (stateValue) => {
        const ref = useRef();
        useEffect(() => {
            ref.current = stateValue;
        })
        return ref.current
    },
    getUrlVars: (url) => {
        let vars = {};
        if (url) {
            let parts = url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                vars[key] = value;
            });
        } else {
            console.error('No url specified')
        }

        return vars;
    },
    setCookieManually: async (cname, cvalue, exdays) => {
        const d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        let expires = "expires="+ d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    },
    removeCookieManually: async (cname) => {
        document.cookie = `${cname}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
    },
    useSetState: (initialValue) => {
        let [val, setVal] = useState(initialValue);
        let cbRef = useRef(null);
        let first = useRef(true);

        useEffect(() => {
            if (first.current) {
                first.current = false;
                return;
            }

            if (typeof cbRef.current === "function") {
                console.log("calling cb");
                cbRef.current();
            }
        }, [val]);

        let setValCB = useCallback((newVal, cb) => {
            console.log("setValCB", newVal);
            cbRef.current = cb;
            setVal(newVal);
        }, []);

        /*
        * USAGE:
        * let [selected, setSelected] = useSetState("");
        *
        * setSelected(title, () => {
        *   console.log("onRowSelected", title);
        *   props.onRowSelected(title);
        * });
        *
        * */

        return [val, setValCB];
    }
}

我只是想像这样导入：

import { usePrevious } from '..customHooks'

然而我一直收到一个错误：Attempted import error: 'usePrevious' is not exported from '../customHooks.js'.

注意：我已经用 NextJs 项目成功地做到了这一点，没问题。

  • 有什么我的 IDE 不喜欢的吗？
  • 是贝尔吗？

让我知道你认为问题是什么。

我试图将其从 to 更改import为require()并解决了错误，但随后说： TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

这是什么意思？

谢谢！

4

2 回答 2

0

您是否尝试过使用默认导入而不是命名？因为您要导出的文件不是命名导出，而是默认值。

所以你可以试试这个

import usePrevious from '..customHooks'
于 2021-08-30T20:47:33.233 回答
0

更新：节点版本 14 及更高版本可能会遇到此问题

为了解决这个问题，module.exports必须删除。似乎在节点 14 之后事情变得很奇怪。

现在我必须写出每个函数，然后export是结构中的函数。


import { useCallback, useEffect, useRef, useState } from "react";

   const usePrevious = (stateValue) => {
        const ref = useRef();
        useEffect(() => {
            ref.current = stateValue;
        })
        return ref.current
    }

   const getUrlVars = (url) => {
        let vars = {};
        if (url) {
            let parts = url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                vars[key] = value;
            });
        } else {
            console.error('No url specified')
        }

        return vars;
    }

   const setCookieManually = async (cname, cvalue, exdays) => {
        const d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        let expires = "expires="+ d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

   const removeCookieManually = async (cname) => {
        document.cookie = `${cname}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
    }

   const useSetState = (initialValue) => {
        let [val, setVal] = useState(initialValue);
        let cbRef = useRef(null);
        let first = useRef(true);

        useEffect(() => {
            if (first.current) {
                first.current = false;
                return;
            }

            if (typeof cbRef.current === "function") {
                console.log("calling cb");
                cbRef.current();
            }
        }, [val]);

        let setValCB = useCallback((newVal, cb) => {
            console.log("setValCB", newVal);
            cbRef.current = cb;
            setVal(newVal);
        }, []);

        /*
        * USAGE:
        * let [selected, setSelected] = useSetState("");
        *
        * setSelected(title, () => {
        *   console.log("onRowSelected", title);
        *   props.onRowSelected(title);
        * });
        *
        * */

        return [val, setValCB];
    }

export {
    usePrevious,
    getUrlVars,
    setCookieManually,
    removeCookieManually,
    useSetState,
}

然后，这允许我所有的导入与解构一起工作：

import { usePrevious } from '../utils/customHooks'
于 2022-03-01T18:25:14.823 回答