leo / electron-next-skeleton

An example Electron app built with Next.js
https://leo.im/2017/electron-next
MIT License
177 stars 31 forks source link

`build` script fails when trying to use `getPath('userData')` #3

Closed manovotny closed 6 years ago

manovotny commented 7 years ago

If you change the start.js file in master to the following:

import {app, remote} from 'electron'

const userDataPath = app ? app.getPath('userData') : remote.app.getPath('userData')

export default () => (
  <section>
      <p>{'This is Next.js speaking'}</p>
      <p>{`Your user data path is: ${userDataPath}`}</p>
  </section>
)

When you run npm run build, it will produce the following error.

> electron-next-skeleton@1.0.0 build /Users/manovotny/Developer/electron-next-skeleton
> next build renderer && next export renderer

> Using "webpack" config function defined in next.config.js.
  using build directory: /Users/manovotny/Developer/electron-next-skeleton/renderer/.next
  exporting path: /start
TypeError: Cannot read property 'app' of undefined
    at Object.<anonymous> (/Users/manovotny/Developer/electron-next-skeleton/renderer/.next/dist/pages/start.js:15:88)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at _callee$ (/Users/manovotny/Developer/electron-next-skeleton/node_modules/next/dist/server/require.js:33:46)
    at tryCatch (/Users/manovotny/Developer/electron-next-skeleton/node_modules/next/node_modules/regenerator-runtime/runtime.js:65:40)

I think I am doing the if check for which app to use correctly because the page could be server or client rendered.

To be clear, npm start runs just fine without any errors. It's only when you try and build that it's unhappy.

I would appreciate any help or thoughts of what to try instead.

leo commented 6 years ago

Please check the module imports from electron! Some of them are not existent on server- or client-side. Just check them all to be sure! 😊

manovotny commented 6 years ago

Hey @leo! I know it's been ages since I brought this up, but work and life and such. Finally getting around to some experimental time again with the holidays.

I hate to be dense, but can you elaborate on your answer some more?

I feel like I am "checking them all" as app should be available on the server side (runs on main process) and remote should be available on the client side (runs on renderer process).

I know I am probably missing something dumb, but I'd appreciate the help. I have been beating my head against the wall all day. 😞

leo commented 6 years ago

👋

Don't try to render anything server-side. There's no point in that as – for production – a static bundle will be generated. In addition, don't assume that the server side of the renderer process is equal to the main process, I think they're two separate processes. 😊

Only do that kind of stuff in the "client" part of the renderer process, not on the server. So make sure to check for the existence of document to ensure you're on the client.

manovotny commented 6 years ago

@leo when you're right, you're right. 😉

I've known that electron-next utilizes next export, but that's not how I've been approaching things. I've been trying to treat Electron development more like Next.js development and not static site development. That's a mental connection failure on my part, partly fueled by the fact that running electron . while developing still gives you access and a perception that you can SSR and such, though that's not going to be true when you run next export.

In taking some time to look through now-desktop code in detail tonight, it looks like you don't even use Next's getInitialProps and just wait to do everything (loading of data, etc.) in componentWillMount once you prove your on the "client" side by checking things like window or document or electron.remote, like you mentioned above.

Bottom line is, I think I need to only leverage the page and routing aspects of Next.js, forget the rest of Next.js, and then just use Raect lifecycles for the rest.

Does that sound like a fair summary of how to approach electron-next development?

leo commented 6 years ago

Correct, that's just exactly how I meant it! 😊

manovotny commented 6 years ago

@leo yeah, I’m not saying it was your fault or that you didn’t explain it well. I’m saying I’m dense and finally get it now. 😊 Thanks again!