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

TypeError: Cannot read property 'rootPath' of undefined while using in SailsJS #59

Closed
duffpod opened this issue Mar 21, 2017 · 17 comments
Closed

Comments

@duffpod
Copy link

duffpod commented Mar 21, 2017

Description of Issue

I know, this lib is for Express, but I am trying to make it work in the Sails framework.

Stack Trace / Console Log

TypeError: Cannot read property 'rootPath' of undefined
    at new Defaults (/Users/duffpod/Desktop/vue-sails-test-2/node_modules/express-vue/dist/models/defaults.js:12:41)
    at SailsView.expressVue [as engine] (/Users/duffpod/Desktop/vue-sails-test-2/node_modules/express-vue/dist/index.js:15:20)
    at SailsView.View.render (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/view.js:76:8)
    at Function.app.render (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/application.js:561:10)
    at ServerResponse.res.render (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/response.js:845:7)
    at ServerResponse.res.view (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/lib/hooks/views/res.view.js:284:16)
    at fn (/Users/duffpod/Desktop/vue-sails-test-2/config/routes.js:37:18)
    at routeTargetFnWrapper (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/lib/router/bind.js:181:5)
    at callbacks (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:164:37)
    at param (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:138:11)
    at pass (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:145:5)
    at nextRoute (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:100:7)
    at callbacks (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:167:11)
    at module.exports (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/lib/hooks/cors/clear-headers.js:14:3)
    at routeTargetFnWrapper (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/lib/router/bind.js:181:5)
    at callbacks (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:164:37)
    at param (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:138:11)
    at pass (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:145:5)
    at nextRoute (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:100:7)
    at callbacks (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:167:11)
    at sails.router.bind._middlewareType (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/lib/hooks/csrf/index.js:148:11)
    at routeTargetFnWrapper (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/lib/router/bind.js:181:5)

Additional Comments

Tracked the error to the file at dist/models/defaults.js. Fixed by supplying the empty objects while pre-validating the options variable.

From this:

var Defaults = function Defaults(options) {
    _classCallCheck(this, Defaults);

    this.rootPath = options.settings.vue.rootPath === undefined ? options.settings.views + '/' : options.settings.vue.rootPath + '/';
    this.layoutsDir = options.settings.vue.layoutsDir === undefined ? '' : this.rootPath + options.settings.vue.layoutsDir + '/';
    this.componentsDir = options.settings.vue.componentsDir === undefined ? '' : options.settings.vue.componentsDir + '/';
    this.defaultLayout = options.settings.vue.defaultLayout === undefined ? '' : options.settings.vue.layoutsDir === undefined ? this.rootPath + options.settings.vue.defaultLayout : options.settings.vue.defaultLayout;
    this.options = options.settings.vue.options === undefined ? {} : options.settings.vue.options;
    this.backupLayout = '<template><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><script src="https://unpkg.com/vue/dist/vue.js"></script></head><body>{{{app}}}{{{script}}}</body></html></template><script></script><style></style>';
    this.layoutPath = this.layoutsDir + this.defaultLayout + '.vue';
    this.options = options;
};

To this:

var Defaults = function Defaults(options) {
    _classCallCheck(this, Defaults);

    options.vue = options.vue === undefined ? {} : options.vue
    options.settings.vue = options.settings.vue === undefined ? {} : options.settings.vue;

    this.rootPath = options.settings.vue.rootPath === undefined ? options.settings.views + '/' : options.settings.vue.rootPath + '/';
    this.layoutsDir = options.settings.vue.layoutsDir === undefined ? '' : this.rootPath + options.settings.vue.layoutsDir + '/';
    this.componentsDir = options.settings.vue.componentsDir === undefined ? '' : options.settings.vue.componentsDir + '/';
    this.defaultLayout = options.settings.vue.defaultLayout === undefined ? '' : options.settings.vue.layoutsDir === undefined ? this.rootPath + options.settings.vue.defaultLayout : options.settings.vue.defaultLayout;
    this.options = options.settings.vue.options === undefined ? {} : options.settings.vue.options;
    this.backupLayout = '<template><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><script src="https://unpkg.com/vue/dist/vue.js"></script></head><body>{{{app}}}{{{script}}}</body></html></template><script></script><style></style>';
    this.layoutPath = this.layoutsDir + this.defaultLayout + '.vue';
    this.options = options;
};
@duffpod duffpod mentioned this issue Mar 21, 2017
danielcherubini added a commit that referenced this issue Mar 21, 2017
@danielcherubini
Copy link
Collaborator

Can you test 3.9.7

thanks

@duffpod
Copy link
Author

duffpod commented Mar 22, 2017

@danmademe well, it is still there. To be clear, I don't set any of the config variable at all.

TypeError: Cannot read property 'rootPath' of undefined
    at new Defaults (/Users/duffpod/Desktop/vue-sails-test-2/node_modules/express-vue/dist/models/defaults.js:14:41)
    at SailsView.expressVue [as engine] (/Users/duffpod/Desktop/vue-sails-test-2/node_modules/express-vue/dist/index.js:15:20)
    at SailsView.View.render (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/view.js:76:8)
    at Function.app.render (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/application.js:561:10)
    at ServerResponse.res.render (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/response.js:845:7)
    at ServerResponse.res.view (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/lib/hooks/views/res.view.js:284:16)
    at serveView (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/lib/hooks/views/onRoute.js:61:20)
    at routeTargetFnWrapper (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/lib/router/bind.js:181:5)
    at callbacks (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:164:37)
    at param (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:138:11)
    at pass (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:145:5)
    at nextRoute (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:100:7)
    at callbacks (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:167:11)
    at module.exports (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/lib/hooks/cors/clear-headers.js:14:3)
    at routeTargetFnWrapper (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/lib/router/bind.js:181:5)
    at callbacks (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:164:37)
    at param (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:138:11)
    at pass (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:145:5)
    at nextRoute (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:100:7)
    at callbacks (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/node_modules/@sailshq/express/lib/router/index.js:167:11)
    at sails.router.bind._middlewareType (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/lib/hooks/csrf/index.js:148:11)
    at routeTargetFnWrapper (/Users/duffpod/.nvm/versions/node/v7.7.2/lib/node_modules/sails/lib/router/bind.js:181:5)

@danielcherubini
Copy link
Collaborator

It's going to be there because you need to set something to tell express where to look for views. That's what rootdir is.

I'll have to debug this myself. There must be somewhere to get a path, or set the path.

@duffpod
Copy link
Author

duffpod commented Mar 22, 2017

I see, that while using express-vue with Sails.js, the options' settings object will contain the views variable. Maybe this will help?

2017-03-22 19 44 35

@danielcherubini
Copy link
Collaborator

Looks like the views string.

@duffpod
Copy link
Author

duffpod commented May 1, 2017

Hey @danmademe! Anything moved here?

@snewell92
Copy link

I think sailsJS supports passing data to the view engine. In the views.js file, the locals object passes things to it. And you can probably configure the getRenderFn in a way such that it passes extra configuration. I'm digging a little bit... If, at the render call site, we can tell express-vue / expree where views are.

@snewell92
Copy link

Also, does d9cef58 fix this issue? Because I'm on express-vue 3.10.0 but I still got the error, but it appears that commit is included in 3.10.0.

@danielcherubini
Copy link
Collaborator

Looks like that commit didn't fix the issue.

This locals object.. I'm going to have to look into that and add it to the model.

@danielcherubini
Copy link
Collaborator

I don't have time to look at this over the weekend.

@snewell92
Copy link

No worries - I'll share what I figure out about the render function and locals object when I get to something conclusive. I'm not 100% sure how they interop... but I'm currently trying to use Vue's Server-side rendering so I'm having to learn more about the getRenderFn.

@duffpod
Copy link
Author

duffpod commented May 11, 2017

Guys, consolidate.js is abandoned and will be deprecated in the Sails.js 1.0.0 (commit).

@snewell92 you can see how to use express-vue in Sails.js without consolidate.js here.

Back to the issue. The problem is that options.settings.vue is undefined in Sails.js an it will stay so. I've tried accessing the settings object from every config file I could find with no luck. You can use locals object from config/views.js, but it won't be placed in the settings, it will be unwrapped and placed in the options. Also, in Sails.js you don't have access to express's app object, so you can't just do app.set('vue', { componentsDir: __dirname + '/components', ... });.

@duffpod
Copy link
Author

duffpod commented May 11, 2017

I have solved the issue.

Here are the steps:

  1. Setup like this
  2. After all, go to the config/http.js in your project
  3. There will be the middleware object. You need to add the customMiddleware function AFTER it, so everything looks like this:
module.exports.http = {
  middleware: {

  },
  customMiddleware: function(app) {
    app.set('vue', {
      // configure express-vue here
      // do not use __dirname here, otherwise the path will look like: 
      // /Users/username/your-project/config/components
      // componentsDir: app.settings.views + '/components',
    });
  }
};

Now, inside this function you can configure any custom middleware like you do for Express. That's it, problem solved. We can close the issue now.

@danielcherubini
Copy link
Collaborator

thanks heaps @duffpod !!!! i'll add this to the readme..

so you're saying componentsDir should be set to app.settings.views + '/components' ???d

@duffpod
Copy link
Author

duffpod commented May 12, 2017

@danmademe, app.settings.views should be used while configuring express-vue in Sails.js. I don't know about pure Express.js usage.

Also, I think you should consider adding the section about using your project in Sails.js as someone else is definitely will be asking about it. If you choose to add such section you can use my gist as a base point for yours: https://gist.github.com/duffpod/746a660bcddfd986878c92dde1a04f06.

@danielcherubini
Copy link
Collaborator

@duffpod i've added your gist into the readme.. i'll look into the app.settings.views.. but ultimately this project is an integration between express .. and vue.. sailsjs seems to be a whole other beast. but I'll look into support for it, due to lots of people wanting to use it.

@duffpod
Copy link
Author

duffpod commented May 15, 2017

@danmademe, sure I understand that your library is intended for Express.js, but Sails.js is fully based on Express.js and their team states that Sails.js has nearly full compatibility with Express's middleware.

Anyway, thank you for your hard work with this library.

onebesky pushed a commit to onebesky/express-vue that referenced this issue Oct 5, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants