Uncaught TypeError: Failed to resolve module specifier "...". Relative references must start with either "/", "./", or "../". at (index):1

Question

The stack trace of the error message just says "(index):1".

How can I find out where the error really happened?

I tried to enable "Pause at exceptions" but that doesn't work.

I also tried to add

<script>console.log('Before loading XYZ')</script>

between <script src="..." elements but those are executed in order while the error happens in a script which is loaded asynchronous.

My goal is to create a minimal example which I could send to Chromium so they can improve the error message.

I'm trying to load a Vue component and the error happens after vue.js was loaded (I know because I have a breakpoint at the bottom of vue.esm.browser.js in the line Vue.compile = compileToFunctions;).

Chrome 77

Solution

I found two ways:

1. Compare which scripts are loaded in the "Network" tab and which you can see in the "Sources" tab. The one with the error will be missing in the "Sources" tab.
2. Add console.log('...'); to the head of each script you're loading. The script with the broken import will not do any logging.

In general, look for scripts which import by module name / specifier like this:

import Vue from "vue";

instead of loading by path:

import Vue from "./vue.js";

Module specifiers don't contain / and they have no extension. They work in environments like node but not in a browser. See also: module specifier in es6 import and export