Failed to load vite.config.js during build - Cannot use import statement outside a module #12923

lorand-horvath · 2023-04-20T09:19:20Z

Describe the bug

I'm trying to npm run build with the latest Vite 4.3 having a package.json without "type": "module" specified in it and I get the following error:

failed to load config from .../vite.config.js
error during build:
import { defineConfig } from 'vite'
^^^^^^

SyntaxError: Cannot use import statement outside a module

I'm using the default vite.config.js created via npm create vue@latest and the import/export statements in it should be pre-processed according to the documentation https://vitejs.dev/config/ but it seems to be failing.
Note Vite supports using ES modules syntax in the config file even if the project is not using native Node ESM, e.g. type: "module" in package.json. In this case, the config file is auto pre-processed before load.

Reverting to vite@4.2.2 fixes the issue.

Reproduction

https://vitejs.dev/config/

Steps to reproduce

npm create vue@latest
npm install
npm run build

System Info

node 16.20
npm 8.19.4
vite 4.3

Used Package Manager

npm

Logs

No response

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.

The text was updated successfully, but these errors were encountered:

github-actions · 2023-04-20T11:11:05Z

Hello @lorand-horvath. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

nickturrietta · 2023-04-20T23:39:14Z

I ran into this same error today as well.

Did more Github searching and stumbled on this #4833 (comment)

So, in my particular case, this is related to the fact that I was executing npm run build on a mapped drive in Windows.

My quick fix was to navigate to the target directory and run npm run build there, instead of the mapped drive.

This is obviously less than ideal however, and this should still be considered a regression.

daschwls · 2023-04-21T01:53:22Z

It happend to me too.

I thought it was related to my latest upgrade of nodejs to v20.0.0, but it still occurred when I reverted back to v18.16.0.

What I did after the node update, I deleted my node_modules folder and ran "node update" to reinstall the packages.

I found that I was originally on vite v4.2.2 and it updated to v4.3.1 since my package.json was looking for "vite": "^4.0.0".

I took vite back to v4.3.0 and still had the issue. So I went back to v4.2.2 since I did not want to walk thru all the 4.3 beta
versions. And I also went back to v20.0.0 of node.

All are working so far.

Environment:

Laravel Version - v10.8.0
Laravel Vite plugin v0.7.4
PHP Version - v8.2.0
Composer Version - v2.5.5
OS - Windows 11 Home, Version 22H2
npm - v9.6.5
node - v20.0.0
vite - v4.3.1 (now v4.2.2)

lorand-horvath · 2023-04-21T04:08:19Z

@nickturrietta In my case it was not a mapped drive in question. I have local, regular drives in my Windows machine.

However, I've found a simple solution: renamed vite.config.js to vite.config.mjs and npm run build now runs just fine - tested on both vite 4.3.0 and 4.3.1. Using the mjs config file also works with 4.2.2.

xsjcTony · 2023-04-21T05:48:27Z

Run into the same issue. Even the file path is case-sensitive now.
E.g. if my real workspace is c:\Dev\xxx,
then c:\dev\xxx won't work, although it's allowed in windows

xsjcTony · 2023-04-21T06:08:05Z

The same path case-sensitive thing actually happens to Vitest as well on windows, after 0.28.5

andreadito · 2023-04-21T09:27:52Z

worked switching back to 4.2.2

It happend to me too.

I thought it was related to my latest upgrade of nodejs to v20.0.0, but it still occurred when I reverted back to v18.16.0.

What I did after the node update, I deleted my node_modules folder and ran "node update" to reinstall the packages.

I found that I was originally on vite v4.2.2 and it updated to v4.3.1 since my package.json was looking for "vite": "^4.0.0".

I took vite back to v4.3.0 and still had the issue. So I went back to v4.2.2 since I did not want to walk thru all the 4.3 beta versions. And I also went back to v20.0.0 of node.

All are working so far.

Environment:

Laravel Version - v10.8.0 Laravel Vite plugin v0.7.4 PHP Version - v8.2.0 Composer Version - v2.5.5 OS - Windows 11 Home, Version 22H2 npm - v9.6.5 node - v20.0.0 vite - v4.3.1 (now v4.2.2)

lorand-horvath · 2023-04-21T11:21:49Z

Just rename to vite.config.mjs #12923 (comment) and everything works perfectly fine with latest vite 4.3.1.

daniser · 2023-04-21T12:17:56Z

Just rename to vite.config.mjs #12923 (comment) and everything works perfectly fine with latest vite 4.3.1.

Doesn't help in my case, just throws another error:

failed to load config from c:\...\vite.config.mjs
error during build:
TypeError: laravel is not a function

lorand-horvath · 2023-04-21T15:08:53Z

Just rename to vite.config.mjs #12923 (comment) and everything works perfectly fine with latest vite 4.3.1.

Doesn't help in my case, just throws another error:
failed to load config from c:\...\vite.config.mjs
error during build:
TypeError: laravel is not a function

It depends what version of Laravel and/or laravel-vite-plugin you have. According to the laravel-vite-plugin documentation for laravel 10 https://laravel.com/docs/10.x/vite#configuring-vite in vite.config.(m)js you should have something like:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

which I assume it expects for laravel to have an ES module with export default function laravel(...) {...}
See https://github.com/laravel/vite-plugin/blob/main/src/index.ts
The question is what version of https://www.npmjs.com/package/laravel-vite-plugin you use. The latest 0.7.4 looks fine to me and it should work if imported as ESM.

daschwls · 2023-04-21T18:13:48Z

Just rename to vite.config.mjs #12923 (comment) and everything works perfectly fine with latest vite 4.3.1.

Doesn't help in my case, just throws another error:
failed to load config from c:\...\vite.config.mjs
error during build:
TypeError: laravel is not a function
It depends what version of Laravel and/or laravel-vite-plugin you have. According to the laravel-vite-plugin documentation for laravel 10 https://laravel.com/docs/10.x/vite#configuring-vite in vite.config.(m)js you should have something like:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});
which I assume it expects for laravel to have an ES module with export default function laravel(...) {...} See https://github.com/laravel/vite-plugin/blob/main/src/index.ts The question is what version of https://www.npmjs.com/package/laravel-vite-plugin you use. The latest 0.7.4 looks fine to me and it should work if imported as ESM.

The renaming option did not work for me either. It fails in my current fixed vite v4.2.2., downgraded from 4.3.1 that I had issues with.

I received the error below after renaming vite.config.js to vite.config.mjs:

failed to load config from c:\xampp\htdocs\app\vite.config.mjs
error when starting dev server:
TypeError: laravel is not a function
at file:///c:/xampp/htdocs/app/vite.config.mjs.timestamp-1682098889888.mjs:6:5
at ModuleJob.run (node:internal/modules/esm/module_job:192:25)

All of my paths case-sensitivity match, so that is not an issue for me.

I also do not have any drives/folders mapped or linked.

My environment and vite.config.js are below and I am still on vite v4.2.2..

Laravel Version - v10.8.0
Laravel Vite plugin v0.7.4
PHP Version - v8.2.0
Composer Version - v2.5.5
OS - Windows 11 Home, Version 22H2
npm - v9.6.5
node - v20.0.0
vite - v4.3.1 (now v4.2.2)

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

Maybe this will help....

pilutiful · 2023-04-23T16:40:32Z

I encountered this problem as well. Only solution that worked was to downgrade vite to 4.2.2.

Laravel 10 with Inertia/VueJS on a windows machine, only local drives. It was working fine earlier today, it had stopped working on a later dev session today for some reason.

TomGreen1943 · 2023-04-24T04:32:54Z

Same problem.

Downgrading to vite 4.2.2 worked, and renaming vite.config.js to vite.config.mjs both worked.
Setting "type": "module" in my package.json didn't unless I put it in the wrong place or did something else wrong.

xsjcTony · 2023-04-24T04:56:41Z

@sapphi-red I'm not sure about ppls here using laravel, but for me, on windows using PowerShell, if the file path does NOT match in terms of lower or upper case, then it leads to the issue we are discussing here, but unfortunately, I cannot reproduce it in StackBlitz since it's not windows so it doesn't allow same path but with different case:

But here's what it looks like in my local:

daniser · 2023-04-24T07:46:49Z

@xsjcTony Can confirm. Windows, cmd.

Notice the only difference is disk letter casing.

sapphi-red · 2023-04-24T08:39:27Z

@xsjcTony @daniser I tried to reproduce on Windows but failed. Would you write down a more detailed steps with a sample reproduction including the Vite config?

xsjcTony · 2023-04-24T10:43:21Z

@sapphi-red I can't reproduce on another device either which is weird. The only difference is Node version (16 vs 18), But for this one vitest-dev/vitest#2962 (comment), I can reproduce it on all my devices. Not sure if they are possibly related or not

lorand-horvath · 2023-04-24T17:03:07Z

@sapphi-red Reproduction steps:

npm create vue@latest (this will create a package.json without "type": "module", i.e. a CommonJS package and also a vite.config.js file)
npm install
npm run build
I always get the error that I described in the OP, unless I rename the config file to vite.config.mjs.

I did not have this issue with Vite 4.2.2, so npm run build was working with the default vite.config.js.
Note: I'm using Node 16.20.0 on Windows. Nothing fancy.

fwouts · 2023-04-25T00:43:24Z

I'm also seeing this issue with https://github.com/fwouts/previewjs although it's not happening in CI.

I wonder if it's to do with the file system being configured to be case sensitive or not?

I tried a few different Vite versions, here are the results:

4.3.1 = broken
4.3.0 = broken
4.3.0-beta.4 = broken
4.3.0-beta.2 = broken
4.3.0-beta.1 = broken
4.3.0-beta.0 = working
4.2.1 = working

Given this, I assume the culprit is in v4.3.0-beta.0...v4.3.0-beta.1. Perhaps #12580?

Edit: I tried reverting #12580 locally on top of 4.3.1 and I don't think it resolves it.

fwouts · 2023-04-25T01:38:02Z

Here is the full error stack I'm seeing:

failed to load config from c:\Users\fwouts\dev\hungry\vite.config.ts
500 in endpoint /previews/start:
c:\Users\fwouts\dev\hungry\vite.config.ts:1
import { defineConfig } from "vite";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at _require.extensions.<computed> [as .js] (file:///C:/Users/fwouts/.vscode/extensions/zenclabs.previewjs-1.22.0/dist/node_modules/.pnpm/vite@4.3.1/node_modules/vite/dist/node/chunks/dep-24daf00c.js:64459:17)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at loadConfigFromBundledFile (file:///C:/Users/fwouts/.vscode/extensions/zenclabs.previewjs-1.22.0/dist/node_modules/.pnpm/vite@4.3.1/node_modules/vite/dist/node/chunks/dep-24daf00c.js:64464:21)

This is with a package.json that doesn't have "type": "module", and I have checked that isESM is false here. The config file is correctly transpiled to CJS here but the following line fails, perhaps because of the equality check here? I'll try to debug this a bit further later today.

Update: confirmed, both sides of the equality check have a different casing:

"c:\Users\fwouts\dev\hungry\vite.config.ts" vs "C:\Users\fwouts\dev\hungry\vite.config.ts"

lorand-horvath · 2023-04-25T06:54:09Z

Update: confirmed, both sides of the equality check have a different casing:
"c:\Users\fwouts\dev\hungry\vite.config.ts" vs "C:\Users\fwouts\dev\hungry\vite.config.ts"

@fwouts Great find! I think renaming vite.config.js to vite.config.mjs solves the issue (in my case) because loading an mjs file takes a different resolve path in vite, bypassing the code that generates the bug #12553 (comment)

cc: @patak-dev @bluwy Please take a look at this, now that the bug has been found.

lorand-horvath · 2023-04-25T15:41:59Z

Issue persists with latest Vite 4.3.2.

This fixes vitejs#12923.

sapphi-red · 2023-04-26T05:23:59Z

I reproduced by using CMD. It seems powershell normalizes c:\ into C:\ and thus it doesn't happen.

xsjcTony · 2023-04-26T05:27:02Z

@sapphi-red Are you able to reproduce my case? I'm using Terminal App (powershell under the hood), whenever there'a case difference in any part of the path, it will fail. It has nothing to do with the volume symbol.

I don't have "type": "module" in package.json by the way

sapphi-red · 2023-04-30T11:47:45Z

@xsjcTony No, your case didn't reproduce on my computer.

xsjcTony · 2023-05-01T03:18:38Z

@xsjcTony No, your case didn't reproduce on my computer.

Thanks for testing @sapphi-red but never mind since it has been resolved in the latest release.

CatLeeran · 2023-05-12T09:07:36Z

4.2.2
The configuration file requires the use of .mjs or .mts to enable ESM
Of course, you can also set type = 'module' in package. json

lorand-horvath · 2023-05-12T09:17:07Z

4.2.2
The configuration file requires the use of .mjs or .mts to enable ESM
Of course, you can also set type = 'module' in package. json

@CatLeeran No need for that, since the bug has been fixed in Vite 4.3.3 via #13005
https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#433-2023-04-26

CatLeeran · 2023-05-12T13:51:07Z

look this

lorand-horvath added the pending triage label Apr 20, 2023

sapphi-red added needs reproduction cannot reproduce The bug cannot be reproduced labels Apr 20, 2023

github-actions bot removed the pending triage label Apr 20, 2023

bluwy added the regression The issue only appears after a new release label Apr 24, 2023

fwouts mentioned this issue Apr 25, 2023

perf: use fsp in more cases #12553

Merged

4 tasks

fwouts added a commit to fwouts/vite that referenced this issue Apr 25, 2023

fix: address file path mismatch when loading Vite config file on Windows

65d985f

This fixes vitejs#12923.

fwouts mentioned this issue Apr 25, 2023

fix: address file path mismatch when loading Vite config file on Windows (fix #12923) #13005

Merged

9 tasks

patak-dev closed this as completed in 84c4118 Apr 26, 2023

xsjcTony mentioned this issue Apr 27, 2023

No test suite found on windows for v0.28.5+ vitest-dev/vitest#2962

Closed

6 tasks

sync-by-unito bot mentioned this issue May 9, 2023

chore(deps-dev): Bump vite from 4.2.0 to 4.3.5 in /front-end CodingFactory-Repos/Coding-Tools#255

Closed

sarvex mentioned this issue May 12, 2023

Issue with Qwik, Vite and Vercel deployment ascorbic/unpic-img#69

Closed

github-actions bot locked and limited conversation to collaborators May 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Failed to load vite.config.js during build - Cannot use import statement outside a module #12923

Failed to load vite.config.js during build - Cannot use import statement outside a module #12923

lorand-horvath commented Apr 20, 2023 •

edited

Loading

github-actions bot commented Apr 20, 2023

nickturrietta commented Apr 20, 2023

daschwls commented Apr 21, 2023

lorand-horvath commented Apr 21, 2023 •

edited

Loading

xsjcTony commented Apr 21, 2023

xsjcTony commented Apr 21, 2023 •

edited

Loading

andreadito commented Apr 21, 2023 •

edited

Loading

lorand-horvath commented Apr 21, 2023 •

edited

Loading

daniser commented Apr 21, 2023

lorand-horvath commented Apr 21, 2023 •

edited

Loading

daschwls commented Apr 21, 2023

pilutiful commented Apr 23, 2023

TomGreen1943 commented Apr 24, 2023

xsjcTony commented Apr 24, 2023 •

edited

Loading

daniser commented Apr 24, 2023

sapphi-red commented Apr 24, 2023 •

edited

Loading

xsjcTony commented Apr 24, 2023 •

edited

Loading

lorand-horvath commented Apr 24, 2023

fwouts commented Apr 25, 2023 •

edited

Loading

fwouts commented Apr 25, 2023 •

edited

Loading

lorand-horvath commented Apr 25, 2023

lorand-horvath commented Apr 25, 2023

sapphi-red commented Apr 26, 2023

xsjcTony commented Apr 26, 2023

sapphi-red commented Apr 30, 2023

xsjcTony commented May 1, 2023

CatLeeran commented May 12, 2023

lorand-horvath commented May 12, 2023

CatLeeran commented May 12, 2023

Failed to load vite.config.js during build - Cannot use import statement outside a module #12923

Failed to load vite.config.js during build - Cannot use import statement outside a module #12923

Comments

lorand-horvath commented Apr 20, 2023 • edited Loading

Describe the bug

Reproduction

Steps to reproduce

System Info

Used Package Manager

Logs

Validations

github-actions bot commented Apr 20, 2023

nickturrietta commented Apr 20, 2023

daschwls commented Apr 21, 2023

lorand-horvath commented Apr 21, 2023 • edited Loading

xsjcTony commented Apr 21, 2023

xsjcTony commented Apr 21, 2023 • edited Loading

andreadito commented Apr 21, 2023 • edited Loading

lorand-horvath commented Apr 21, 2023 • edited Loading

daniser commented Apr 21, 2023

lorand-horvath commented Apr 21, 2023 • edited Loading

daschwls commented Apr 21, 2023

pilutiful commented Apr 23, 2023

TomGreen1943 commented Apr 24, 2023

xsjcTony commented Apr 24, 2023 • edited Loading

daniser commented Apr 24, 2023

sapphi-red commented Apr 24, 2023 • edited Loading

xsjcTony commented Apr 24, 2023 • edited Loading

lorand-horvath commented Apr 24, 2023

fwouts commented Apr 25, 2023 • edited Loading

fwouts commented Apr 25, 2023 • edited Loading

lorand-horvath commented Apr 25, 2023

lorand-horvath commented Apr 25, 2023

sapphi-red commented Apr 26, 2023

xsjcTony commented Apr 26, 2023

sapphi-red commented Apr 30, 2023

xsjcTony commented May 1, 2023

CatLeeran commented May 12, 2023

lorand-horvath commented May 12, 2023

CatLeeran commented May 12, 2023

lorand-horvath commented Apr 20, 2023 •

edited

Loading

lorand-horvath commented Apr 21, 2023 •

edited

Loading

xsjcTony commented Apr 21, 2023 •

edited

Loading

andreadito commented Apr 21, 2023 •

edited

Loading

lorand-horvath commented Apr 21, 2023 •

edited

Loading

lorand-horvath commented Apr 21, 2023 •

edited

Loading

xsjcTony commented Apr 24, 2023 •

edited

Loading

sapphi-red commented Apr 24, 2023 •

edited

Loading

xsjcTony commented Apr 24, 2023 •

edited

Loading

fwouts commented Apr 25, 2023 •

edited

Loading

fwouts commented Apr 25, 2023 •

edited

Loading