fix(lib): use proper extension

docs/config/index.md

@@ -212,7 +212,7 @@ export default defineConfig(async ({ command, mode }) => {
   {
     "exports": {
       ".": {
-        "import": "./index.esm.js",
+        "import": "./index.esm.mjs",
         "require": "./index.cjs.js"
       }
     }

docs/guide/build.md

@@ -111,7 +111,10 @@ module.exports = defineConfig({
     lib: {
       entry: path.resolve(__dirname, 'lib/main.js'),
       name: 'MyLib',
-      fileName: (format) => `my-lib.${format}.js`
+      fileName: (format) => {
+        const extension = format === 'es' ? 'mjs' : 'js'
+        return `my-lib.${format}.${extension}`
+      }
     },
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
@@ -134,7 +137,7 @@ Running `vite build` with this config uses a Rollup preset that is oriented towa
 ```
 $ vite build
 building for production...
-[write] my-lib.es.js 0.08kb, brotli: 0.07kb
+[write] my-lib.es.mjs 0.08kb, brotli: 0.07kb
 [write] my-lib.umd.js 0.30kb, brotli: 0.16kb
 ```
 
@@ -145,10 +148,10 @@ Recommended `package.json` for your lib:
   "name": "my-lib",
   "files": ["dist"],
   "main": "./dist/my-lib.umd.js",
-  "module": "./dist/my-lib.es.js",
+  "module": "./dist/my-lib.es.mjs",
   "exports": {
     ".": {
-      "import": "./dist/my-lib.es.js",
+      "import": "./dist/my-lib.es.mjs",
       "require": "./dist/my-lib.umd.js"
     }
   }

packages/create-vite/template-lit-ts/package.json

@@ -2,9 +2,9 @@
   "name": "vite-lit-ts-starter",
   "private": true,
   "version": "0.0.0",
-  "main": "dist/my-element.es.js",
+  "main": "dist/my-element.es.mjs",
   "exports": {
-    ".": "./dist/my-element.es.js"
+    ".": "./dist/my-element.es.mjs"
   },
   "types": "types/my-element.d.ts",
   "files": [

packages/create-vite/template-lit/package.json

@@ -2,9 +2,9 @@
   "name": "vite-lit-starter",
   "private": true,
   "version": "0.0.0",
-  "main": "dist/my-element.es.js",
+  "main": "dist/my-element.es.mjs",
   "exports": {
-    ".": "./dist/my-element.es.js"
+    ".": "./dist/my-element.es.mjs"
   },
   "files": [
     "dist"

packages/playground/lib/index.dist.html

@@ -5,7 +5,7 @@
 <div class="dynamic-import-message"></div>
 
 <script type="module">
-  import myLib from './my-lib-custom-filename.es.js'
+  import myLib from './my-lib-custom-filename.es.mjs'
 
   myLib('.es')
 </script>

packages/playground/lib/vite.config.js

@@ -10,7 +10,7 @@ module.exports = {
       entry: path.resolve(__dirname, 'src/main.js'),
       name: 'MyLib',
       formats: ['es', 'umd', 'iife'],
-      fileName: (format) => `my-lib-custom-filename.${format}.js`
+      fileName: 'my-lib-custom-filename'
     }
   },
   plugins: [

packages/playground/resolve-config/__tests__/resolve-config.spec.ts

@@ -10,42 +10,45 @@ const fromTestDir = (...p: string[]) => path.resolve(testDir, ...p)
 const build = (configName: string) => {
   commandSync(`${viteBin} build`, { cwd: fromTestDir(configName) })
 }
-const getDistFile = (configName: string) => {
-  return fs.readFileSync(fromTestDir(`${configName}/dist/index.es.js`), 'utf8')
+const getDistFile = (configName: string, extension: string) => {
+  return fs.readFileSync(
+    fromTestDir(`${configName}/dist/index.es.${extension}`),
+    'utf8'
+  )
 }
 
 if (isBuild) {
   it('loads vite.config.js', () => {
     build('js')
-    expect(getDistFile('js')).toContain('console.log(true)')
+    expect(getDistFile('js', 'mjs')).toContain('console.log(true)')
   })
   it('loads vite.config.js with package#type module', () => {
     build('js-module')
-    expect(getDistFile('js-module')).toContain('console.log(true)')
+    expect(getDistFile('js-module', 'js')).toContain('console.log(true)')
   })
   it('loads vite.config.cjs', () => {
     build('cjs')
-    expect(getDistFile('cjs')).toContain('console.log(true)')
+    expect(getDistFile('cjs', 'mjs')).toContain('console.log(true)')
   })
   it('loads vite.config.cjs with package#type module', () => {
     build('cjs-module')
-    expect(getDistFile('cjs-module')).toContain('console.log(true)')
+    expect(getDistFile('cjs-module', 'js')).toContain('console.log(true)')
   })
   it('loads vite.config.mjs', () => {
     build('mjs')
-    expect(getDistFile('mjs')).toContain('console.log(true)')
+    expect(getDistFile('mjs', 'mjs')).toContain('console.log(true)')
   })
   it('loads vite.config.mjs with package#type module', () => {
     build('mjs-module')
-    expect(getDistFile('mjs-module')).toContain('console.log(true)')
+    expect(getDistFile('mjs-module', 'js')).toContain('console.log(true)')
   })
   it('loads vite.config.ts', () => {
     build('ts')
-    expect(getDistFile('ts')).toContain('console.log(true)')
+    expect(getDistFile('ts', 'mjs')).toContain('console.log(true)')
   })
   it('loads vite.config.ts with package#type module', () => {
     build('ts-module')
-    expect(getDistFile('ts-module')).toContain('console.log(true)')
+    expect(getDistFile('ts-module', 'js')).toContain('console.log(true)')
   })
 } else {
   // this test doesn't support serve mode

packages/playground/vue-lib/vite.config.lib.ts

@@ -10,7 +10,7 @@ export default defineConfig({
       entry: path.resolve(__dirname, 'src-lib/index.ts'),
       name: 'MyVueLib',
       formats: ['es'],
-      fileName: (format) => `my-vue-lib.${format}.js`
+      fileName: 'my-vue-lib'
     },
     rollupOptions: {
       external: ['vue'],

packages/vite/src/node/__tests__/build.spec.ts

@@ -26,7 +26,7 @@ describe('resolveLibFilename', () => {
       resolve(__dirname, 'packages/name')
     )
 
-    expect(filename).toBe('custom-filename.es.js')
+    expect(filename).toBe('custom-filename.es.mjs')
   })
 
   test('package name as filename', () => {
@@ -38,7 +38,7 @@ describe('resolveLibFilename', () => {
       resolve(__dirname, 'packages/name')
     )
 
-    expect(filename).toBe('mylib.es.js')
+    expect(filename).toBe('mylib.es.mjs')
   })
 
   test('custom filename and no package name', () => {
@@ -51,7 +51,7 @@ describe('resolveLibFilename', () => {
       resolve(__dirname, 'packages/noname')
     )
 
-    expect(filename).toBe('custom-filename.es.js')
+    expect(filename).toBe('custom-filename.es.mjs')
   })
 
   test('missing filename', () => {

packages/vite/src/node/build.ts

@@ -42,6 +42,7 @@ import type { DepOptimizationMetadata } from './optimizer'
 import { scanImports } from './optimizer/scan'
 import { assetImportMetaUrlPlugin } from './plugins/assetImportMetaUrl'
 import { loadFallbackPlugin } from './plugins/loadFallback'
+import type { PackageData } from './packages'
 import { watchPackageDataPlugin } from './packages'
 
 export interface BuildOptions {
@@ -610,9 +611,11 @@ function prepareOutDir(
   }
 }
 
-function getPkgName(root: string) {
-  const { name } = JSON.parse(lookupFile(root, ['package.json']) || `{}`)
+function getPkgJson(root: string): PackageData['data'] {
+  return JSON.parse(lookupFile(root, ['package.json']) || `{}`)
+}
 
+function getPkgName(name: string) {
   return name?.startsWith('@') ? name.split('/')[1] : name
 }
 
@@ -674,14 +677,24 @@ export function resolveLibFilename(
     return libOptions.fileName(format)
   }
 
-  const name = libOptions.fileName || getPkgName(root)
+  const packageJson = getPkgJson(root)
+  const name = libOptions.fileName || getPkgName(packageJson.name)
 
   if (!name)
     throw new Error(
       'Name in package.json is required if option "build.lib.fileName" is not provided.'
     )
 
-  return `${name}.${format}.js`
+  let extension: string
+  const isEsFormat = format === 'es'
+
+  if (packageJson?.type === 'module') {
+    extension = isEsFormat ? 'js' : 'cjs'
+  } else {
+    extension = isEsFormat ? 'mjs' : 'js'
+  }
+
+  return `${name}.${format}.${extension}`
 }
 
 function resolveBuildOutputs(

packages/vite/src/node/packages.ts

@@ -22,6 +22,8 @@ export interface PackageData {
   getResolvedCache: (key: string, targetWeb: boolean) => string | undefined
   data: {
     [field: string]: any
+    name: string
+    type: string
     version: string
     main: string
     module: string