vite.config.js - Cannot use import statement outside a module

[rinodrummer]

Describe the bug

When I run npm run dev to run Vite, I always get the error:

SyntaxError: Cannot use import statement outside a module when loading vite.config.js.

Reproduction

I just installed Vite following the Installation guide and created an empty project to test it out, but without any improvement.

You can find my repo at rinodrummer/vite-test.

System Info

System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 7.32 GB / 15.85 GB
  Binaries:
    Node: 16.8.0 - ~\.fnm\aliases\default\node.EXE
    npm: 6.10.1 - ~\node_modules\.bin\npm.CMD
  Browsers:
    Chrome: 92.0.4515.159
    Edge: Spartan (44.18362.1533.0)
    Internet Explorer: 11.0.18362.1
  npmPackages:
    @vitejs/plugin-vue: ^1.6.0 => 1.6.0
    vite: ^2.5.2 => 2.5.3

Used Package Manager

npm

Logs

failed to load config from C:\Users\rinodrummer\git\vite-test\vite.config.js
error when starting dev server:
D:\git\vite-test\vite.config.js:1
import { defineConfig } from 'vite'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Object.require.extensions.<computed> [as .js] (D:\git\vite-test\node_modules\vite\dist\node\chunks\dep-1be34a63.js:77164:13)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:94:18)
    at loadConfigFromBundledFile (D:\git\vite-test\node_modules\vite\dist\node\chunks\dep-1be34a63.js:77169:17)

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 https://github.com/vuejs/vue-next 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.

[Shinigami92]

Please try vite.config.ts or vite.config.mjs

[rinodrummer]

Please try vite.config.ts or vite.config.mjs

vite.config.mjs

  vite:config native esm config loaded in 258ms URL {
  href: 'file:///C:/Users/rinodrummer/git/vite-test/vite.config.mjs',
  origin: 'null',
  protocol: 'file:',
  username: '',
  password: '',
  host: '',
  hostname: '',
  port: '',
  pathname: '/C:/Users/rinodrummer/git/vite-test/vite.config.mjs',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
} +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   server: { fs: { strict: undefined, allow: [Array] } },
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: 'C:/Users/rinodrummer/git/vite-test/vite.config.mjs',
  vite:config   configFileDependencies: [],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     server: { fs: [Object] }
  vite:config   },
  vite:config   root: 'C:/Users/rinodrummer/git/vite-test',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   publicDir: 'C:\\Users\\rinodrummer\\git\\vite-test\\public',
  vite:config   cacheDir: 'C:\\Users\\rinodrummer\\git\\vite-test\\node_modules\\.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { esbuildOptions: { keepNames: undefined } }
  vite:config } +14ms
  vite:deps Crawling dependencies using entries:
  vite:deps   C:/Users/rinodrummer/git/vite-test/index.html +0ms
  vite:resolve 1ms   /src/main.js -> C:/Users/rinodrummer/git/vite-test/src/main.js +0ms
  vite:resolve 5ms   vue -> D:/git/vite-test/node_modules/vue/dist/vue.runtime.esm-bundler.js +9ms
  vite:resolve 1ms   ./App.vue -> C:/Users/rinodrummer/git/vite-test/src/App.vue +4ms
  vite:resolve 1ms   ./components/HelloWorld.vue -> C:/Users/rinodrummer/git/vite-test/src/components/HelloWorld.vue +7ms
  vite:deps Scan completed in 102ms: {
  vue: 'D:/git/vite-test/node_modules/vue/dist/vue.runtime.esm-bundler.js'
} +71ms
Pre-bundling dependencies:
  vue
(this will be run only when your dependencies or config have changed)
 > dep:vue:2:14: error: Could not resolve "./D:/git/vite-test/node_modules/vue/dist/vue.runtime.esm-bundler.js"
    2 │ export * from "./D:/git/vite-test/node_modules/vue/dist/vue.runtime.esm-bundler.js"
      ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

error when starting dev server:
Error: Build failed with 1 error:
dep:vue:2:14: error: Could not resolve "./D:/git/vite-test/node_modules/vue/dist/vue.runtime.esm-bundler.js"
    at failureErrorWithLog (D:\git\vite-test\node_modules\esbuild\lib\main.js:1451:15)
    at D:\git\vite-test\node_modules\esbuild\lib\main.js:1131:28
    at runOnEndCallbacks (D:\git\vite-test\node_modules\esbuild\lib\main.js:921:63)
    at buildResponseToResult (D:\git\vite-test\node_modules\esbuild\lib\main.js:1129:7)
    at D:\git\vite-test\node_modules\esbuild\lib\main.js:1238:14
    at D:\git\vite-test\node_modules\esbuild\lib\main.js:609:9
    at handleIncomingPacket (D:\git\vite-test\node_modules\esbuild\lib\main.js:706:9)
    at Socket.readFromStdout (D:\git\vite-test\node_modules\esbuild\lib\main.js:576:7)
    at Socket.emit (node:events:394:28)
    at Socket.emit (node:domain:475:12)

vite.config.mjs

failed to load config from C:\Users\rinodrummer\git\vite-test\vite.config.ts
error when starting dev server:
TypeError: defaultLoader is not a function
    at Object.require.extensions.<computed> [as .ts] (D:\git\vite-test\node_modules\vite\dist\node\chunks\dep-1be34a63.js:77164:13)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:94:18)
    at loadConfigFromBundledFile (D:\git\vite-test\node_modules\vite\dist\node\chunks\dep-1be34a63.js:77169:17)
    at loadConfigFromFile (D:\git\vite-test\node_modules\vite\dist\node\chunks\dep-1be34a63.js:77088:32)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async resolveConfig (D:\git\vite-test\node_modules\vite\dist\node\chunks\dep-1be34a63.js:76656:28)
    at async createServer (D:\git\vite-test\node_modules\vite\dist\node\chunks\dep-1be34a63.js:75179:20)

These are the errors I get when I rename the files like you asked.

[haoqunjiang]

Looks like it's a linked directory from another drive. That's not supported currently.

[haoqunjiang]

Same as #4302 (comment) and #4180