TypeError: Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined. #16162
-
|
I have the following code in my import NextDocument, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
import fs from 'fs'
import path from 'path'
// class InlineStylesHead extends Head {
// getCssLinks() {
// return this.__getInlineStyles()
// }
// __getInlineStyles() {
// console.log(this.context._documentProps)
// const { assetPrefix, files } = this.context._documentProps
// if (!files || files.length === 0) return null
// return files
// .filter((file) => /\.css$/.test(file))
// .map((file) => (
// <style
// key={file}
// nonce={this.props.nonce}
// data-href={`${assetPrefix}/_next/${file}`}
// dangerouslySetInnerHTML={{
// __html: fs.readFileSync(path.join(process.cwd(), '.next', file), 'utf-8'),
// }}
// />
// ))
// }
// }
class MyDocument extends NextDocument {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await NextDocument.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html lang="en">
{/* <InlineStylesHead> */}
<Head>
<link
rel="preload"
href="/fonts/Inter-roman.var-latin.woff2?3.13"
as="font"
type="font/woff2"
crossOrigin="true"
/>
</Head>
{/* </InlineStylesHead> */}
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocumentIf I uncomment the code, it doesn't work. With comments, it works perfectly fine. Tailwind Blog → https://github.com/tailwindlabs/blog.tailwindcss.com/ is using the same code as above & I'm wondering where does the I can't see it referenced anywhere. I'm currently in the process of making my blog & studying Tailwind Blog's code & I can't figure this out for weeks now. Would love any pointers? |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 9 replies
-
|
Sorry posted in the wrong issue |
Beta Was this translation helpful? Give feedback.
-
|
The example you are looking at uses Next version 9.4.4. Since that release, |
Beta Was this translation helpful? Give feedback.
-
|
Ahh thanks. Such a simple error. I changed my import NextDocument, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
import fs from 'fs'
import path from 'path'
class InlineStylesHead extends Head {
getCssLinks() {
return this.__getInlineStyles()
}
__getInlineStyles() {
const { assetPrefix, files } = this.context
if (!files || files.length === 0) return null
return files
.filter((file) => /\.css$/.test(file))
.map((file) => (
<style
key={file}
nonce={this.props.nonce}
data-href={`${assetPrefix}/_next/${file}`}
dangerouslySetInnerHTML={{
__html: fs.readFileSync(path.join(process.cwd(), '.next', file), 'utf-8'),
}}
/>
))
}
}
class MyDocument extends NextDocument {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await NextDocument.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html lang="en">
<InlineStylesHead>
<Head>
<link
rel="preload"
href="/fonts/Inter-roman.var-latin.woff2?3.13"
as="font"
type="font/woff2"
crossOrigin="true"
/>
</Head>
</InlineStylesHead>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument |
Beta Was this translation helpful? Give feedback.
-
|
@jamesmosier, interesting that |
Beta Was this translation helpful? Give feedback.
-
|
@JamesSingleton @timneutkens @jamesmosier any solutions to get |
Beta Was this translation helpful? Give feedback.
-
|
Someone has the same issue I think #16784 |
Beta Was this translation helpful? Give feedback.
-
|
If I'm correct, the line above should be:
|
Beta Was this translation helpful? Give feedback.
-
|
@deadcoder0904 any thoughts for a workaround how to get the files from the context in 9.5.3? |
Beta Was this translation helpful? Give feedback.
-
|
@zenderol it isn't possible I think, best subscribe to this issue → #16784 cc @timneutkens can you confirm if we can access |
Beta Was this translation helpful? Give feedback.
-
|
@zenderol you can get class InlineStylesHead extends Head {
getCssLinks: Head['getCssLinks'] = ({ allFiles }) => {
const { assetPrefix } = this.context
if (!allFiles || allFiles.length === 0) return null
return allFiles
.filter((file: any) => /\.css$/.test(file))
.map((file: any) => (
<style
key={file}
nonce={this.props.nonce}
data-href={`${assetPrefix}/_next/${file}`}
dangerouslySetInnerHTML={{
__html: fs.readFileSync(path.join(process.cwd(), '.next', file), 'utf-8'),
}}
/>
))
}
} |
Beta Was this translation helpful? Give feedback.
-
|
class InlineStylesHead extends Head {
getCssLinks: Head['getCssLinks'] = ({ allFiles }) => {
const { assetPrefix } = this.context
if (!allFiles || allFiles.length === 0) return null
return allFiles
.filter((file: any) => /\.css$/.test(file))
.map((file: any) => (
<style
key={file}
nonce={this.props.nonce}
data-href={`${assetPrefix}/_next/${file}`}
dangerouslySetInnerHTML={{
__html: fs.readFileSync(path.join(process.cwd(), '.next', file), 'utf-8'),
}}
/>
))
}
} |
Beta Was this translation helpful? Give feedback.
-
|
How can this be re-written in jsx? I am not familiar with typescript so not sure how to translate getCssLinks: Head['getCssLinks'] =... |
Beta Was this translation helpful? Give feedback.
-
|
@willvlad, that isn't TypeScript, just vanilla JavaScript |
Beta Was this translation helpful? Give feedback.
assetPrefixnow can be accessed viathis.contextdirectly as ofv9.5.3like: