Uncaught (in promise) TypeError: Failed to fetch dynamically imported module

[doox911-opensource]

What happened?

Unexpected path change in import

What did you expect to happen?

The import does not change

Reproduction URL

https://stackblitz.com/edit/quasarframework-baupgx?file=quasar.config.js

How to reproduce?

import { rest } from 'msw';

Has been changed

import { rest } from '/node_modules/.q-cache/vite/spa/deps/msw.js?v=4c46a6f3';

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

SPA Mode

Platforms/Browsers

Chrome

Quasar info output

Operating System - Windows_NT(10.0.22000) - win32/x64
NodeJs - 18.14.0

Global packages
  NPM - 9.3.1
  yarn - 1.22.19
  @quasar/cli - 2.0.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.13.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.6.2 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.7 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.3.7 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.16 -- Native-ESM powered web dev build tool
  eslint - 8.52.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking

Relevant log output

No response

Additional context

quasar config:

/* eslint-env node */
// const replace = require('@rollup/plugin-replace')
const { configure } = require('quasar/wrappers')

const path = require('path')

module.exports = configure(function(/* ctx */) {
  return {
    eslint: {
      warnings: true,
      errors: true,
    },
    boot: [
      '../shared/config/boot/axios',
      '../shared/config/boot/error-handler',
      '../shared/config/boot/msw',
    ],
    css: ['../app/style/app.scss'],
    extras: [
      'roboto-font',
      'material-icons',
    ],
    build: {
      alias: {
        App: path.join(__dirname, './src/app'),
        Entities: path.join(__dirname, './src/entities'),
        Features: path.join(__dirname, './src/features'),
        Pages: path.join(__dirname, './src/pages'),
        Shared: path.join(__dirname, './src/shared'),
        Widgets: path.join(__dirname, './src/widgets'),
      },
      target: {
        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
        node: 'node16',
      },
      vueRouterMode: 'history',
      extendViteConf(viteConf) {
        viteConf.define = {
          'globalThis.process.env.NODE_ENV': JSON.stringify(
            process.env.NODE_ENV
          ),
        }
      },
      // doesn't work too
      // rawDefine: {
      //   'globalThis.process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      // }
    },
    devServer: {
      open: true,
    },
    framework: {
      config: {},
      lang: 'ru',
      plugins: ['LocalStorage', 'Notify'],
    },
    animations: [],
    sourceFiles: {
      rootComponent: 'src/app/App.vue',
      router: 'src/app/router',
      store: 'src/app/store',
    },
  }
})

package.json:

{
  "name": "test",
  "version": "0.0.1",
  "description": "test",
  "productName": "test",
  "author": "test",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.ts,.vue ./",
    "test": "echo \"No test specified\" && exit 0",
    "dev": "quasar dev",
    "build": "quasar build",
  },
  "dependencies": {
    "@quasar/cli": "^2.3.0",
    "@quasar/extras": "^1.16.4",
    "axios": "^1.2.1",
    "pinia": "^2.0.11",
    "quasar": "^2.6.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0"
  },
  "devDependencies": {
    "@openapitools/openapi-generator-cli": "^2.7.0",
    "@quasar/app-vite": "^1.3.0",
    "@rollup/plugin-replace": "^5.0.5",
    "@types/node": "^12.20.21",
    "@typescript-eslint/eslint-plugin": "^5.10.0",
    "@typescript-eslint/parser": "^5.10.0",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.10.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-vue": "^9.0.0",
    "msw": "^2.0.3",
    "typescript": "^4.5.4"
  },
  "engines": {
    "node": "^18 || ^16 || ^14.19",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  },
  "msw": {
    "workerDirectory": "public"
  }
}

I try fix bug: mswjs/msw#1645

[pdanpdan]

You mixed some code from msw@1 with some code from msw@2 - decide on one of them and follow their docs, not some random high quality tutorial found online

It's a half page title in their release notes about breaking changes in v2

[doox911-opensource]

I'm sorry, I was inattentive. Yes, the API has changed. But why does Quasar replace the path in import?

You mixed some code from msw@1 with some code from msw@2 - decide on one of them and follow their docs, not some random high quality tutorial found online

It's a half page title in their release notes about breaking changes in v2

[rstoenescu]

The path replacement is done by Vite. It's part of how it works.

[little3201]

the important is to add :
rawDefine: { 'globalThis.process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) },