TypeError: Failed to resolve module specifier "react-dom"

[rauschma]

I’m still getting the following error:

TypeError: Failed to resolve module specifier "react-dom". Relative references must start with either "/", "./", or "../".

• Web page: https://rauschma.github.io/minimal-react/build/counting-clicks.html
• Repository: https://github.com/rauschma/minimal-react

[gr2m]

I was able to reproduce the problem. When building and running the a static server using the build folder as root, it works without problems. But if I run the server in parent folder and open e.g. http://localhost:8080/build/counting-clicks.html I get error.

Steps to reproduce with https://github.com/rauschma/minimal-react

npm run build
npx servor .
# now open http://localhost:8080/build/counting-clicks.html

I'm not yet very familiar with the code base, but I hope that will help to narrow down what the problem might be (/cc @FredKSchott).

[FredKSchott]

Ah, that's an interesting issue. Luckily it's an easy fix: your HTML script tag should point to "./js/counting-clicks.js" ("./" instead of "../").

While we resolve JS imports relative to the file system, our HTML script tag src attributes are left untouched. While the js and html folders are siblings on disk, in the final build the HTML is mounted to / while the JS is mounted to /js.

I'm actually not sure if we should consider this a bug or not. If you deployed the build directory alone without the source code, this error would have been more obvious and a quick fix. A few things had to go wrong all together for this error to be so hidden :)

[rauschma]

Cool, that did indeed fix it. An obvious mistake on my part. Surprisingly, the app ran successfully in the dev server. Is it possible to make the dev server fail in this case? Then I would have caught the issue myself.

[gr2m]

It works in dev because the dev server is serving the assets at the root folder, so the .. in <script type="module" src="../js/counting-clicks.js"></script> has no effect.

The only thing that I could think of we could do is to look for .. in the HTML that the dev server returns at the / root URL and log a warning. I'm not sure if it's worth it though. Maybe you have a better idea?

[KonnorRogers]

^ this is correct. I believe the dev server sets the current working directory to the directory that contains the snowpack.config.js[on] as opposed to using the actual cwd() if I remember correctly from last time I looked at the codebase.

[FredKSchott]

We call process.cwd() pretty liberally (more than we should, at least) to get the current working directory.

I'm actually surprised that the browser would treat "../" as "/" at the root URL. This means that the browser requested a strange URL, and we're responding correctly. That means we'd have to catch this at the moment when we create the import.

This would be technically possible to look for (we have all the information needed to implement inside of createImportResolver()) but it would be non-trivial to implement. I'd vote that we only prioritize this If we see more people running into the bug.

[FredKSchott]

@gr2m @ParamagicDev thanks for helping dig in and debug!

[Iteratum]

I also got this error.
TypeError: Failed to resolve module specifier "react-router-dom". Just after building and running the command "npm run preview".