TypeError: __require.resolve is not a function with svelte.config.cjs in an esm project

[ai]

Describe the bug

I have ESM project. After the update 1.0.0-next.10 → 1.0.0-next.11 I start to get error:

$ vite build
01:57:03 [vite-plugin-svelte] failed to require config /home/ai/Dev/slowreader/web/svelte.config.cjs
TypeError: __require.resolve is not a function
    at loadSvelteConfig (file:///home/ai/Dev/slowreader/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:459:42)
    at resolveOptions (file:///home/ai/Dev/slowreader/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:618:30)
    at Object.config (file:///home/ai/Dev/slowreader/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:1072:23)
    at resolveConfig (/home/ai/Dev/slowreader/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:75118:33)
    at async doBuild (/home/ai/Dev/slowreader/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:51500:20)
    at async build (/home/ai/Dev/slowreader/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:51488:16)
    at async CAC.<anonymous> (/home/ai/Dev/slowreader/node_modules/vite/dist/node/cli.js:13999:9)

My Vite config:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()]
})

My Svelte config:

const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  preprocess: sveltePreprocess()
}

Reproduction

git clone git@github.com:hplush/slowreader.git
yarn upgrade-interactive --latest
yarn build

Logs

➜ DEBUG='vite:*' npx vite build
  vite:config native esm config loaded in 53ms URL {
  href: 'file:///home/ai/Dev/slowreader/web/vite.config.js',
  origin: 'null',
  protocol: 'file:',
  username: '',
  password: '',
  host: '',
  hostname: '',
  port: '',
  pathname: '/home/ai/Dev/slowreader/web/vite.config.js',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
} +0ms
  vite:vite-plugin-svelte default options for production {
  extensions: [ '.svelte' ],
  hot: false,
  emitCss: true,
  compilerOptions: { format: 'esm', css: false, dev: false }
} +0ms
02:02:06 [vite-plugin-svelte] failed to require config /home/ai/Dev/slowreader/web/svelte.config.cjs
TypeError: __require.resolve is not a function
    at loadSvelteConfig (file:///home/ai/Dev/slowreader/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:459:42)
    at resolveOptions (file:///home/ai/Dev/slowreader/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:618:30)
    at Object.config (file:///home/ai/Dev/slowreader/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:1072:23)
    at resolveConfig (/home/ai/Dev/slowreader/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:75118:33)
    at async doBuild (/home/ai/Dev/slowreader/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:51500:20)
    at async build (/home/ai/Dev/slowreader/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:51488:16)
    at async CAC.<anonymous> (/home/ai/Dev/slowreader/node_modules/vite/dist/node/cli.js:13999:9)

### System Info

```shell
System:
    OS: Linux 5.13 Fedora 34 (Workstation Edition) 34 (Workstation Edition)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 1.31 GB / 15.33 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.6.2 - ~/.asdf/installs/nodejs/16.6.2/bin/node
    Yarn: 1.22.10 - ~/.asdf/shims/yarn
    npm: 7.20.3 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 92.0.4515.131
    Firefox: 90.0.2

### Severity

blocking all usage of vite-plugin-svelte

[bluwy]

Looks like the error came from here:

vite-plugin-svelte/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts

Line 50 in b195fc3

delete require.cache[require.resolve(configFile)];

Apparently, esbuild compiles this to __require.resolve and __require is this 😦

var __require = (x) => {
  if (typeof require !== "undefined")
    return require(x);
  throw new Error('Dynamic require of "' + x + '" is not supported');
};

Note, it's from the esm bundle, and esbuild doesn't assign .resolve to that function too, which sort-off make sense because you can't do that in esm.

A solution is to load the cjs variant of the svelte config too if we're in esm mode so we'd never reach that part of the code in esm. (the cjs bundle compiles just fine)

---

As a workaround for now, you can convert the svelte config to .js and refactor it as esm, since the linked project is using type: module.

[ai]

Great thanks! Workaround helped.

[dominikg]

thanks for tackling this @bluwy

I do recommend using esm for svelte.config.js if your surrounding project is esm too. But the linked PR is going to make it work anyways.

[dominikg]

updated the title to be a bit more descriptive.

[bhojani3192]

I have same error

[bhojani3192]

[vite-plugin-svelte] failed to require config E:\Jar App\jar\jar\svelte.config.js

[dominikg]

@bhojani3192 please file a new issue report and provide a reproduction

[bluwy]

please file a new issue report and provide a reproduction

@bhojani3192 If you're not willing to do so, please ask for support in the Svelte discord.