Comments (8)
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});
from material-ui-phone-number.
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..
from material-ui-phone-number.
Thanks for the heads-up, @alexnedelcu. Can you tell me which version you're using?
from material-ui-phone-number.
Hey, I am facing the same issue with version 1.6.1
from material-ui-phone-number.
This should be fixed in v2.0.0 - this was caused by a bug with webpack: webpack/webpack#6525
from material-ui-phone-number.
@romikette Are you using webpack to build your project? Can you try wrapping MuiPhoneNumber in <NoSsr>
?
https://material-ui.com/components/no-ssr/
from material-ui-phone-number.
Using NextJS, wrapping MuiPhoneNumber in <NoSsr>
not working.
from material-ui-phone-number.
but now do you know how to use adapt the module on nextjs
with typescript
?
I have found a solution for interested people
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.
from material-ui-phone-number.
Related Issues (20)
- Add localization support HOT 1
- Masks are missing
- Doesn't work with Firefox HOT 4
- Useless clone of a wonderful component HOT 1
- Dense margin not applied properly
- There is no way to hide the prefix
- Can't disable country selection if input is saved and disabled HOT 1
- Content security Policy "nonce" tag for style element
- Issue on long prefixes, freezes the value
- Doesn't work with Morocco HOT 2
- React 18 support HOT 3
- Country conflict USA & CA HOT 2
- Bundle Size
- Flag with broke style on Firefox HOT 3
- Bug in typescript regions HOT 2
- React 18.2.0 not supported HOT 1
- Static files for nation flags have been unavailable. 404 when requesting
- Changing the input changes the flag as well.
- Phone Number Code for Guam
- Is this package still maintained?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui-phone-number.