@capacitor/network import results in "ReferenceError: window is not defined"

[samloomes]

Bug Report

Plugin(s)

• @capacitor/network v1.0.5 and v1.0.3

Capacitor Version

Latest Dependencies:

@capacitor/cli: 3.2.5
@capacitor/core: 3.2.5
@capacitor/android: 3.2.5
@capacitor/ios: 3.2.5

Installed Dependencies:

@capacitor/android: not installed
@capacitor/cli: 3.2.5
@capacitor/core: 3.2.5
@capacitor/ios: 3.2.5

Platform(s)

• iOS
• Web

Current Behavior

When I import the Network plugin in the manner described by the documentation - https://capacitorjs.com/docs/apis/network - I receive the error "ReferenceError: window is not defined" when trying to view my project on my dev server or when trying to compile for iOS.

Server Error
Call Stack
new NetworkWeb
/node_modules/@capacitor/network/dist/plugin.cjs.js (67:9)

Expected Behavior

That I can import the Network plugin without this error.

Code Reproduction

https://github.com/samloomes/capacitor-network-import-error

• npm run dev
• Navigate to server in your browser, view the error.
• Comment out line import { Network } from '@capacitor/network'; in src/pages/index.js
• Refresh page in browser, observe that it now works.

Other Technical Details

The project is a pretty straight-up next/js project. When I comment out the Network import everything seems fine as the error seems to be within the NetworkWeb class within the plugin. Maybe I'm just doing something super basic wrong because it seems too big of an error to slip through, but on the other hand after looking around I'm finding no obvious answers and the Plugin version seems very new.

The following is my current package.json.

{
  "name": "Test",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@capacitor/core": "^3.2.5",
    "@capacitor/network": "^1.0.5",
    "next": "^11.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@capacitor/cli": "^3.2.5",
    "@capacitor/ios": "^3.2.5",
    "typescript": "^4.4.3"
  },
  "license": "MIT"
}

[Ionitron]

This issue may need more information before it can be addressed. In particular, it will need a reliable Code Reproduction that demonstrates the issue.

Please see the Contributing Guide for how to create a Code Reproduction.

Thanks!
Ionitron 💙

[samloomes]

I assume it's a similar issue to this: auth0/auth0.js#959

[samloomes]

I'm currently solving this with a conditional require instead of the ES6 import as specified by the docs:

let Network;
if (typeof window !== 'undefined') {
  const NetworkPlugin = require('@capacitor/network');
  Network = NetworkPlugin.Network;
}

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the plugin, please create a new issue and ensure the template is fully filled out.