CODEWITHSUNDEEP
vuejs3webstormvite
greg-e
greg-e

Reputation: 434

vite server with vuejs fails after opening project with WebStorm

I've installed WebStorm recently. After I loaded my project with it, the npm run dev command which is using vite, doesn't work anymore.

> [email protected] dev
> vite

failed to load config from {Project}\_Client\vite.config.js
error when starting dev server:
{Project}\build.js:1
import { fileURLToPath, URL } from 'url'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at _require.extensions.<computed> [as .js] (file:///{Project}/_Client/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:63099:17)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Module._load (node:internal/modules/cjs/loader:827:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> ({Project}\_Client\vite.config.js:34:20)

If I add "type": "module" to my package.json it will compile, but it will give the following error while runtime:

[ReferenceError] module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 
'{Project}\_Client\package.json' contains "type": "module". 
To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

I am wondering what WebStorm could possibly change in my project / system settings, because it is neither running from Visual Studio and the command line anymore, which worked fine before. It made a npm i right after opening my project, which I've been wondering about, since my packages were already installed.

Did anyone experience something similar and found a solution for this?

Found this already:

https://itsmycode.com/solved-uncaught-syntaxerror-cannot-use-import-statement-outside-a-module/

https://github.com/vitejs/vite/issues/7416

https://github.com/vitejs/vite/pull/3835

I already tried:

EDIT: I changed the file names vite.config.js -> vite.config.mjs and a related build file build.mj -> build.mjs so they are interpreted as modules. And the vite server is running again.

But I have not found a reason why they are not interpreted as modules by default anymore. Where, except the package.json can be settings, that change the interpretation of my js files?

Upvotes: 1

Views: 1312

Answers (1)

greg-e
greg-e

Reputation: 434

I found the issue. There were packages updated. I think the cause of the issue was the npm install after opening the project for the first time.

Upvotes: 2

Related Questions