2 imports run for same module after vite build

[hiromaily]

Describe the bug

command vite build doesn't work by the following error

TypeError: Cannot read properties of undefined (reading 'Long')
    at file:///Users/me/app/.svelte-kit/output/server/entries/pages/index.svelte.js:304:14
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async Promise.all (index 1)
    at async respond$1 (file:///Users/me/app/.svelte-kit/output/server/index.js:1754:13)
    at async resolve (file:///Users/me/app/.svelte-kit/output/server/index.js:2148:105)
    at async respond (file:///Users/me/app/.svelte-kit/output/server/index.js:2103:22)
    at async visit (file:///Users/me/app/node_modules/@sveltejs/kit/dist/vite.js:1193:20)

This error occurred by the following code in generated index.svelte.js

if (_m0.util.Long !== Long) {

_m0.util is undefined

Because somehow generated file includes 2 import for same module

import * as _m0 from "protobufjs/minimal.js";
import _m0__default from "protobufjs/minimal.js";

And according to docs: tsconfig#esModuleInterop,

the ES6 modules spec states that a namespace import (import * as x) can only be an object

So import * as _m0 from "protobufjs/minimal.js"; is not required at all.

Reproduction

https://github.com/hiromaily/svelte-sample/tree/main/app

git clone https://github.com/hiromaily/svelte-sample.git
cd app
npm install
npx vite build

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Memory: 91.72 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nodebrew/current/bin/node
    Yarn: 1.22.15 - ~/.nodebrew/current/bin/yarn
    npm: 8.9.0 - ~/.nodebrew/current/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Safari: 15.4
  npmPackages:
    svelte: ^3.48.0 => 3.48.0

Used Package Manager

npm

Logs

$ npx vite build

Generated an empty chunk: "hooks"
.svelte-kit/output/server/manifest.json                        1.17 KiB
.svelte-kit/output/server/index.js                             73.23 KiB
.svelte-kit/output/server/entries/fallbacks/layout.svelte.js   0.24 KiB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js    0.72 KiB
.svelte-kit/output/server/entries/pages/index.svelte.js        86.28 KiB
.svelte-kit/output/server/chunks/index-43ce8bc5.js             2.84 KiB
.svelte-kit/output/server/chunks/hooks-1c45ba0b.js             0.00 KiB
TypeError: Cannot read properties of undefined (reading 'Long')
    at file:///Users/me/app/.svelte-kit/output/server/entries/pages/index.svelte.js:304:14
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async Promise.all (index 1)
    at async respond$1 (file:///Users/me/app/.svelte-kit/output/server/index.js:1754:13)
    at async resolve (file:///Users/me/app/.svelte-kit/output/server/index.js:2148:105)
    at async respond (file:///Users/me/app/.svelte-kit/output/server/index.js:2103:22)
    at async visit (file:///Users/me/app/node_modules/@sveltejs/kit/dist/vite.js:1193:20)
[vite-plugin-svelte-kit] 500 /

.svelte-kit/output/server/entries/pages/index.svelte.js file includes strange import

import * as _m0 from "protobufjs/minimal.js";
import _m0__default from "protobufjs/minimal.js";

package.json is

	"devDependencies": {
		"@rollup/plugin-node-resolve": "^13.3.0",
		"@sveltejs/adapter-auto": "next",
		"@sveltejs/adapter-node": "^1.0.0-next.78",
		"@sveltejs/adapter-static": "^1.0.0-next.34",
		"@sveltejs/kit": "next",
		"@typescript-eslint/eslint-plugin": "^5.27.0",
		"@typescript-eslint/parser": "^5.27.0",
		"eslint": "^8.16.0",
		"eslint-config-prettier": "^8.3.0",
		"eslint-plugin-svelte3": "^4.0.0",
		"prettier": "^2.6.2",
		"prettier-plugin-svelte": "^2.7.0",
		"svelte": "^3.48.0",
		"svelte-check": "^2.7.1",
		"svelte-preprocess": "^4.10.6",
		"tslib": "^2.3.1",
		"typescript": "^4.7.2",
		"vite": "^2.9.14"
	},
	"type": "module",
	"dependencies": {
		"@cosmjs/launchpad": "^0.27.1",
		"@cosmjs/proto-signing": "^0.28.10",
		"@cosmjs/stargate": "^0.28.10",
		"@types/long": "^4.0.2",
		"protobufjs": "^6.11.3",
		"secretjs": "^0.17.5"
	},
	"overrides": {
		"rollup": "2.76.0"
	}

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.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• 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.

[hiromaily]

Though I've already posted same issue on svelte/kit, but this issue would be caused by vite bundling process
sveltejs/kit#5418

[bluwy]

The two imports isn't the problem, but rather of how Rollup handles star import vs default import for external modules, which isn't aligned with how esModuleInterop works now. See rollup/rollup#3710. You can set output.interop: "auto" which should fix this, and will be the default in Rollup v3.

It would also be better to avoid importing protobujs/minimal in different ways as that's the reason why two imports appear.

[hiromaily]

@bluwy
Thanks for your advice!
I tried that way to build and modified vite.config.js as below

const config = {
	plugins: [
		sveltekit(),
	],
	build: {
		rollupOptions: {
			output: {
				interop: "auto"
			}
		}
	},
	define: {
		global: {}
	}
};

But it didn't fix the issue.

However, you gave me great hint to fit it.
I misunderstood how I set import for "protobufjs/minimal.js"
I switch import style as below

//import * as _m0 from "protobufjs/minimal.js";
import _m0 from "protobufjs/minimal.js";

Then it worked.
Thank you so much!

[hiromaily]

I close this issue thanks to @bluwy