[React-imported-component] Error: Cannot find module 'elliptic'

i have some error :

1. i have error if i import component my code contain aliases path
2. style using @emotion/core not apply … but if using inline style from react doc i can be apply error / crash :

🚨 Whoops, we crashed 🚨
Cannot find module 'elliptic'
Stack trace
in UnconnectedReactImportedComponent (created by ReactImportedComponent)
in ReactImportedComponent (created by ImportedComponent)
in ImportedComponent (created by ForwardRef)
in ForwardRef (created by AsyncRoute)
in div (created by Context.Consumer)
in Styled(div) (created by Context.Consumer)
in div (created by Context.Consumer)
in Styled(div) (created by Context.Consumer)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in Main (created by Context.Consumer)
in ThemeConfig (created by Page)
in Page (created by AsyncRoute)
in AsyncRoute (created by Route)
in Route (created by Context.Consumer)
in Switch (created by Context.Consumer)
in MDXProvider (created by DocPreview)
in DocPreview (created by Context.Consumer)
in ThemeProvider (created by Context.Consumer)
in ThemeConfig (created by Theme)
in Theme (created by Theme)
in ScrollToTopBase (created by Route)
in Route (created by withRouter(ScrollToTopBase))
in withRouter(ScrollToTopBase) (created by Theme)
in Router (created by BrowserRouter)
in BrowserRouter (created by Router)
in Router (created by Theme)
in DataServer (created by Theme)
in StateProvider (created by Theme)
in ErrorBoundary (created by Theme)
in Theme (at root.jsx:5)
in Root (created by HotExportedRoot)
in AppContainer (created by HotExportedRoot)
in HotExportedRoot (at app/index.jsx:14)

here my component

import React from 'react'
import { css } from '@emotion/core'
import { Background, Color } from 'Utils'
import PropTypes from 'prop-types'

const Badge = ({ color, children, style, ...props }) => {
  const badge = css`
    font-size: 9px;
    letter-spacing: 1px;
    color: ${ Color.white };
    border-radius: 10px;
    padding: 2px 7px;
    vertical-align: middle;
    display: inline-block;
    font-weight: bold;
  `
  return (
    <div css={ [badge, Background(color), style] } { ...props }>{ children }</div>
  )
}

Badge.propTypes = {
  color: PropTypes.string,
  children: PropTypes.node,
  style: PropTypes.string
}

export default Badge
`
**my doczrc.js config **

`import { alias } from './next.config'

export default {
  title: 'Reactism',
  description: 'Reactism is a React Boilerplate based next.js',
  modifyBundlerConfig: config => {
    console.log("alias",alias)
    const newConfig = {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          ...alias
        }
      },
      module: {
        rules: [
          ...config.module.rules,
          {
            test: /\.css$/,
            use: ['css-loader']
          }
        ]
      }
    }
    return newConfig
  }
}

** and alias on next.config.js **

const aliases = {
  'Containers': path.resolve(__dirname, 'components/containers'),
  'Elements': path.resolve(__dirname, 'components/elements/'),
  'Utils': path.resolve(__dirname, 'components/utilities/'),
  'Layout': path.resolve(__dirname, 'components/pageLayouts/'),
...................
}

anyone can help ?

[willallendev]

@rakannimer This is in my package.json "docz": "^1.2.0", So I guess V1

The big problem is that you would need to changes the imports in the component that you are importing itself. This is far from a good solution

In our case we found that using something like this @components/BrandCard/brand-card.component.js was a bit easier than relative paths

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.