isomorphic-webpack icon indicating copy to clipboard operation
isomorphic-webpack copied to clipboard

Use with offline-plugin

Open tyler-dot-earth opened this issue 7 years ago • 6 comments

Is there a working example of isomorphic-webpack + offline-plugin anyone might be able to share? I encounter this error when trying to use offline-plugin in my isomorphic-webpack app:

/home/tyler/Projects/webpack2test/node_modules/offline-plugin/runtime.js:3
if (window.console) {
    ^

ReferenceError: window is not defined
    at Object.<anonymous> (/home/tyler/Projects/webpack2test/node_modules/offline-plugin/runtime.js:3:5)

:arrow_up: In this case, I added the require('offline-plugin/runtime').install() line to my entry file, before the app client itself (index.jsx).

If I try to install the plugin/runtime in index.jsx itself (instead of in the webpack entry just before index.jsx), I end up with an error like this :arrow_down:

TypeError: Cannot read property './index.jsx' of undefined
    at evalBundleCode (/home/tyler/Projects/webpack2test/node_modules/isomorphic-webpack/dist/factories/createIsomorphicWebpack.js:133:37)
    at /home/tyler/Projects/webpack2test/src/server/server.js:141:21
    at Layer.handle [as handle_request] (/home/tyler/Projects/webpack2test/node_modules/router/lib/layer.js:93:5)

I realise this isn't exactly a problem with isomorphic-webpack itself, but I imagine I'll have better luck here than their repo. I'd be happy to provide some code to play with if it would help

(Alternatively: anyone have suggestions for building this offline functionality without this plugin?)

tyler-dot-earth avatar Mar 18 '17 04:03 tyler-dot-earth

I haven't dealt much with server-side rendering (so I don't know how (or if) other SSR approaches have solved this in some other way) but since things like these (window, self, probably localStorage) are coming up a lot, could we make these available globally in node env before executing the client-side code? Like by using jsdom-global? or manually making these types of variables global?

laggingreflex avatar Mar 18 '17 04:03 laggingreflex

Looping @NekR, creator of offline-plugin in on this issue (we tweeted a little).

tyler-dot-earth avatar Mar 24 '17 17:03 tyler-dot-earth

@tsnieman yeah, I already keep it open to take a look. Will do a bit later today :-)

NekR avatar Mar 24 '17 18:03 NekR

@tsnieman okay, so isomorphic-webpack doesn't really support window, self, top, parent, etc. right?

Btw, that window.console check exists only in stub of offline-plugin runtime. If you got stub means that you probably forgot to add the plugin to the list of webpack plugins in its config.

NekR avatar Mar 24 '17 22:03 NekR

I'm getting self is not defined even by just running the demo: https://github.com/gajus/isomorphic-webpack-demo image

Is the demo supposed to work?

NekR avatar Mar 24 '17 22:03 NekR

@NekR Upstream dependency (style-loader) caused that error. Try from the branch I have open in the PR here: https://github.com/gajus/isomorphic-webpack-demo/pull/7

Branch (aka working demo) itself can be found directly @ https://github.com/tsnieman/isomorphic-webpack-demo/tree/fix-style-loader-dep

tyler-dot-earth avatar Mar 25 '17 22:03 tyler-dot-earth