"Invalid Specifier" when import location has >1 forward slash

[bhallstein]

Today I tried to switch from parcel to wmr as the runtime for our medium-sized preact project, which uses @heroicons/react as an icon library.

Describe the bug

With @heroicons/react, to import an icon you write, for example: import {XIcon} from '@heroicons/react/outline'. (Or for solid icons, @heroicons/react/solid.)

When wmr is started and the app accessed through the web browser, wmr then emits an error message, "Invalid specifier" for the import location '@heroicons/react/outline'.

To Reproduce

Steps to reproduce the behavior:

1. npm i -S @heroicons/react
2. Add an import such as: import {XIcon} from '@heroicons/react/outline'
3. Run the app with wmr and load localhost:8080 in a browser.
4. See error

Expected behavior

• The subfolder of the library should be resolved.
• Ideally the error message could be a bit clearer, I wasn't sure what 'invalid specifier' meant and it was a little tricky to find out by googling. It also didn't seem to output the location of the import that causes the error, which would be really useful info.

Bug occurs with:

• [x] wmr or wmr start (development)

I haven't tested on build / serve.

Desktop:

• OS: macOS Big Sur 11.6
• Browser: Safari 15.0, Brave 1.29.81
• Node Version: 16.9.1
• WMR Version: 3.7.2

Additional context

WMR is amazing, I'm really looking forward to using it ❤️

[rschristian]

Odd, I cannot seem to reproduce myself (Linux, Node 14 & 16)

Can you reproduce in a brand-new project?

[bhallstein]

Trying to minimally replicate in a fresh repo: https://github.com/bhallstein/wmr-testing

• In the original issue, @heroicons/react was a dep of the top level project and also a sub-dependency of otter-editor.
• I tried replicating with only @heroicons/react (and not otter-editor), and like you was unable to replicate.

So, I then tried adding both @heroicons/react and otter-editor as dependencies. This led to some errors that are similar to the one I wrote about above — hard to tell if it's a different issue or the same.

• These 404ing deps are all present in node_modules.
• They are deps of otter-editor rather than the top-level project.
• The path has 2 '@npm's, which is curious — e.g @npm/@npm/react-quill rather than '@npm/react-quill'. This is the part that makes me wonder about an issue in dependency resolution in wmr.

When otter-editor is prepared for publishing to npm, it is simply transpiled with babel — babel src/index.js -d dist && babel src/core -d dist/core. A typical transpiled import then looks like this:

var _reactQuill = _interopRequireDefault(require("react-quill"));

Happy to update the original issue if we can clarify further.

[LeuisKen]

Any progress? I met the same problem when using @babel/traverse