dependency of dependency cannot be inlined

[kingyue737]

Describe the bug

I'm using vue-echarts which depends on echarts in my vite project.
I've add echarts in deps.inline but vitest still throws the following error:

SyntaxError: Unexpected token 'export'
 ❯ Object.compileFunction https:/vitest-dev-vitest-fhmvl9.w.staticblitz.com/blitz.ad37e903755d89e0f5d9999e69be73a0c6cb6bcc.js:6:341311
 ❯ wrapSafe https:/vitest-dev-vitest-fhmvl9.w.staticblitz.com/blitz.ad37e903755d89e0f5d9999e69be73a0c6cb6bcc.js:6:218270
 ❯ Module._compile https:/vitest-dev-vitest-fhmvl9.w.staticblitz.com/blitz.ad37e903755d89e0f5d9999e69be73a0c6cb6bcc.js:6:218638
 ❯ Module._extensions..js https:/vitest-dev-vitest-fhmvl9.w.staticblitz.com/blitz.ad37e903755d89e0f5d9999e69be73a0c6cb6bcc.js:6:219666
 ❯ Module.load https:/vitest-dev-vitest-fhmvl9.w.staticblitz.com/blitz.ad37e903755d89e0f5d9999e69be73a0c6cb6bcc.js:6:217692
 ❯ Module._load https:/vitest-dev-vitest-fhmvl9.w.staticblitz.com/blitz.ad37e903755d89e0f5d9999e69be73a0c6cb6bcc.js:6:215263

Module /home/projects/vitest-dev-vitest-fhmvl9/node_modules/echarts/core.js:20 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "echarts" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

As a temporary workaround you can try to inline the package by updating your config:

// vitest.config.js
export default {
  test: {
    deps: {
      inline: [
        "echarts"
      ]
    }
  }
}

if I add 'vue-echarts' in deps.inline, another error is thrown:

Error: ENOENT: no such file or directory, open 'D:/Solutions/online_monitor_front/node_modules/.pnpm/vue-echarts@6.0.3_nktb3bqsw4j3edtngojal4z54a/node_modules/vue-echarts/src/composables/api.ts'
 ❯ Object.openSync ../../../node:fs:585:3
 ❯ readFileSync ../../../node:fs:453:35
 ❯ ../../../file:/D:/Solutions/online_monitor_front/node_modules/.pnpm/vitest@0.14.1_jsdom@19.0.0+sass@1.32.13/node_modules/vitest/dist/chunk-vite-node-externalize.d492e389.mjs:9042:26
 ❯ printStack ../../../file:/D:/Solutions/online_monitor_front/node_modules/.pnpm/vitest@0.14.1_jsdom@19.0.0+sass@1.32.13/node_modules/vitest/dist/chunk-vite-node-externalize.d492e389.mjs:9127:32
 ❯ printError ../../../file:/D:/Solutions/online_monitor_front/node_modules/.pnpm/vitest@0.14.1_jsdom@19.0.0+sass@1.32.13/node_modules/vitest/dist/chunk-vite-node-externalize.d492e389.mjs:9040:3
 ❯ processTicksAndRejections ../../../node:internal/process/task_queues:96:5
 ❯ async DefaultReporter.printTaskErrors ../../../file:/D:/Solutions/online_monitor_front/node_modules/.pnpm/vitest@0.14.1_jsdom@19.0.0+sass@1.32.13/node_modules/vitest/dist/chunk-vite-node-externalize.d492e389.mjs:7618:7
 ❯ async DefaultReporter.reportSummary ../../../file:/D:/Solutions/online_monitor_front/node_modules/.pnpm/vitest@0.14.1_jsdom@19.0.0+sass@1.32.13/node_modules/vitest/dist/chunk-vite-node-externalize.d492e389.mjs:7564:7
 ❯ async DefaultReporter.onFinished ../../../file:/D:/Solutions/online_monitor_front/node_modules/.pnpm/vitest@0.14.1_jsdom@19.0.0+sass@1.32.13/node_modules/vitest/dist/chunk-vite-node-externalize.d492e389.mjs:7455:5
 ❯ async DefaultReporter.onFinished ../../../file:/D:/Solutions/online_monitor_front/node_modules/.pnpm/vitest@0.14.1_jsdom@19.0.0+sass@1.32.13/node_modules/vitest/dist/chunk-vite-node-externalize.d492e389.mjs:8245:5
 ❯ async Vitest.report ../../../file:/D:/Solutions/online_monitor_front/node_modules/.pnpm/vitest@0.14.1_jsdom@19.0.0+sass@1.32.13/node_modules/vitest/dist/chunk-vite-node-externalize.d492e389.mjs:10631:5
 ❯ async ../../../file:/D:/Solutions/online_monitor_front/node_modules/.pnpm/vitest@0.14.1_jsdom@19.0.0+sass@1.32.13/node_modules/vitest/dist/chunk-vite-node-externalize.d492e389.mjs:10468:7
 ❯ async Vitest.runFiles ../../../file:/D:/Solutions/online_monitor_front/node_modules/.pnpm/vitest@0.14.1_jsdom@19.0.0+sass@1.32.13/node_modules/vitest/dist/chunk-vite-node-externalize.d492e389.mjs:10472:12
 ❯ async Vitest.start ../../../file:/D:/Solutions/online_monitor_front/node_modules/.pnpm/vitest@0.14.1_jsdom@19.0.0+sass@1.32.13/node_modules/vitest/dist/chunk-vite-node-externalize.d492e389.mjs:10399:5
 ❯ async startVitest ../../../file:/D:/Solutions/online_monitor_front/node_modules/.pnpm/vitest@0.14.1_jsdom@19.0.0+sass@1.32.13/node_modules/vitest/dist/chunk-vite-node-externalize.d492e389.mjs:11133:5

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: {
  "code": "ENOENT",
  "errno": -4058,
  "path": "D:/Solutions/online_monitor_front/node_modules/.pnpm/vue-echarts@6.0.3_nktb3bqsw4j3edtngojal4z54a/node_modules/vue-echarts/src/composables/api.ts",
  "syscall": "open",
}

Reproduction

stackblitz.com/edit/vitest-dev-vitest-fhmvl9

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (6) x64 Intel(R) Core(TM) i5-9400 CPU @ 2.90GHz
    Memory: 5.41 GB / 15.86 GB
  Binaries:
    Node: 16.15.1 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.11.0 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (102.0.1245.33)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @vitejs/plugin-legacy: ^1.8.2 => 1.8.2
    vite: ^2.9.10 => 2.9.10
    vitest: ^0.14.1 => 0.14.1

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sheremet-va]

This is not a bug, that you cannot inline dependency of a dependency. You need to inline both. Explanation:

When dependency is not inlined, it will use native import syntax, so we cannot intercept it afterwards. So, if the main dependency is not inlined, we don't control any import inside.

When you inline both, you still have an error, because vue-echarts is using require to import echarts, but echarts is shipped with ESM - this is the error in echarts (it should provide both CJS and ESM), or alternatively vue-echarts could also provide a valid ESM entry. More on that here: https://github.com/sheremet-va/dual-packaging (TLDR: vue-charts points to cjs entry that uses require - and we don't intercept it, it should provide a valid "exports" field in package.json)

The other error is interesting. Something failed, and we try to get a stacktrace, but for some reason file doesn't exist? Can you open a separate issue for this one? I think we are receiving the path to source mapped location, but location doesn't exist.

[sheremet-va]

If you need an immediate solution, you can also add this to your vite config (deps should still be inlined):

  resolve: {
    mainFields: ["module"],
  },

But, please, open an issue with vue-charts (ecomfe/vue-echarts#601) and echarts (see apache/echarts#16709) to fix their exports field and build pipeline.

[sheremet-va]

Closing issue, since the problem is with upstream packages.

[kingyue737]

Thanks @sheremet-va !

For those who meet similar issues from upstream packages, you can use https://github.com/milahu/patch-package to modify package.json in node_modules while waiting for maintainers to fix the bug.

[stravid87]

I solved this problem by following a few other threads and installing a dev dependency, "https://www.npmjs.com/package/@originjs/vite-plugin-commonjs"

Next I modified vitest.config.js as follows:

export default defineConfig({
  test: {
    environment: 'jsdom',
    deps: {
      inline: ['vue-echarts', 'echarts']
    },
    include: ['src/**/*.spec.js']
  },
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),
    jsconfigPaths(),
    viteCommonjs(['vue-echarts'])
  ]
})

Hope it helps.