import local module

[enieber]

Environment

Develop

Description

I trying use the component docs to document one project with local module @style/base

Reproducible Demo

run this component with one module local to reproduce the error

code component

// @flow
/*
 imports of components

*/
import { color } from '@styles/base' // @style is local module in relative folder project

const style = (props: Object) =>
  StyleSheet.create({
    text: {
      justifyContent: 'center',
      color: color.primary,
    }
 })

class Text extends PureComponent<Props> {
  render() {
    const { value, type } = this.props
    const contextualStyle = style(this.props)
    
    return (
      <TextStyle
        type={props.type}
        style={contextualStyle.text}
      >
        {value}
      </TextStyle>
    )
  }
}

Documentation to component

export const meta = {
  title: 'Text compoenent'
}

import Text from './Text'

# Text component

the Text compoent has the props you need to use text in project


<Text
  value={'Enter your mobile number'}
/>

cli to run doc

yarn component-docs serve "**/*.{md,mdx}"

error result

internal/modules/cjs/loader.js:615
    throw err;
    ^

Error: Cannot find module '@styles/base'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:613:15)
    at Function.Module._load (internal/modules/cjs/loader.js:539:25)    at Module.require (internal/modules/cjs/loader.js:667:17)
    at require (internal/modules/cjs/helpers.js:20:18)    at Object.<anonymous> (/*_my_folder_component*/)
    at Module._compile (internal/modules/cjs/loader.js:738:30)    at Module._compile (/**/node_modules/pirates/lib/index.js:83:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:749:10)
    at Object.newLoader [as .js] (/**/node_modules/pirates/lib/index.js:88:7)
    at Module.load (internal/modules/cjs/loader.js:630:32)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[enieber]

when I change the relative place the module @style/base to '../../../styles/base' the error have change:

/**/node_modules/react-dom/cjs/react-dom-server.node.development.js:3149
            throw err;
            ^

Error: Cannot find module 'StyleSheet'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:613:15)
    at Function.Module._load (internal/modules/cjs/loader.js:539:25)
    at Module.require (internal/modules/cjs/loader.js:667:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.get StyleSheet [as StyleSheet] (/**/node_modules/react-native/Librar
ies/react-native/react-native-implementation.js:274:12)
    at StyleSheet (/*_my_folder_component*/)
    at Text.render (/*_my_folder_component*/)
    at processChild (/**/node_modules/react-dom/cjs/react-dom-server.node.developm
ent.js:2942:18)
    at resolve (/**/node_modules/react-dom/cjs/react-dom-server.node.development.j
s:2795:5)
    at ReactDOMServerRenderer.render (/**/node_modules/react-dom/cjs/react-dom-ser
ver.node.development.js:3185:22)
error Command failed with exit code 1.

[satya164]

I trying use the component docs to document one project with local module @style/base

You can't import modules this way without configuration. To configure this, you can use something like https://github.com/tleunen/babel-plugin-module-resolver

https://github.com/tleunen/babel-plugin-module-resolver

Seems you're trying to import a react native component. You can't use react native components on web. An option is to alias react-native to react-native-web using the babel plugin mentioned above.