I am trying to create documentation with a storybook folder containing topics. But getting this error:
Uncaught Error: Unable to render story ... as the component annotation is missing from the default export
Migration.stories.mdx
import { Meta, Story} from '#storybook/addon-docs';
<Meta title="Documentation / Visual Update Migration" />
# Migrating
<Story name="Card" />
## Card
- Text
- Text
<Story name="Container" />
## Container
- Text
- Text
All these cause Story marks, but if I remove them, there won't be refs in the sidebar
Expected:
So, the path and side bar load correctly, but the content on click does not load giving the error.
Uncaught Error: Unable to render story documentation-visual-update-migration--card as the component annotation is missing from the default export ...
Uncaught Error: Unable to render story documentation-visual-update-migration--container as the component annotation is missing from the default export ...
Plus
2 The above error occurred in the <storyFn> component ...
And
POST http://localhost:6006/runtime-error 404 (Not Found)
POST http://localhost:6006/runtime-error 404 (Not Found)
The problem was in <Story ... />. Story wants something inside it.
Fix: <Story ...>{''}</Story>
Related
I need to render the title of a post when it's shared via Facebook or in other apps or messages.
I want Something like this:
However, my posts show the actual title of the application, which is not what I want. When shared, I want the exact title of the posts to be dynamically displayed as per the post's meta-tags, not the main description of my application
Do not want something like in the picture below
Using React-helmet
To render the post's title, I am using React-helmet async to change the title and meta tag as client-side rendering at runtime. The changes are visible during post-inspection but not on the page source (Ctrl + U on the post) and social media shares.
My index.html
<title>my title</title>
<meta
name="description"
content="test description"
/>
My code on one of the pages
<Helmet>
<title>{title}</title>
<meta name='description' content={description} />
</Helmet>
I then wrap app.js with the react-helmet as
<HelmetProvider>
<App/>
</HelmetProvider>
You can replicate the issue (based on react-helmet) from this link:
https://preview-react-helmet-meta-ta.samsara-web.pages.dev/discussions/discussions-details/419
Can this issue be fixed with React-helmet?
React-snap
This is another package that has not been updated in the last four years.
To change the source file, it must be rendered from the server. I used react-snap to pre-render the HTML file, however, got the following issue.
The build folder is ready to be deployed.
19:36:10.984 You may serve it with a static server:
19:36:10.984
19:36:10.984 yarn global add serve
19:36:10.984 serve -s build
19:36:10.984
19:36:10.984 Find out more about deployment here:
19:36:10.985
19:36:10.985 https://cra.link/deployment
19:36:10.985
19:36:11.124 $ react-snap
19:36:13.427 🔥 pageerror at /: SyntaxError: Unexpected token '<'
19:36:13.427
19:36:13.528 ️️️💬 console.log at /: Buffered flag does not support the 'longtask' entry type.
19:36:13.634 ️️️💬 console.log at /: ServiceWorker registration successful with scope: http://localhost:45678/
19:36:13.723 ️️️⚠️ warning at /: got 403 HTTP code for https://accounts.google.com/gsi/client
19:36:13.724 ️️️💬 console.log at /: Failed to load resource: the server responded with a status of 403 ()
19:36:13.733 ️️️💬 console.log at /: An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323
19:36:14.638 ️️️💬 console.log at /: Access to XMLHttpRequest at 'https://cloudflareinsights.com/cdn-cgi/rum' from origin 'http://localhost:45678' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost' that is not equal to the supplied origin.
19:36:14.639 ️️️💬 console.log at /: Failed to load resource: net::ERR_FAILED
19:36:19.024 ✅ crawled 52 out of 52 (/)
19:36:19.083
19:36:19.107 error Command failed with exit code 1.
19:36:19.107 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
19:36:19.127 Failed: build command exited with code: 1
19:36:20.854 Failed: an internal error occurred
My package.json
"scripts": {
"postbuild": "react-snap"
}
My index.js
const MyApp = () => (
<Provider store={store}>
<SWRConfig
value={{
fetcher,
dedupingInterval: 10000,
onError: (error, key) => {
if (error.status !== 403 && error.status !== 404) {
// TODO Implement sentry integration
}
},
onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
if (error.status === 404) return
if (retryCount >= 7) return
setTimeout(() => revalidate({ retryCount }), 5000)
}
}}
>
<ErrorBoundary>
<App />
</ErrorBoundary>
</SWRConfig>
</Provider>
)
const rootElement = document.getElementById('root')
if (rootElement.hasChildNodes()) {
ReactDOM.hydrate(<MyApp />, rootElement)
} else {
ReactDOM.render(<MyApp />, rootElement)
}
On further research, I found that server-side rendering can fix this issue. However, it is challenging to render React apps components server-side. There was a potential solution of using an Express Server with complex configurations, discussed here https://blog.logrocket.com/adding-dynamic-meta-tags-react-app-without-ssr/ .
Currently, I am using React and React-dom version 17.0.2.
One of the example posts one can use for inspection would be https://samsara.social/discussions/discussions-details/215/the-dark-triad-in-primates-mind-machiavellian-inte
or any other post on samsara.social web app.
You have to implement open-graph-tags which has too many types.
<Helmet>
// dynamically creating title and helmet will inject it
<title>{title}</title>
// og stands for open graph
<meta property="og:title" content="Users app" />
</Helmet>
For every article page your meta title and description need to be change with your article title and description so it will render it while you share article links. pass meta tags content properly from your page.
I'm getting this error: InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/showcaseimage.c2c0ae9f.jpg') is not a valid name.
Why do I get it on an image import ? (I'll include my file tree. but i think the issue is not with that). The name of the image inside of the image folder is showcaseimage.jpg
my file tree and how i imported an image inside of my component
Imported images are not components, they are URLs (or they will be by the time a bundler has worked its magic).
You need an img element or other thing that accepts a URL to use it.
import myImage from '../images/foo.jpeg';
const MyComponent = () => {
return <img src={myImage} alt="Alternative text goes here as usual" />;
}
I am making a SSR react contentful application and after I hydrate the app correctly I am getting an error related to the data I got correctly from the server. It thinks the key I am passing to the contentful API does not exist but it did for the server request. I can't quite figure out why it would throw this error this way. Has anyone run into this the code is here minus the keys for obvious reasons.
https://github.com/JoshBowdenConcepts/goop-troop-collective
the current error looks like this:
Uncaught TypeError: Expected parameter accessToken
K contentful.js:53
267 client.js:8
l (index):1
100 main.27827bac.chunk.js:1
l (index):1
r (index):1
t (index):1
<anonymous> main.27827bac.chunk.js:1
contentful.js:53:10
Cheers,
The problem is that while the server-side rendered tree passes siteInfo to <App />, the clientside bundle's index.js does not. If you were running a development build of React, you'd probably see errors related to the hydrated tree differing from the DOM. You'll need to pass the initial props to the client somehow - one popular trick is to inject them into a global variable and pass that, for example:
Server:
getSiteInformation().then((info) => {
const siteInfoInjector = `<script>window.__INITIAL_PROPS = ${JSON.stringify(
info.fields
)};</script>`;
return res.send(
data.replace(
'<div id="root"></div>',
`${siteInfoInjector}
<div id="root">
${ReactDOMServer.renderToString(
<App siteInfo={info.fields} />
)}
</div>`
)
);
});
Client's index.js:
const initialProps = window.__INITIAL_PROPS;
ReactDOM.hydrate(
<React.StrictMode>
<App siteInfo={initialProps} />
</React.StrictMode>,
document.getElementById("root")
);
A word of warning though, this injects the stringified result directly into the HTML, meaning that if your siteTitle is hello </script><script>alert(1), you've got an XSS on your hands. One way you could fix this is by base-64 encoding the initial value:
Server:
const siteInfoInjector = `<script>window.__INITIAL_PROPS = "${Buffer.from(
JSON.stringify(info.fields)
).toString("base64")}";</script>`;
Client:
const initialProps = JSON.parse(atob(window.__INITIAL_PROPS));
I'm trying to use Stripe in NextJs https://github.com/stripe/react-stripe-elements/blob/master/README.md#server-side-rendering-ssr
I keep getting the error "window is not defined". Am I missing something? The code is at the link above.
"window is not defined" is shown due to the fact that your code is server-side rendered and can't access the global window object because that is something only a client will understand. move your code inside lifecycle methods as they run only on the client-side.
Another option is to use a dynamic import for the Stripe component and disable SSR.
StripeForm component file (export as default)
component/StripeForm.tsx
Import it dynamically in pages/stripe like so
const StripeForm = dynamic(() => import("../components/StripeForm"), { ssr: false } )
return (
...
<StripeForm />
...
)
I am writing an api portal using react and want to include Redoc (https://github.com/Rebilly/ReDoc) in the react component. Is it possible to use Redoc in react application? If yes, then what is the best way to do this.
I've tried initializing ReDoc via globally exposed Redoc object but it throws esprima and jquery missing error. I've installed these packages but still no luck.
import {Redoc} from './redoc';
module.exports = Redoc;
Redoc.init('http://petstore.swagger.io/v2/swagger.json', {
scrollYOffset: 50
})
Also, if I include in the component directly
render() {
return(
<div>
<redoc spec-url='http://petstore.swagger.io/v2/swagger.json'>
</redoc>
</div>
);
}
it throws "Unknown prop spec-url on tag" error.
ReDoc is being rewritten to use React. When this pull request is completed, and merged, you would be able to easily include ReDoc in your React application.
https://github.com/Rebilly/ReDoc/pull/357