customHooks module.exports 不使用 es6 样式导入

Question

我有一个运行相同架构的应用程序，它运行没有问题。我正在尝试使用 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 有什么不喜欢的吗？
• 是Bable吗？

让我知道您认为问题出在哪里。

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

这是什么意思？

谢谢！

Answer 1

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

所以你可以试试这个，

import usePrevious from '..customHooks'

Answer 2

更新：节点版本 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'