ReactJS Module not found: Can't resolve './static/js/myfile.js'

Question

I am trying to learn React and I use "create-react-app". I now have an issue that I find very strange and am not able to solve.

I have a map-structure like this:

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

In my content I have a Content.js that looks like this:

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;

On line 4 I import a .js-file from the static folder. On line 26 I show an image from the static folder. Now the image is shown nicely but the import gives me the error:

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

The date.js file looks like this:

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;
}

Any insight is hugely appreciated!

import { format } from "../public/static/js/date.js"; // Error — Piotr Żak, Jan 25 '20 at 15:58
If you are in src folder you need to use ".." to go level up - when You are in administratie - you can go to public/static/js — Piotr Żak, Jan 25 '20 at 15:59
import { format } from "../public/static/js/date.js"; is giving me the same error — johannes, Jan 25 '20 at 16:00
Now I get a different error: Module not found: You attempted to import ../../public/static/js/date.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. — johannes, Jan 25 '20 at 16:04
So double "../../" - go outside directory. with knowledge about "../" - is level up and './ is go level down you need to try variances and solve problem — Piotr Żak, Jan 25 '20 at 16:05
Piotr Zak, your efforts are appreciated! Can you explain why "./static/js/date.js" does not work and why "./static/img/administratie-logo.png" does??? — johannes, Jan 25 '20 at 16:08
Then both "./static/js/" and "./static/img" are relative. But one works and the other doesn't. — johannes, Jan 25 '20 at 16:11

score 3 · Accepted Answer · answered Jan 25 '20 at 16:12

The URL inside <img> tag is resolved at run time, by the browser. That is why, the image loads fine.

However, the Javascript file specified in the import statement will be resolved at the compilation time.

React looks for modules in the 'src' and node_modules folders only.

The failing import statement is:

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

React is throwing the error because /static/js/date.js does not exist in either 'src' or 'node_modules'

To make the code work, the date.js file can be copied to a location under the 'src' folder.

(node_modules is for the dependencies downloaded through 'npm install')

It works. Thank you very much for your explanation Gopinath. You made my day! — johannes, Jan 25 '20 at 16:20

ReactJS Module not found: Can't resolve './static/js/myfile.js'

1 Answers1