npx example not working : module not found
First : Congratulations on thinking about it, coding it and sharing it ! :tada:
I have tried to run npx vite
with the example. The server starts, but does not display the page. The devtool shows a 404 on localhost:3000/__modules/vue
. Please find the stack trace below.
My config :
Debian GNU/Linux 10 (buster)
❯ node --version
v12.14.1
❯ npm --version
6.14.4
❯ npx vite
npx : 70 installé(s) en 5.322s
Running at http://localhost:3000
Error: Cannot find module 'vue/package.json'
Require stack:
- /home/fkerisit/tmp/vite-test/noop.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
at resolveFileName (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/resolve-from/index.js:29:39)
at resolveFrom (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/resolve-from/index.js:43:9)
at Object.module.exports [as default] (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/resolve-from/index.js:46:47)
at Object.resolveModule (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/dist/server/moduleResolver.js:25:44)
at Server.<anonymous> (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/dist/server/server.js:25:37)
at Server.emit (events.js:223:5)
at parserOnIncoming (_http_server.js:748:12)
at HTTPParser.parserOnHeadersComplete (_http_common.js:115:17) {
code: 'MODULE_NOT_FOUND',
requireStack: [ '/home/fkerisit/tmp/vite-test/noop.js' ]
}
(node:7688) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token, expected "," (4:0)
at Parser._raise (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:742:17)
at Parser.raiseWithData (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:735:17)
at Parser.raise (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:729:17)
at Parser.unexpected (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:8757:16)
at Parser.expect (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:8743:28)
at Parser.parseObj (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:10365:14)
at Parser.parseExprAtom (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9995:28)
at Parser.parseExprSubscripts (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9602:23)
at Parser.parseMaybeUnary (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9582:21)
at Parser.parseExprOps (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9452:23)
at Parser.parseMaybeConditional (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9425:23)
at Parser.parseMaybeAssign (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9380:21)
at Parser.parseExportDefaultExpression (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:12283:24)
at Parser.parseExport (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:12185:31)
at Parser.parseStatementContent (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:11185:27)
at Parser.parseStatement (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:11081:17)
(node:7688) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:7688) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
hmm I realized it probably works for me because I have vue
installed in the resolve tree in my local test directory. For users you need to install vue@next
in the directory.
Thank you for your answer, @yyx990803 ! Installing vue@next
has solved the missing module issue, but there appears to be a syntax error remaining :
❯ npm init
...
❯ npm install vue@next
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN vite-test@1.0.0 No description
npm WARN vite-test@1.0.0 No repository field.
+ vue@3.0.0-beta.3
added 15 packages from 43 contributors and audited 20 packages in 3.004s
found 0 vulnerabilities
❯ npx vite
npx : 70 installé(s) en 18.083s
Running at http://localhost:3000
(node:9420) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token, expected "," (4:0)
at Parser._raise (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:742:17)
at Parser.raiseWithData (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:735:17)
at Parser.raise (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:729:17)
at Parser.unexpected (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:8757:16)
at Parser.expect (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:8743:28)
at Parser.parseObj (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:10365:14)
at Parser.parseExprAtom (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9995:28)
at Parser.parseExprSubscripts (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9602:23)
at Parser.parseMaybeUnary (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9582:21)
at Parser.parseExprOps (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9452:23)
at Parser.parseMaybeConditional (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9425:23)
at Parser.parseMaybeAssign (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9380:21)
at Parser.parseExportDefaultExpression (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:12283:24)
at Parser.parseExport (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:12185:31)
at Parser.parseStatementContent (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:11185:27)
at Parser.parseStatement (/home/fkerisit/.npm/_npx/9420/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:11081:17)
(node:9420) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:9420) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
@FanchGadjo Try removing all extra commas or semicolon. You should be end up with something like this.
<template>
<button @click="count++">{{ count }}</button>
</template>
<script>
export default {
data: () => ({ count: 0 })
}
</script>
<style scoped>
button {
color: red;
}
</style>
I have prettier installed and it adds a semicolon to the braces and that was breaking vite.