question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Import bug with SSR

See original GitHub issue

Do you want to request a feature or report a bug? Bug

What is the current behavior?

**If we use NextJS (Server Side Rendering), we can’t normaly import Places with import Places from 'places.js' . ‘window is not defined’. **

What is the expected behavior? Import normaly with SSR

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
JonathanMontanecommented, May 7, 2019

@Haroenv Hmm, it’s strange, it seems that the issue here is caused by Zepto in autocomplete.js even when just doing an import.

Here is what I get when importing locally:

node
> const places = require('./dist/src/places.js')
ReferenceError: window is not defined
    at Object.<anonymous> (.../places/node_modules/autocomplete.js/zepto.js:5:119)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

@Benoit-Ferrer In the meantime, can you follow the FAQ of Zeit and wrap the require in an if statement? https://github.com/zeit/next.js/wiki/FAQ#i-use-a-library-which-throws-window-is-undefined like so:

...
componentDidMount() {
  if (typeof window !== 'undefined') {
    const Places = require('places');
    const placesAutocomplete = ...
  }
}

0reactions
Haroenvcommented, May 7, 2019

Looks like this is solved for you, feel free to comment with a reproducible example if this still isn’t what you expected 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bug with building SSR for reactjs-website - node.js
I have some react-app and trying to enable server-side rendering. I make the server/index.js and describe the server logic (using express ).
Read more >
Using Non-SSR Friendly Components with Next.js
It allows you to import JavaScript modules dynamically and works collaboratively with SSR as well. You can use the ssr: false object to...
Read more >
Svelte SSR Hydration Bug - StackBlitz
non-sveltekit hydration bug reproduction. ... <script>. const is_ssr = import.meta.env.SSR;. </script>. <div>1</div>. {@html "one"}.
Read more >
Troubleshooting - Astro Documentation
This error can be thrown when trying to import or render an invalid ... This can be useful for debugging differences between the...
Read more >
Has anyone run into issues with a vite SSR import error?
3:10:42 p.m. [vite] Error when evaluating SSR module ... [Bug] - [Help] || Azure Pipelines 'private nuget package cache' not updating ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found