Vite: Issue with miragejs

[Uninen]

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

I built an app with vite and TypeScript that uses network and works fine without any problems. After trying to add miragejs server, the dev server fails. Not sure if the problem is with vite, my configuration or miragejs. Based on the logs, some lodash imports by miragejs are missing. (Not using lodash myself.) Don't have any additional vite configuration set up.

Adding:

import { Server } from 'miragejs'

new Server()

results in following error and console message:

SyntaxError: import not found: default mirage-esm.js:14:7

System Info

• required vite version: 0.16.7
• required Operating System: macOS 10.15.4
• required Node version: v12.16.3
• Typescript: 3.9.3
• Ky: 0.20.0 (fetch wrapper)
• miragejs: 0.1.40

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

$ /projectpath/node_modules/.bin/vite --debug
vite v0.16.7
  vite:optimize Hash is consistent. Skipping. Use --force to override. +0ms

  Dev server running at:
  > Local:    http://localhost:3000/
  > Network:  http://192.168.1.111:3000/

  vite:server server ready in 334ms. +0ms
  vite:hmr ws client connected +0ms
  vite:resolve (extension) /projectpath -> /projectpath +0ms
  vite:hmr         / imports /main.js +213ms
  vite:rewrite (skipped) / +0ms
  vite:rewrite /main.js: rewriting +104ms
  vite:rewrite     "vue" --> "/@modules/vue" +2ms
  vite:hmr         /main.js imports /@modules/vue +107ms
  vite:rewrite     "./App.vue" --> "/App.vue" +1ms
  vite:hmr         /main.js imports /App.vue +0ms
  vite:rewrite     "./index.css" --> "/index.css?import" +0ms
  vite:hmr         /main.js imports /index.css +0ms
  vite:rewrite (skipped) /vite/hmr +148ms
  vite:resolve (optimized) vue -> node_modules/.vite_opt_cache/vue +0ms
  vite:sfc /projectpath/App.vue parsed in 84ms. +0ms
  vite:hmr ws client connected +299ms
  vite:rewrite /index.css: rewriting +4s
  vite:rewrite     "vite/hmr" --> "/vite/hmr" +3ms
  vite:resolve (extension) /projectpath -> /projectpath +4s
  vite:rewrite /App.vue: rewriting +26ms
  vite:rewrite     "vue" --> "/@modules/vue" +2ms
  vite:hmr         /App.vue imports /@modules/vue +4s
  vite:rewrite     "./components/Home.vue" --> "/components/Home.vue" +0ms
  vite:hmr         /App.vue imports /components/Home.vue +0ms
  vite:rewrite     "vite/hmr" --> "/vite/hmr" +1ms
  vite:hmr ws client connected +1ms
  vite:rewrite /: serving from cache +0ms
  vite:rewrite (skipped) / +2ms
  vite:rewrite /@modules/vue: no imports found. +8ms
  vite:hmr ws client connected +129ms
  vite:resolve (extension) /projectpath -> /projectpath +143ms
  vite:rewrite /: serving from cache +131ms
  vite:rewrite (skipped) / +123ms
  vite:rewrite (cached) /main.js +81ms
  vite:rewrite (skipped) /vite/hmr +125ms
  vite:resolve (cached) vue -> node_modules/.vite_opt_cache/vue +4s
  vite:rewrite (cached) /@modules/vue +1ms
  vite:sfc /projectpath/App.vue parse cache hit +4s
  vite:rewrite (cached) /App.vue +1ms
  vite:rewrite (cached) /index.css?import +3s
  vite:sfc /projectpath/App.vue parse cache hit +3s
  vite:sfc /App.vue template compiled in 12ms. +12ms
  vite:rewrite (skipped) /App.vue?type=template +37ms
  vite:hmr ws client connected +3s
  vite:rewrite (skipped) /favicon.ico +3ms
  vite:sfc /projectpath/components/Home.vue parsed in 3ms. +8ms
  vite:rewrite /components/Home.vue: rewriting +7ms
  vite:rewrite     "vue" --> "/@modules/vue" +0ms
  vite:hmr         /components/Home.vue imports /@modules/vue +8ms
  vite:resolve (extension) /projectpath/api -> /projectpath/api.ts +3s
  vite:rewrite     "../api" --> "/api.ts" +0ms
  vite:hmr         /components/Home.vue imports /api.ts +0ms
  vite:rewrite     "vite/hmr" --> "/vite/hmr" +0ms
  vite:sfc /projectpath/components/Home.vue parse cache hit +52ms
  vite:sfc /components/Home.vue template compiled in 13ms. +13ms
  vite:rewrite (skipped) /components/Home.vue?type=template +64ms
  vite:rewrite /api.ts: rewriting +2ms
  vite:resolve (node_module entry) ky -> index.js +66ms
  vite:rewrite     "ky" --> "/@modules/ky/index.js" +0ms
  vite:hmr         /api.ts imports /@modules/ky/index.js +66ms
  vite:resolve (node_module entry) miragejs -> dist/mirage-esm.js +1ms
  vite:rewrite     "miragejs" --> "/@modules/miragejs/dist/mirage-esm.js" +1ms
  vite:hmr         /api.ts imports /@modules/miragejs/dist/mirage-esm.js +1ms
  vite:resolve (node_modules) ky/index.js -> node_modules/ky/index.js +3s
  vite:resolve (node_modules) miragejs/dist/mirage-esm.js -> node_modules/miragejs/dist/mirage-esm.js +1ms
  vite:rewrite /@modules/ky/index.js: no imports found. +43ms
  vite:rewrite /@modules/miragejs/dist/mirage-esm.js: rewriting +8ms
  vite:resolve (node_module entry) lodash.isplainobject -> index.js +61ms
  vite:rewrite     "lodash.isplainobject" --> "/@modules/lodash.isplainobject/index.js" +10ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.isplainobject/index.js +61ms
  vite:resolve (node_module entry) lodash.isfunction -> index.js +1ms
  vite:rewrite     "lodash.isfunction" --> "/@modules/lodash.isfunction/index.js" +1ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.isfunction/index.js +1ms
  vite:resolve (node_module entry) lodash.mapvalues -> index.js +0ms
  vite:rewrite     "lodash.mapvalues" --> "/@modules/lodash.mapvalues/index.js" +0ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.mapvalues/index.js +1ms
  vite:resolve (node_module entry) lodash.uniq -> index.js +1ms
  vite:rewrite     "lodash.uniq" --> "/@modules/lodash.uniq/index.js" +1ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.uniq/index.js +0ms
  vite:resolve (node_module entry) lodash.flatten -> index.js +0ms
  vite:rewrite     "lodash.flatten" --> "/@modules/lodash.flatten/index.js" +0ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.flatten/index.js +1ms
  vite:rewrite     "@miragejs/pretender-node-polyfill/before" --> "/@modules/@miragejs/pretender-node-polyfill/before" +1ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/@miragejs/pretender-node-polyfill/before +0ms
  vite:resolve (node_module entry) pretender -> ./dist/pretender.es.js +2ms
  vite:rewrite     "pretender" --> "/@modules/pretender/dist/pretender.es.js" +1ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/pretender/dist/pretender.es.js +1ms
  vite:rewrite     "@miragejs/pretender-node-polyfill/after" --> "/@modules/@miragejs/pretender-node-polyfill/after" +0ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/@miragejs/pretender-node-polyfill/after +0ms
  vite:resolve (node_module entry) inflected -> dist/esm/inflected.js +1ms
  vite:rewrite     "inflected" --> "/@modules/inflected/dist/esm/inflected.js" +1ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/inflected/dist/esm/inflected.js +1ms
  vite:resolve (node_module entry) lodash.lowerfirst -> index.js +0ms
  vite:rewrite     "lodash.lowerfirst" --> "/@modules/lodash.lowerfirst/index.js" +0ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.lowerfirst/index.js +0ms
  vite:resolve (node_module entry) lodash.isequal -> index.js +1ms
  vite:rewrite     "lodash.isequal" --> "/@modules/lodash.isequal/index.js" +1ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.isequal/index.js +1ms
  vite:resolve (node_module entry) lodash.map -> index.js +0ms
  vite:rewrite     "lodash.map" --> "/@modules/lodash.map/index.js" +0ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.map/index.js +0ms
  vite:resolve (node_module entry) lodash.clonedeep -> index.js +1ms
  vite:rewrite     "lodash.clonedeep" --> "/@modules/lodash.clonedeep/index.js" +1ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.clonedeep/index.js +1ms
  vite:resolve (node_module entry) lodash.invokemap -> index.js +0ms
  vite:rewrite     "lodash.invokemap" --> "/@modules/lodash.invokemap/index.js" +0ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.invokemap/index.js +0ms
  vite:resolve (node_module entry) lodash.compact -> index.js +1ms
  vite:rewrite     "lodash.compact" --> "/@modules/lodash.compact/index.js" +1ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.compact/index.js +1ms
  vite:resolve (node_module entry) lodash.has -> index.js +0ms
  vite:rewrite     "lodash.has" --> "/@modules/lodash.has/index.js" +0ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.has/index.js +0ms
  vite:resolve (node_module entry) lodash.values -> index.js +0ms
  vite:rewrite     "lodash.values" --> "/@modules/lodash.values/index.js" +1ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.values/index.js +1ms
  vite:resolve (node_module entry) lodash.isempty -> index.js +1ms
  vite:rewrite     "lodash.isempty" --> "/@modules/lodash.isempty/index.js" +1ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.isempty/index.js +1ms
  vite:resolve (node_module entry) lodash.get -> index.js +1ms
  vite:rewrite     "lodash.get" --> "/@modules/lodash.get/index.js" +0ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.get/index.js +0ms
  vite:resolve (node_module entry) lodash.uniqby -> index.js +1ms
  vite:rewrite     "lodash.uniqby" --> "/@modules/lodash.uniqby/index.js" +1ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.uniqby/index.js +1ms
  vite:resolve (node_module entry) lodash.forin -> index.js +0ms
  vite:rewrite     "lodash.forin" --> "/@modules/lodash.forin/index.js" +0ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.forin/index.js +0ms
  vite:resolve (node_module entry) lodash.pick -> index.js +1ms
  vite:rewrite     "lodash.pick" --> "/@modules/lodash.pick/index.js" +1ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.pick/index.js +1ms
  vite:resolve (node_module entry) lodash.assign -> index.js +0ms
  vite:rewrite     "lodash.assign" --> "/@modules/lodash.assign/index.js" +11ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.assign/index.js +11ms
  vite:resolve (node_module entry) lodash.find -> index.js +11ms
  vite:rewrite     "lodash.find" --> "/@modules/lodash.find/index.js" +0ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.find/index.js +0ms
  vite:resolve (node_module entry) lodash.isinteger -> index.js +1ms
  vite:rewrite     "lodash.isinteger" --> "/@modules/lodash.isinteger/index.js" +1ms
  vite:hmr         /@modules/miragejs/dist/mirage-esm.js imports /@modules/lodash.isinteger/index.js +1ms
  vite:resolve (node_modules) lodash.isplainobject/index.js -> node_modules/lodash.isplainobject/index.js +119ms
  vite:resolve (node_modules) lodash.isfunction/index.js -> node_modules/lodash.isfunction/index.js +1ms
  vite:resolve (node_modules) lodash.mapvalues/index.js -> node_modules/lodash.mapvalues/index.js +0ms
  vite:resolve (node_modules) lodash.uniq/index.js -> node_modules/lodash.uniq/index.js +1ms
  vite:resolve (node_modules) lodash.flatten/index.js -> node_modules/lodash.flatten/index.js +0ms
  vite:resolve (node_modules) @miragejs/pretender-node-polyfill/before -> node_modules/@miragejs/pretender-node-polyfill/before.js +1ms
  vite:rewrite /@modules/lodash.isplainobject/index.js: no imports found. +78ms
  vite:rewrite /@modules/lodash.isfunction/index.js: no imports found. +0ms
  vite:resolve (node_modules) pretender/dist/pretender.es.js -> node_modules/pretender/dist/pretender.es.js +3ms
  vite:resolve (node_modules) @miragejs/pretender-node-polyfill/after -> node_modules/@miragejs/pretender-node-polyfill/after.js +0ms
  vite:rewrite /@modules/lodash.uniq/index.js: no imports found. +4ms
  vite:rewrite /@modules/@miragejs/pretender-node-polyfill/before: no imports found. +1ms
  vite:resolve (node_modules) inflected/dist/esm/inflected.js -> node_modules/inflected/dist/esm/inflected.js +4ms
  vite:rewrite /@modules/lodash.flatten/index.js: no imports found. +1ms
  vite:resolve (node_modules) lodash.lowerfirst/index.js -> node_modules/lodash.lowerfirst/index.js +1ms
  vite:rewrite /@modules/@miragejs/pretender-node-polyfill/after: no imports found. +0ms
  vite:rewrite /@modules/lodash.mapvalues/index.js: no imports found. +1ms
  vite:resolve (node_modules) lodash.isequal/index.js -> node_modules/lodash.isequal/index.js +2ms
  vite:resolve (node_modules) lodash.map/index.js -> node_modules/lodash.map/index.js +0ms
  vite:resolve (node_modules) lodash.clonedeep/index.js -> node_modules/lodash.clonedeep/index.js +0ms
  vite:rewrite /@modules/inflected/dist/esm/inflected.js: no imports found. +2ms
  vite:rewrite /@modules/lodash.lowerfirst/index.js: no imports found. +0ms
  vite:rewrite /@modules/pretender/dist/pretender.es.js: rewriting +1ms
  vite:resolve (node_module entry) route-recognizer -> dist/route-recognizer.es.js +89ms
  vite:rewrite     "route-recognizer" --> "/@modules/route-recognizer/dist/route-recognizer.es.js" +1ms
  vite:hmr         /@modules/pretender/dist/pretender.es.js imports /@modules/route-recognizer/dist/route-recognizer.es.js +90ms
  vite:resolve (node_module entry) fake-xml-http-request -> ./src/fake-xml-http-request.js +1ms
  vite:rewrite     "fake-xml-http-request" --> "/@modules/fake-xml-http-request/src/fake-xml-http-request.js" +1ms
  vite:hmr         /@modules/pretender/dist/pretender.es.js imports /@modules/fake-xml-http-request/src/fake-xml-http-request.js +0ms
  vite:resolve (node_modules) lodash.invokemap/index.js -> node_modules/lodash.invokemap/index.js +5ms
  vite:resolve (node_modules) lodash.compact/index.js -> node_modules/lodash.compact/index.js +0ms
  vite:resolve (node_modules) lodash.has/index.js -> node_modules/lodash.has/index.js +0ms
  vite:rewrite /@modules/lodash.compact/index.js: no imports found. +2ms
  vite:rewrite /@modules/lodash.isequal/index.js: no imports found. +1ms
  vite:resolve (node_modules) lodash.values/index.js -> node_modules/lodash.values/index.js +2ms
  vite:resolve (node_modules) lodash.isempty/index.js -> node_modules/lodash.isempty/index.js +1ms
  vite:rewrite /@modules/lodash.clonedeep/index.js: no imports found. +1ms
  vite:rewrite /@modules/lodash.map/index.js: no imports found. +1ms
  vite:rewrite /@modules/lodash.has/index.js: no imports found. +1ms
  vite:resolve (node_modules) lodash.get/index.js -> node_modules/lodash.get/index.js +2ms
  vite:resolve (node_modules) lodash.uniqby/index.js -> node_modules/lodash.uniqby/index.js +1ms
  vite:rewrite /@modules/lodash.invokemap/index.js: no imports found. +1ms
  vite:resolve (node_modules) lodash.forin/index.js -> node_modules/lodash.forin/index.js +1ms
  vite:rewrite /@modules/lodash.values/index.js: no imports found. +1ms
  vite:resolve (node_modules) lodash.pick/index.js -> node_modules/lodash.pick/index.js +0ms
  vite:rewrite /@modules/lodash.isempty/index.js: no imports found. +1ms
  vite:resolve (node_modules) lodash.assign/index.js -> node_modules/lodash.assign/index.js +1ms
  vite:rewrite /@modules/lodash.get/index.js: no imports found. +1ms
  vite:resolve (node_modules) lodash.find/index.js -> node_modules/lodash.find/index.js +1ms
  vite:rewrite /@modules/lodash.forin/index.js: no imports found. +1ms
  vite:resolve (node_modules) lodash.isinteger/index.js -> node_modules/lodash.isinteger/index.js +1ms
  vite:rewrite /@modules/lodash.pick/index.js: no imports found. +1ms
  vite:rewrite /@modules/lodash.assign/index.js: no imports found. +0ms
  vite:rewrite /@modules/lodash.uniqby/index.js: no imports found. +1ms
  vite:rewrite /@modules/lodash.isinteger/index.js: no imports found. +1ms
  vite:rewrite /@modules/lodash.find/index.js: no imports found. +1ms
  vite:resolve (node_modules) route-recognizer/dist/route-recognizer.es.js -> node_modules/route-recognizer/dist/route-recognizer.es.js +72ms
  vite:resolve (node_modules) fake-xml-http-request/src/fake-xml-http-request.js -> node_modules/fake-xml-http-request/src/fake-xml-http-request.js +1ms
  vite:rewrite /@modules/fake-xml-http-request/src/fake-xml-http-request.js: no imports found. +70ms
  vite:rewrite /@modules/route-recognizer/dist/route-recognizer.es.js: no imports found. +1ms

[Uninen]

As a clarification, importing the server works fine alone. Only when trying to instantiate it, the error emerges.

[yyx990803]

I just tested locally and it works. It was likely a resolver issue which happens to also be fixed in the last few commits (which refactored the resolver quite a bit).

[Uninen]

Upgraded vite to 0.16.9 but I've still got the same error. On Chrome the message is different, though: Uncaught SyntaxError: The requested module '/@modules/lodash.get/index.js' does not provide an export named 'default'

Anyways, got the same code working with vue-cli project so I'm continuing with that now. I can test this out later when the project matures a bit :)

[yyx990803]

Hmm, it's definitely working for me on a fresh install. Can you provide a reproduction? (Just want to make sure where the problem is)

[Uninen]

Sure, here's a cleaned down fresh repro: https://github.com/Uninen/vite-miragejs-issue-240

Uncomment line 6 in components/Home.vue to trigger the bug.

Edit: my original repo has much more going on and the miragejs import and server were in a different file, but it seems to trigger for me with this very bare-bones setup as well. I tried to take out everything non-related while still keeping some functionality to verify that Vue and Vite work normally.

[Uninen]

Cleaned up the repo a bit more and tested again with the latest vite v0.16.11, can still reproduce on my machine.

Edit: just noticed that there was new messages in the terminal (lodash is not in the pacage.json but I assume miragejs is using it):

[vite] dependency lodash.isplainobject does not have default entry defined in package.json.
[vite] dependency lodash.isfunction does not have default entry defined in package.json.
[vite] dependency lodash.mapvalues does not have default entry defined in package.json.
[vite] dependency lodash.uniq does not have default entry defined in package.json.
[vite] dependency lodash.flatten does not have default entry defined in package.json.
[vite] dependency lodash.lowerfirst does not have default entry defined in package.json.
[vite] dependency lodash.isequal does not have default entry defined in package.json.
[vite] dependency lodash.map does not have default entry defined in package.json.
[vite] dependency lodash.clonedeep does not have default entry defined in package.json.
[vite] dependency lodash.invokemap does not have default entry defined in package.json.
[vite] dependency lodash.compact does not have default entry defined in package.json.
[vite] dependency lodash.has does not have default entry defined in package.json.
[vite] dependency lodash.values does not have default entry defined in package.json.
[vite] dependency lodash.isempty does not have default entry defined in package.json.
[vite] dependency lodash.get does not have default entry defined in package.json.
[vite] dependency lodash.uniqby does not have default entry defined in package.json.
[vite] dependency lodash.forin does not have default entry defined in package.json.
[vite] dependency lodash.pick does not have default entry defined in package.json.
[vite] dependency lodash.assign does not have default entry defined in package.json.
[vite] dependency lodash.find does not have default entry defined in package.json.
[vite] dependency lodash.isinteger does not have default entry defined in package.json.

[yyx990803]

Ok this is because you put miragejs under devDependencies but actually imports it in your code. Vite only pre-bundles dependencies under dependencies - if you intend to import it in your code, it should be under dependencies.

[Uninen]

Oh, okay! Thanks 👍