search

sveltejs / vite-plugin-svelte

Svelte plugin for http://vitejs.dev/
MIT License
865 stars 105 forks source link

"dynamicImportDefault" doesnot work as expected #47

Closed SOVLOOKUP closed 3 years ago

SOVLOOKUP commented 3 years ago

Description

I am using svelte kit with midway/hooks which needs a vite plugin to work.

But when importing the plugin in svelte.config.js, "dynamicImportDefault" function will fail with err:

> A dynamic import callback was not specified.

I found the problem is: Dynamic import can only work in ES module file. So after tsc compiling, "dynamicImportDefault" function won't work as expected in dist/index.js(a cjs file).

Reproduction

https://github.com/SOVLOOKUP/midway-svelte

dominikg commented 3 years ago

Thank you for reporting this issue. Is it possible that you have to push your latest code to the repo? It seems there are dependencies missing in package.json. After i installed them and changed hooks() to hooks.default() in svelte.config.js i got the following error

[vite-plugin-svelte] failed to require config /home/dominikg/develop/reproductions/midway-svelte/svelte.config.js
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/dominikg/develop/reproductions/midway-svelte/svelte.config.js
require() of ES modules is not supported.
require() of /home/dominikg/develop/reproductions/midway-svelte/svelte.config.js from /home/dominikg/develop/reproductions/midway-svelte/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.4/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename svelte.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/dominikg/develop/reproductions/midway-svelte/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at n (/home/dominikg/develop/reproductions/midway-svelte/node_modules/.pnpm/jiti@1.9.2/node_modules/jiti/dist/v8cache.js:2:2472)
    at loadSvelteConfig (/home/dominikg/develop/reproductions/midway-svelte/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.4/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:383:14)
    at async resolveOptions (/home/dominikg/develop/reproductions/midway-svelte/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.4/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:585:24)
    at async Object.configResolved (/home/dominikg/develop/reproductions/midway-svelte/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.4/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:755:17)
    at async Promise.all (index 0)
    at async resolveConfig (/home/dominikg/develop/reproductions/midway-svelte/node_modules/.pnpm/vite@2.3.4/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:69971:5) {
  code: 'ERR_REQUIRE_ESM'
}
> Invalid host defined options
TypeError: Invalid host defined options
    at eval (eval at <anonymous> (/home/dominikg/develop/reproductions/midway-svelte/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.4/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:369:28), <anonymous>:3:1)
    at loadSvelteConfig (/home/dominikg/develop/reproductions/midway-svelte/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.4/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:376:22)
    at resolveOptions (/home/dominikg/develop/reproductions/midway-svelte/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.4/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:585:30)
    at Object.configResolved (/home/dominikg/develop/reproductions/midway-svelte/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.4/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:755:23)
    at /home/dominikg/develop/reproductions/midway-svelte/node_modules/.pnpm/vite@2.3.4/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:69971:127
    at Array.map (<anonymous>)
    at resolveConfig (/home/dominikg/develop/reproductions/midway-svelte/node_modules/.pnpm/vite@2.3.4/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:69971:35)
    at async Object.createServer (/home/dominikg/develop/reproductions/midway-svelte/node_modules/.pnpm/vite@2.3.4/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:68382:20)
    at async Watcher.init_server (file:///home/dominikg/develop/reproductions/midway-svelte/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.109_svelte@3.38.2/node_modules/@sveltejs/kit/dist/chunks/index.js:3229:15)
    at async Watcher.init (file:///home/dominikg/develop/reproductions/midway-svelte/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.109_svelte@3.38.2/node_modules/@sveltejs/kit/dist/chunks/index.js:3196:3)

This is the exact same message as in this issue https://github.com/windicss/vite-plugin-windicss/issues/167 And midway/hooks also seems to use jiti

@SOVLOOKUP can you try to reproduce this error with the vite svelte template npm init @vitejs/app -t svelte

cc @pi0 is there anything in jiti that could cause this?

SOVLOOKUP commented 3 years ago

use vite svelte template only is ok: https://github.com/midwayjs/hooks/blob/master/examples/svelte

This is a compatibility bug, which causes the esm module cannot be imported properly in svelte.config.js. Writing svelte.config.js in cjs format can make it work (https://github.com/midwayjs/hooks/issues/97#issuecomment-848433268) , but kit has abandoned cjs.

I have solved this problem by using tsup to make pulgin compatible with cjs and esm. #49 @dominikg

pi0 commented 3 years ago

Hi @SOVLOOKUP. Confirming issue and trying with JITI_DEBUG=1 yarn dev: 

[jiti] [transpile] /home/pooya/tmp/midway-svelte/midway.config.ts
[jiti] [cache hit] /home/pooya/tmp/midway-svelte/midway.config.ts ~> /tmp/node-jiti/midway-svelte-midway.config.ts.5f3b6be3.js
[jiti] [native] /home/pooya/tmp/midway-svelte/node_modules/@midwayjs/hooks/dist/midwayjs-hooks.cjs.js

Jiti is in stack trace most probably because of v8 cache.

SOVLOOKUP commented 3 years ago

Hi @SOVLOOKUP. Confirming issue and trying with JITI_DEBUG=1 yarn dev:

[jiti] [transpile] /home/pooya/tmp/midway-svelte/midway.config.ts
[jiti] [cache hit] /home/pooya/tmp/midway-svelte/midway.config.ts ~> /tmp/node-jiti/midway-svelte-midway.config.ts.5f3b6be3.js
[jiti] [native] /home/pooya/tmp/midway-svelte/node_modules/@midwayjs/hooks/dist/midwayjs-hooks.cjs.js

Jiti is in stack trace most probably because of v8 cache.

❯ JITI_DEBUG=1 yarn dev
yarn run v1.22.10
warning package.json: No license field
$ svelte-kit dev
[jiti] [transpile] /home/sovlookup/桌面/test/midway-svelte/midway.config.ts
[jiti] [cache hit] /home/sovlookup/桌面/test/midway-svelte/midway.config.ts ~> /tmp/node-jiti/midway-svelte-midway.config.ts.c800ce64.js
[jiti] [native] /home/sovlookup/桌面/test/midway-svelte/node_modules/_@midwayjs_hooks@2.1.0@@midwayjs/hooks/dist/midwayjs-hooks.cjs.js

  SvelteKit v1.0.0-next.109

  local:   http://localhost:3000
  network: not exposed

  Use --host to expose server to other devices on this network

⠋ Midway Starting [jiti] [transpile] /home/sovlookup/桌面/test/midway-svelte/midway.config.ts
[jiti] [cache hit] /home/sovlookup/桌面/test/midway-svelte/midway.config.ts ~> /tmp/node-jiti/midway-svelte-midway.config.ts.c800ce64.js
dominikg commented 3 years ago

should be fixed by #54

dominikg commented 3 years ago

1.0.0-next.11has been released and sveltekit uses it. please try

SOVLOOKUP commented 3 years ago

thanks very much~