window is not defined about material-ui-phone-number

[romikette]

I am using nextjs 8.1.0 and it still crashes with:

ReferenceError: window is not defined
at r (D:\work\myProject\ui\node_modules\material-ui-phone-number\dist\index.js:1:83774)
at i (D:\work\myProject\ui\node_modules\material-ui-phone-number\dist\index.js:1:83862)
at n.exports (D:\work\myProject\ui\node_modules\material-ui-phone-number\dist\index.js:1:87435)
at Object. (D:\work\myProject\ui\node_modules\material-ui-phone-number\dist\index.js:1:70404)
at t (D:\work\myProject\ui\node_modules\material-ui-phone-number\dist\index.js:1:1869)
at Module. (D:\work\myProject\ui\node_modules\material-ui-phone-number\dist\index.js:1:92052)
at t (D:\work\myProject\ui\node_modules\material-ui-phone-number\dist\index.js:1:1869)
at D:\work\myProject\ui\node_modules\material-ui-phone-number\dist\index.js:1:2668
at D:\work\myProject\ui\node_modules\material-ui-phone-number\dist\index.js:1:2679
at e (D:\work\myProject\ui\node_modules\material-ui-phone-number\dist\index.js:1:143)
at Object. (D:\work\myProject\ui\node_modules\material-ui-phone-number\dist\index.js:1:1686)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)

I got it working like this:

import dynamic from 'next/dynamic';
const MuiPhoneNumber=dynamic(import ('material-ui-phone-number'),{ssr:false});

[alexnedelcu]

This is because server side rendering has no knowledge of window. I am not sure what causes "window" to show up in the distributed file, as I did not find it in source..

[alexplumb]

Thanks for the heads-up, @alexnedelcu. Can you tell me which version you're using?

[epribula]

Hey, I am facing the same issue with version 1.6.1

[alexplumb]

This should be fixed in v2.0.0 - this was caused by a bug with webpack: webpack/webpack#6525

[alexplumb]

@romikette Are you using webpack to build your project? Can you try wrapping MuiPhoneNumber in <NoSsr>?

https://material-ui.com/components/no-ssr/

[comxd]

Using NextJS, wrapping MuiPhoneNumber in <NoSsr> not working.

[chococrypto]

but now do you know how to use adapt the module on nextjs with typescript ?

I have found a solution for interested people

My component

index.d.ts

declare module 'material-ui-phone-number' {
  import { ComponentType } from 'react'
  import { TextFieldProps } from '@material-ui/core/TextField'
  export type MuiPhoneNumberProps = TextFieldProps & {
    excludeCountries?: string[]
    onlyCountries?: string[]
    preferredCountries?: string[]
    defaultCountry?: string
    inputClass?: string
    dropdownClass?: string
    autoFormat?: boolean
    disableAreaCodes?: boolean
    disableCountryCode?: boolean
    disableDropdown?: boolean
    enableLongNumbers?: boolean
    countryCodeEditable?: boolean
    onChange: (
      e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string,
    ) => void
    regions: [string] | string
    classes: any
  }
  declare const MuiPhoneNumber: ComponentType<MuiPhoneNumberProps>

  export default MuiPhoneNumber
}

PhoneNumber.tsx

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'

import dynamic from 'next/dynamic'
import { MuiPhoneNumberProps } from 'material-ui-phone-number'
const MuiPhoneNumber = dynamic<MuiPhoneNumberProps>(
  import('material-ui-phone-number'),
  { ssr: false },
)

const useStyles = makeStyles(() => ({
  phoneFlag: {
    marginBottom: 0,
  },
}))
type PhoneProps = {
  label: string
  value: string
  onChange: (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string,
  ) => void
}
const PhoneNumber = ({ label, value, onChange }: PhoneProps) => {
  const classes = useStyles()
  return (
    <MuiPhoneNumber
      fullWidth
      id="phone"
      defaultCountry="ch"
      name="phone"
      label={label}
      type="tel"
      variant="outlined"
      regions={['europe']}
      value={value}
      onChange={onChange}
      classes={{
        flagButton: classes.phoneFlag,
      }}
    />
  )
}
export default PhoneNumber

I hope it can help the interested everyone.