Lxxyx
commented
3 years ago 可以参考：https://github.com/midwayjs/hooks/blob/master/examples/svelte/README.md
TODO：增加 svelte kit 的支持
Closed SOVLOOKUP closed 3 years ago
Lxxyx
commented
3 years ago 可以参考：https://github.com/midwayjs/hooks/blob/master/examples/svelte/README.md
TODO：增加 svelte kit 的支持
SOVLOOKUP
commented
3 years ago 我尝试在kit中引入hooks的vite插件时碰到了这个问题 https://github.com/sveltejs/kit/issues/1551
Lxxyx
commented
3 years ago 我尝试在kit中引入hooks的vite插件时碰到了这个问题 sveltejs/kit#1551
看起来是和导入的方式有关系。js 里应该认得是 module.exports，这个是 export default 的。你可以试试看
import hooks from '@midwayjs/vite-plugin-hooks';
hooks.default()修改后还是编译失败，貌似是 cjs 和 esm 的兼容问题
vite-plugin-svelte 似乎会进行对其他插件进行引用和某种处理，可能需要一些兼容性上的修改
❯ cnpm run dev
> ~TODO~@0.0.1 dev /home/sovlookup/桌面/my-app/test/my-app
> svelte-kit dev
[vite-plugin-svelte] failed to require config /home/sovlookup/桌面/my-app/test/my-app/svelte.config.js
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/sovlookup/桌面/my-app/test/my-app/svelte.config.js
require() of ES modules is not supported.
require() of /home/sovlookup/桌面/my-app/test/my-app/svelte.config.js from /home/sovlookup/桌面/my-app/test/my-app/node_modules/_@sveltejs_vite-plugin-svelte@1.0.0-next.10@@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/sovlookup/桌面/my-app/test/my-app/package.json.
at new NodeError (node:internal/errors:363:5)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1126:13)
at Module.load (node:internal/modules/cjs/loader:989:32)
at Function.Module._load (node:internal/modules/cjs/loader:829:14)
at Module.require (node:internal/modules/cjs/loader:1013:19)
at n (/home/sovlookup/桌面/my-app/test/my-app/node_modules/_jiti@1.9.2@jiti/dist/v8cache.js:2:2472)
at loadSvelteConfig (/home/sovlookup/桌面/my-app/test/my-app/node_modules/_@sveltejs_vite-plugin-svelte@1.0.0-next.10@@sveltejs/vite-plugin-svelte/dist/index.js:383:14)
at async resolveOptions (/home/sovlookup/桌面/my-app/test/my-app/node_modules/_@sveltejs_vite-plugin-svelte@1.0.0-next.10@@sveltejs/vite-plugin-svelte/dist/index.js:585:24)
at async Object.configResolved (/home/sovlookup/桌面/my-app/test/my-app/node_modules/_@sveltejs_vite-plugin-svelte@1.0.0-next.10@@sveltejs/vite-plugin-svelte/dist/index.js:755:17)
at async Promise.all (index 0) {
code: 'ERR_REQUIRE_ESM'
}原因是vite-plugin-svelte加载配置文件时，动态import无法正常工作 https://github.com/sveltejs/vite-plugin-svelte/issues/47。 如下，把 svelte.config.js 改成 cjs 格式就可以了：
const preprocess = require('svelte-preprocess');
const hooks = require('@midwayjs/vite-plugin-hooks');
/** @type {import('@sveltejs/kit').Config} */
module.exports = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
kit: {
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
vite: {
plugins: [ hooks.default() ]
}
}
};其中遇到一个错误是midway的cli读取 tsconfig.json 文件时报错，原因是json格式错误，可能是没有排除文件中注释直接解析导致的错误( tsconfig.json 中是允许多行注释的)。这个问题或许该开另一个issue？
Lxxyx
commented
3 years ago 原因是vite-plugin-svelte加载配置文件时，动态import无法正常工作 https://github.com/sveltejs/vite-plugin-svelte/issues/47。 如下，把 svelte.config.js 改成 cjs 格式就可以了：
const preprocess = require('svelte-preprocess'); const hooks = require('@midwayjs/vite-plugin-hooks');
/* @type {import('@sveltejs/kit').Config} / module.exports = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: preprocess(),
kit: { // hydrate the
element in src/app.html target: '#svelte', vite: { plugins: [ hooks.default() ] } } }; 其中遇到一个错误是midway的cli读取 tsconfig.json 文件时报错，原因是json格式错误，可能是没有排除文件中注释直接解析导致的错误( tsconfig.json 中是允许多行注释的)。这个问题或许该开另一个issue？可以提交到 https://github.com/midwayjs/cli 中哈
SOVLOOKUP
commented
3 years ago 我已经向 vite-plugin-svelte 提交了兼容性修改：https://github.com/sveltejs/vite-plugin-svelte/pull/49 等待上游代码更新即可解决这个issue
SOVLOOKUP
commented
3 years ago 该问题已经解决
svelte kit 中使用hooks时 vite 编译抛出错误
运行记录
复现代码
https://github.com/SOVLOOKUP/midway-svelte https://codesandbox.io/s/keen-curran-pich3
期望的解决方案
使hooks能与kit一同使用或者给出解决方向