Better docs are not generating live preview

[asaduzzaman69]

import './svg.styles.scss'; import PropTypes from 'prop-types';

/** *

• @component
• @example
• const iconName = 'facebook';
• const iconClass = 'icon-facebook';
• const size = '2.25rem';
• return (
• ) */

const SVG = (props) => { const { iconName, iconClass, size } = props return ( <SVG className={${iconClass} svg} width={size} height={size}> <use xlinkHref={./sprite.svg#icon-${iconName}}> </SVG> ); }

SVG.propTypes = {

/**
 * This Define the name of the Icon
 */
iconName: PropTypes.string,
/**
 * This is for to give some custom styles to the component
 */
iconClass: PropTypes.string,
/**
 * Size of the icon
 */
size: PropTypes.string

} SVG.defaultProps = { iconName: 'Hello World', size: 12, }

export default SVG;

[jarnoleikas]

The output is otherwise great, but I'm also having the same problem and getting ReactDOM is not defined in console, as well as 404s from entry.js. It seems like by default the entry.js is generated to /entry.js, but the generated html is trying to reference it from /build/entry.js.

Changing the reference doesn't really help, it just leads to more errors, so I'm suspecting this feature is very much under construction (it is beta, after all)?

The live examples are cool, but I at least could easily live without them - in fact it would be great if they were optional!

[simioni]

I've been having the same problem for a while now, receiving "ReactDOM is not defined", but strangely it sometimes work and sometimes not.

The 404 on /build/entry.js is indicative of the parcel build failing for some reason. Changing it to /entry.js will not work, since that file is the unbundled file. Even with type=module added in the script import tag, the browser CORS policy will not allow a module from different origin to be loaded via a file:// request.

I'm still investigating why the parcel build is sometimes failing. I just wanted to post this update to point someone possibly also interested the in the right direction.

[mafuentes22]

I was facing the same problem but I found a solution. The problem is in the following command executed by better-docs

SET NODE_ENV=development parcel build docs\entry.js --out-dir docs\build

The problem here is that the Windows Console can't set environment variables that way, so I installed cross-env as a dev dependency and added this script to the package.json

"doc-build": "cross-env NODE_ENV=development parcel build docs\\entry.js --out-dir docs\\build"

If you execute that script after this script suggested in the tutorial

"docs": "jsdoc -c ./jsdoc.json"

It will generate the build folder inside your docs folder generated by better-docs, and therefore you can see the live preview of the component.

[flexwie]

There is no --out-dir in [email protected] anymore but I think --dist-dir is a drop-in replacement. Now I'm getting Typescript related issues after changing this, it seems like it does not take our baseUrl to resolve imports. I'm not familiar with parcel, do I need additional setup for it to work with TS?

[WinyersonRh]

import './svg.styles.scss'; import PropTypes from 'prop-types';

/** *

• @component
• @example
• const iconName = 'facebook';
• const iconClass = 'icon-facebook';
• const size = '2.25rem';
• return (
• ) */

const SVG = (props) => { const { iconName, iconClass, size } = props return ( <SVG className={${iconClass} svg} width={size} height={size}> <use xlinkHref={./sprite.svg#icon-${iconName}}> ); }

SVG.propTypes = {

/**
 * This Define the name of the Icon
 */
iconName: PropTypes.string,
/**
 * This is for to give some custom styles to the component
 */
iconClass: PropTypes.string,
/**
 * Size of the icon
 */
size: PropTypes.string

} SVG.defaultProps = { iconName: 'Hello World', size: 12, }

export default SVG;

SOLUTION HERE: https://github.com/SoftwareBrothers/better-docs/issues/173#issuecomment-2106034007