React中从其他文件导入函数失败问题求助

一、模块未找到的原因及修复 #

1. 核对文件位置 #

确认title.js确实放在项目根目录的js文件夹下（即路径为/js/title.js）。如果js文件夹是在pages目录下，导入路径要改为./js/title.js；若在根目录，当前绝对路径写法需要配置路径别名才能生效。

2. 配置路径别名（推荐） #

在项目根目录新建jsconfig.json文件，写入以下内容：

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

配置完成后，Next.js会将根目录作为模块解析的基准路径，/js/title.js就能正确定位到文件。

3. 改用相对路径 #

如果不想配置别名，直接用相对路径导入即可：

// pages/index.js中
import { get, set, faviconChange } from '../js/title.js';

二、代码适配Next.js渲染机制 #

你的title.js里直接操作document和localStorage，这在Next.js服务端渲染时会报错（服务端不存在这些浏览器API），需要调整代码：

1. 封装DOM操作到客户端执行 #

修改title.js，给浏览器API的操作加上环境判断，确保只在客户端执行：

// title.js
export function get(a) {
  if (typeof window !== 'undefined') {
    return localStorage.getItem(a);
  }
  return null;
}

export function set(a, b) {
  if (typeof window !== 'undefined') {
    localStorage.setItem(a, b);
  }
}

export function faviconChange(value) {
  if (typeof window === 'undefined') return;
  
  set('link', value);
  const link = document.querySelector('link[rel="icon"]') || createFaviconLink();
  link.href = get('link') || '/favicon.ico';
  console.log("working " + link.href);
}

function createFaviconLink() {
  const link = document.createElement('link');
  link.rel = 'icon';
  document.head.appendChild(link);
  return link;
}

// 仅在客户端执行初始化逻辑
if (typeof window !== 'undefined') {
  document.title = get('title') || 'Anonymous';
  const link = document.querySelector('link[rel="icon"]') || createFaviconLink();
  link.href = get('link') || '/favicon.ico';
}

2. Next.js 13+ 标记为客户端组件 #

如果使用App Router模式，需要在调用这些函数的组件顶部添加'use client'指令，强制代码在客户端环境执行：

// pages/index.js 或 app/page.js
'use client';

import { get, set, faviconChange } from '/js/title.js';
// 其他组件代码...

内容的提问来源于stack exchange，提问作者user19430065