Error with import components

[alejandoing]

Hi. I've had problems with import components. Someone can you help me?

For example, when I try import this component:

import { IconLink } from 'components'

I get this error:

Module not found: Can't resolve 'components'

My index.js file:

const req = require.context('.', true, /\.\/[^/]+\/[^/]+\/index\.js$/)

req.keys().forEach((key) => {
  const componentName = key.replace(/^.+\/([^/]+)\/index\.js/, '$1')
  module.exports[componentName] = req(key).default
})

[diegohaz]

What command triggers that error? How can we reproduce it?

[alejandoing]

My HomePage component:

import React from 'react'
import styled from 'styled-components'
import { font, palette } from 'styled-theme'
import { IconLink } from 'components'

const Title = styled.h1`
  font-family: ${font('primary')};
  color: ${palette({ primary: 3 }, 1, true)};
  text-align: center;
`

const HomePage = () => {
  return (
    <div>
      <Title palette="primary">Hello World!</Title>
      <IconLink to="/" icon="arc" height={100} />
    </div>
  )
}

export default HomePage

The error is generated in this line:

import { IconLink } from 'components'

The same error happens in other components. What could be?

[diegohaz]

Got it. But how this error occurs? Is this a plugin on your editor? Are you running a command (npm run something) etc.?

[alejandoing]

The error is produced when run this command npm run start

[diegohaz]

This can be your webpack/babel configuration. Does this happen for you on a clean fork of ARc? Otherwise, could you provide a repository where this happens?

[alejandoing]

Thanks. I have made a new clean installation and not it works perfect. Surely it was a mistake in the configuration of my webpack.