Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues after bad installation #216

Open
stepanho opened this issue Feb 8, 2019 · 1 comment
Open

Issues after bad installation #216

stepanho opened this issue Feb 8, 2019 · 1 comment

Comments

@stepanho
Copy link

@stepanho stepanho commented Feb 8, 2019

Description of Issue

Hello,

I'm want to use Vue.js frontend within node express application to render vue apps instead of ejs files.
As I understand, express-vue is the simplest to implement it inside existed backend app (if i'm wrong, please correct me).

So I faced with issues after installation that package.
I executed that command in terminal:

npm install --save express-vue
npm i -D babel-core babel-preset-env 

After that, insert middleware:

const expressVue = require("express-vue");
app.use(expressVue.init());

I doesn't add any Vue files yet, but when I launch the app, I recieve a lot of errors in console (below).


Error Precaching 
Precached -> C:\Users\3s_ro_000\WebstormProjects\oracle-api\node_modules\vueify\test\fixtures\scoped-css.vue
filePath -> C:\Users\3s_ro_000\WebstormProjects\oracle-api\node_modules\vueify\test\fixtures\postcss.vue
-------
CssSyntaxError: <css input>:2:10: Missed semicolon

  1 | h1
> 2 |   color: red
    |          ^
  3 |   font-size: 14px

(node:27292) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'replace' of undefined
    at C:\Users\3s_ro_000\WebstormProjects\oracle-api\node_modules\vue-pronto\lib\renderer\renderer.js:362:36
(node:27292) 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: 2)
(node:27292) [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.
Precached -> C:\Users\3s_ro_000\WebstormProjects\oracle-api\node_modules\vueify\test\fixtures\media-query.vue
Error Precaching 
filePath -> C:\Users\3s_ro_000\WebstormProjects\oracle-api\node_modules\vueify\test\fixtures\pre-processors.vue
-------
Error: You are trying to use "jade". jade is missing.

To install run:
npm install --save-dev jade
You are trying to use "babel". babel-preset-es2015 and babel-plugin-transform-runtime are missing.

To install run:
npm install --save-dev babel-preset-es2015 babel-plugin-transform-runtime

^^^ You are seeing this because you are using Vueify's default babel configuration. You can override this with .babelrc or the babel option in vue.config.js.
(node:27292) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'replace' of undefined
    at C:\Users\3s_ro_000\WebstormProjects\oracle-api\node_modules\vue-pronto\lib\renderer\renderer.js:362:36
(node:27292) 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: 8)
Precached -> C:\Users\3s_ro_000\WebstormProjects\oracle-api\node_modules\vueify\test\fixtures\style-import.vue
Error Precaching 
filePath -> C:\Users\3s_ro_000\WebstormProjects\oracle-api\node_modules\vueify\test\fixtures\basic.vue
-------
ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to "C:\\Users\\3s_ro_000\\WebstormProjects\\oracle-api\\node_modules\\vueify\\test\\fixtures"
(node:27292) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'replace' of undefined
    at C:\Users\3s_ro_000\WebstormProjects\oracle-api\node_modules\vue-pronto\lib\renderer\renderer.js:362:36
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:27292) 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: 10)
Error Precaching 
filePath -> C:\Users\3s_ro_000\WebstormProjects\oracle-api\node_modules\vueify\test\fixtures\pug.vue
-------
Error: You are trying to use "pug". pug is missing.

To install run:
npm install --save-dev pug
(node:27292) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'replace' of undefined
    at C:\Users\3s_ro_000\WebstormProjects\oracle-api\node_modules\vue-pronto\lib\renderer\renderer.js:362:36
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:27292) 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: 12)
You are trying to use "babel". babel-preset-es2015 and babel-plugin-transform-runtime are missing.

To install run:
npm install --save-dev babel-preset-es2015 babel-plugin-transform-runtime

^^^ You are seeing this because you are using Vueify's default babel configuration. You can override this with .babelrc or the babel option in vue.config.js.
Error Precaching 
filePath -> C:\Users\3s_ro_000\WebstormProjects\oracle-api\node_modules\vueify\test\fixtures\script-import.vue
-------
ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to "C:\\Users\\3s_ro_000\\WebstormProjects\\oracle-api\\node_modules\\vueify\\test\\fixtures"
(node:27292) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'replace' of undefined
    at C:\Users\3s_ro_000\WebstormProjects\oracle-api\node_modules\vue-pronto\lib\renderer\renderer.js:362:36
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:27292) 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: 14)
Error Precaching 
filePath -> C:\Users\3s_ro_000\WebstormProjects\oracle-api\node_modules\vueify\test\fixtures\template-import.vue
-------
Error: You are trying to use "jade". jade is missing.

To install run:
npm install --save-dev jade
Precached -> C:\Users\3s_ro_000\WebstormProjects\oracle-api\node_modules\vueify\test\fixtures\style-export.vue

Additional Comments

Node version: 10.13.0
NPM version: 6.4.1
IDE: Jetbrains WebStorm 2018.3
OS: Windows 10 x64

P. S. I'm a newbie for using Vue and just trying to use that frontend framework for my small app, which now working as API. So I'm happy for all your advices and ready for discussion.

@tomatofrommars
Copy link

@tomatofrommars tomatofrommars commented Feb 25, 2019

You need set the rootPath of your vue file.
Something like this:

const vueOptions = {
    rootPath: path.join(__dirname, '../example/views')
}
const expressVueMiddleware = expressVue.init(vueOptions);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.