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

Not SSR Friendly #9

Open
kevintruby opened this issue Jul 8, 2019 · 1 comment
Open

Not SSR Friendly #9

kevintruby opened this issue Jul 8, 2019 · 1 comment

Comments

@kevintruby
Copy link

Hi there! Not sure if you're still maintaining this library.

Recently used this to create a dynamic image gallery, and everything was working fine until I reached the point of wiring up vue-server-renderer. When compiling, Node.js outputs the following error:

ReferenceError: window is not defined
    at Object.<anonymous> (/...omitted_for_brevity.../node_modules/vue-l-carousel
/dist/main.js:1:216)

From what I can see in the source code, you're relying on access to the window object directly at the beginning of the script tag for the Carousel component -- haven't checked the CarouselItem component.

It would be great if this library could follow the conventions outlined by Vue SSR documentation for isomorphic/universal code. Looks like the safest place to execute component code that relies on platform-specific variables like window and document would be in the mounted() lifecycle hook.

I don't know if that would be significant to refactor or not; I've only taken a cursory look at the source code so far.

If I can find some spare time, I might try to fork and fix, then submit a PR, but figured it would be worth raising for now. At the very least, wanted this issue noted in case anyone else runs into an issue integrating with SSR as well.

@kevintruby
Copy link
Author

For what it's worth, I found a workaround with the following code in the server code that's responsible for rendering the component partials:

// open-source dependency vue-l-carousel isn't SSR-friendly; temp workaround
const window = require('global/window');
global.window = window;
global.navigator = {
  userAgent: 'node',
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants