找不到 ReactJS 模块：无法解析 './static/js/myfile.js'

Question

我正在尝试学习 React，我使用“create-react-app”。我现在有一个我觉得很奇怪但无法解决的问题。

我有一个这样的地图结构：

   administratie
   └─ public
      └─ static
         └─ img
         └─ js
   └─ src
      └─ content

在我的内容中，我有一个如下所示的 Content.js：

import React, { Component } from "react";

import "./Mut.css";
import { format } from "./static/js/date.js"; // Error

class Mut extends Component {
  constructor(props) {
    super(props);
    this.state = {
      datum: ""
    };
  }

  componentDidMount() {
    let today = format(new Date());
    this.setState({
      datum: today
    });
  }

  handleChange(event) {}

  render() {
    return (
      <main>
        <img src="./static/img/administratie-logo.png" alt="logo" />  // Is rendered as it should
      </main>
    );
  }
}

export default Mut;

在第 4 行，我从静态文件夹中导入了一个 .js 文件。在第 26 行，我显示了静态文件夹中的图像。现在图像显示得很好，但导入给了我错误：

./src/content/Mut.js
Module not found: Can't resolve './static/js/date.js' in 'C:\react-projects\administratie\src\content'

date.js 文件如下所示：

export function format(d) {
  let day = d.getDate().toString();
  if (day < 10) day = "0" + day;

  let month = (d.getMonth() + 1).toString();
  if (month.length === 1) month = "0" + month;

  const year = d.getFullYear().toString();

  return day + "-" + month + "-" + year;
}

非常感谢任何见解！

Answer 1

<img> 标签内的 URL 在运行时由浏览器解析。这就是为什么图像加载正常。

但是，import 语句中指定的 Javascript 文件将在编译时解析。

React 仅在 'src' 和 node_modules 文件夹中查找模块。

失败的导入语句是：

从“./static/js/date.js”导入{格式}； // 错误

React 抛出错误，因为 /static/js/date.js 不存在 'src' 或 'node_modules'

要使代码正常工作，可以将 date.js 文件复制到 'src' 文件夹。

（node_modules 用于通过 'npm install' 下载的依赖项）