How to use the react-styleguidist/lib/loaders/utils/requireIt function in react-styleguidist

const allModulesCode = allModules.reduce((requires, requireRequest) => {
		// if we are looking at a remote example
		// resolve the requires from there

		if (requireRequest.importPath) {
			if (!requires[requireRequest.importPath]) {
				requires[requireRequest.importPath] = {}
			}
			const relativePath = /^\./.test(requireRequest.path)
				? path.join(requireRequest.importPath, requireRequest.path)
				: requireRequest.path
			requires[requireRequest.importPath][requireRequest.path] = requireIt(relativePath)
		} else {
			requires[requireRequest] = requireIt(requireRequest)
		}
		return requires
	}, {})

const allModulesCode = allModules.reduce((requires, requireRequest) => {
		// if we are looking at a remote example
		// resolve the requires from there

		if (requireRequest.importPath) {
			if (!requires[requireRequest.importPath]) {
				requires[requireRequest.importPath] = {}
			}
			const relativePath = /^\./.test(requireRequest.path)
				? path.join(requireRequest.importPath, requireRequest.path)
				: requireRequest.path
			requires[requireRequest.importPath][requireRequest.path] = requireIt(relativePath)
		} else {
			requires[requireRequest] = requireIt(requireRequest)
		}
		return requires
	}, {})

map(fullContext, (requireRequest, name) => [
				// const name$0 = require(path);
				b.variableDeclaration('const', [
					b.variableDeclarator(
						b.identifier(`${name}$${++marker}`),
						requireIt(requireRequest).toAST()
					)
				]),
				// const name = name$0.default || name$0;
				b.variableDeclaration('const', [
					b.variableDeclarator(
						b.identifier(name),
						b.logicalExpression(
							'||',
							b.identifier(`${name}$${marker}.default`),
							b.identifier(`${name}$${marker}`)
						)
					)
				])
			])
		)

export function processSection(
	section: Section,
	config: StyleguidistConfig,
	parentDepth?: number
): ProcessedSection {
	const contentRelativePath = section.content

	// Try to load section content file
	let content
	if (contentRelativePath) {
		const contentAbsolutePath = path.resolve(config.configDir, contentRelativePath)
		if (!fs.existsSync(contentAbsolutePath)) {
			throw new Error(`Styleguidist: Section content file not found: ${contentAbsolutePath}`)
		}
		content = requireIt(`!!${examplesLoader}?customLangs=vue|js|jsx!${contentAbsolutePath}`)
	}

	let sectionDepth

	if (parentDepth === undefined) {
		sectionDepth = section.sectionDepth !== undefined ? section.sectionDepth : 0
	} else {
		sectionDepth = parentDepth === 0 ? 0 : parentDepth - 1
	}

	return {
		name: section.name || '',
		exampleMode: section.exampleMode || config.exampleMode,
		usageMode: section.usageMode || config.usageMode,
		sectionDepth,
		description: section.description,

const examplesFileToLoad = examplesFile || defaultExample
	if (!examplesFileToLoad) {
		return null
	}

	const relativePath = `./${path.relative(path.dirname(examplesFileToLoad), file)}`

	const query = {
		displayName,
		file: relativePath,
		shouldShowDefaultExample: !examplesFile && !!defaultExample && !isComponentDocInVueFile,
		customLangs: 'vue|js|jsx'
	}

	if (examplesFile && fs.existsSync(examplesFile)) {
		return requireIt(`!!${examplesLoader}?${qss.encode(query)}!${examplesFile}`)
	}

	if (defaultExample && !isComponentDocInVueFile) {
		return requireIt(`!!${examplesLoader}?${qss.encode(query)}!${defaultExample}`)
	}

	return []
}

export default function processComponent(filepath: string, config: StyleguidistConfig): Component {
	const componentPath = path.relative(config.configDir || '', filepath)
	const componentName = getNameFromFilePath(filepath)
	const props = requireIt(`!!${vueDocLoader}!${filepath}`)
	const examplesFile = config.getExampleFilename(filepath)
	const componentMetadataPath = getComponentMetadataPath(filepath)
	const hasExamplesFile = examplesFile && fs.existsSync(examplesFile)
	let hasInternalExamples = false
	if (!hasExamplesFile && fs.existsSync(componentPath)) {
		const customBlocks = parseComponent(fs.readFileSync(componentPath, 'utf8')).customBlocks
		hasInternalExamples = !!customBlocks && customBlocks.findIndex(p => p.type === 'docs') >= 0
	}
	const hasExamples = hasExamplesFile || hasInternalExamples

	return {
		filepath: componentPath,
		slug: slugger.slug(componentName),
		pathLine: config.getComponentPathLine(componentPath),
		module: requireIt(filepath),
		props,

const hasExamplesFile = examplesFile && fs.existsSync(examplesFile)
	let hasInternalExamples = false
	if (!hasExamplesFile && fs.existsSync(componentPath)) {
		const customBlocks = parseComponent(fs.readFileSync(componentPath, 'utf8')).customBlocks
		hasInternalExamples = !!customBlocks && customBlocks.findIndex(p => p.type === 'docs') >= 0
	}
	const hasExamples = hasExamplesFile || hasInternalExamples

	return {
		filepath: componentPath,
		slug: slugger.slug(componentName),
		pathLine: config.getComponentPathLine(componentPath),
		module: requireIt(filepath),
		props,
		hasExamples,
		metadata: fs.existsSync(componentMetadataPath) ? requireIt(componentMetadataPath) : {}
	}
}

const isComponentDocInVueFile = !!componentVueDoc
	if (componentVueDoc) {
		vsgDocs.example = requireIt(`!!${examplesLoader}?customLangs=vue|js|jsx!${file}`)
	} else if (docs.tags) {
		const examples = docs.tags.examples
		if (examples) {
			const examplePath = (examples[examples.length - 1] as Tag).content
			if (examples.length > 1) {
				logger.warn(
					`More than one @example tags specified in component ${path.relative(
						process.cwd(),
						file
					)}\nUsing the last tag to build examples: '${examplePath}'`
				)
			}
			vsgDocs.example = requireIt(`!!${examplesLoader}?customLangs=vue|js|jsx!${examplePath}`)
		}
	}
	if (docs.props) {
		const filteredProps = docs.props.filter(prop => !prop.tags || !prop.tags.ignore)
		const sortProps = config.sortProps || defaultSortProps
		vsgDocs.props = filteredProps ? sortProps(filteredProps) : undefined
	}

	const examplesFile = config.getExampleFilename ? config.getExampleFilename(file) : false
	vsgDocs.examples = getExamples(
		file,
		examplesFile,
		docs.displayName,
		config.defaultExample,
		isComponentDocInVueFile
	)

const props = requireIt(`!!${vueDocLoader}!${filepath}`)
	const examplesFile = config.getExampleFilename(filepath)
	const componentMetadataPath = getComponentMetadataPath(filepath)
	const hasExamplesFile = examplesFile && fs.existsSync(examplesFile)
	let hasInternalExamples = false
	if (!hasExamplesFile && fs.existsSync(componentPath)) {
		const customBlocks = parseComponent(fs.readFileSync(componentPath, 'utf8')).customBlocks
		hasInternalExamples = !!customBlocks && customBlocks.findIndex(p => p.type === 'docs') >= 0
	}
	const hasExamples = hasExamplesFile || hasInternalExamples

	return {
		filepath: componentPath,
		slug: slugger.slug(componentName),
		pathLine: config.getComponentPathLine(componentPath),
		module: requireIt(filepath),
		props,
		hasExamples,
		metadata: fs.existsSync(componentMetadataPath) ? requireIt(componentMetadataPath) : {}
	}
}