webpack · npm
The message
Module not found: Error: Can't resolve './components/Button' in '/app/src'
What it means
The bundler could not find that file at that path — this is your own import, not a package. It happens when the relative path is off by one level, when the extension is missing or wrong, or when the filename's capitalisation differs from the import. That last one is the nastiest: the macOS and Windows filesystems are case-insensitive, so it works on your machine and breaks only on Linux CI. ls the directory and compare it with the import character by character, capitalisation included. If the name is a package rather than a path, install it; either way nothing gets deleted.
The fix
There is no one-line command for this. The explanation says what to look at instead.
- Printed by
- webpack
- npm
- 20
With npm the cause sits in the first code XXXX line rather than the last six npm ERR! lines, and when the failure comes from the dependency tree or a native build instead of your own code, deleting node_modules and installing again clears about half of them.
Reading an error message
- Read from the first line down. The lower you go the more it is about the tool’s internals; the cause is usually at the top.
- If there is a file and a line number, start there — not the top stack frame, but the topmost line that names a file you wrote.
- Search the message verbatim, but strip your own paths and variable names first; those are what stop the search from matching.
- The same condition is worded differently across tool versions. If results look wrong, add the version number to the query.
- Before pasting a fix, check what it throws away. Some of these cannot be undone.
Common questions
Q. What does “Module not found: Error: Can't resolve './components/Button' in '/app/src'” mean?
The bundler could not find that file at that path — this is your own import, not a package. It happens when the relative path is off by one level, when the extension is missing or wrong, or when the filename's capitalisation differs from the import. That last one is the nastiest: the macOS and Windows filesystems are case-insensitive, so it works on your machine and breaks only on Linux CI. ls the directory and compare it with the import character by character, capitalisation included. If the name is a package rather than a path, install it; either way nothing gets deleted.
Q. How do I fix it?
There is no one-line command. The explanation above says what to look at instead.
Q. Which tool prints this?
webpack. It sits under npm, and the message runs to 9 words.