Not working at all

[CloudPower97]

Hello, I'm trying to figure out what I'm doing wrong, because it doesn't seems to work at all for me. Let me start by saying that I'm using craco, so this might be the problem (I don't think so, haven't had problem with other plugin until now).

Here is how i configured it:

    webpack: {
      resolve: {
        plugins: [new DirectoryNamedWebpackPlugin()],
      },
      alias: {
        components: path.join(paths.appSrc, 'components'),
        containers: path.join(paths.appSrc, 'containers'),
        hoc: path.join(paths.appSrc, 'hoc'),
        style: path.join(paths.appSrc, 'style'),
        libs: path.join(paths.appSrc, 'libs'),
        assets: path.join(paths.appSrc, 'assets'),
      },
    },

That's the error I have

Failed to compile.

./src/containers/Azienda/Azienda.js
Module not found: Can't resolve 'components/Parallax' in '/home/claudio/Documents/Educabile/educabile-web/src/containers/Azienda'

Of course there is a file named Parallax.js in components/Parallax.

Please, can you take a look at it whenever you can? Thanks in advance and keep up the good work!

[shaketbaby]

What version of Webpack are you using? Did you have it working before but not anymore? Looking at the error, looks like it can resolve containers/Azienda but not components/Parallax, is this correct? Also, can it resolve other components?

[CloudPower97]

@shaketbaby I'm using webpack@4.19.1. I was never able to get this working. I do confirm the problem is not containers/Azienda. I've also tried without the alias options, hence using relative paths. It still doesn't work.

Thank you for your time, hopefully I can get this working ASAP :smile:

[shaketbaby]

Sorry, didn't get time to look into this. I was wondering if it is to do with alias, but looks like it's not. Also I don't understand how it can resolve containers/Azienda but not components/Parallax. What's the difference between containers and components?

Also, what is your resolve.modules looks like?

[CloudPower97]

Don't worry @shaketbaby, it's ok, I've been busy as well :smile: Just to recap:

import React from 'react'
import Caption from 'components/Capiton/Caption'
...

Does work, while

import React from 'react'
import Caption from 'components/Capiton'
...

doesn't.

Also tried without webpack alias, hence

import React from 'react'
import Caption from '../components/Capiton'
....

and it still doesn't work.

Another thing I tried is the include options:

    webpack: {
      resolve: {
        plugins: [
          new DirectoryNamedWebpackPlugin({
            include: [
              path.resolve(path.join(paths.appSrc, 'components')),
              path.resolve(path.join(paths.appSrc, 'containers')),
            ],
          }),
        ],
      },
      alias: {
        components: path.join(paths.appSrc, 'components'),
        containers: path.join(paths.appSrc, 'containers'),
      },
    },

with no luck as well.

So it seems that the problem is indeed with directory-named-webpack-plugin.

Just do not know why.

It simply always says Module not found: Can't resolve 'components/Capiton'

[CloudPower97]

Hey, @shaketbaby , sorry to ask, do you have any updates on this issue? :grin:

[shaketbaby]

Sorry, didn't manage to reproduce this. I'll have more time to look at it in the upcoming holiday seasons. If you are able to have a small sample project that can reproduce, that would be very helpful.

[derozn]

@CloudPower97 Just looking at your recap comment and noticed you are importing from

import Caption from '../components/Capiton'

Since the directory is named Capiton and the file you're wanting to import is Caption it won't resolve correctly as they both have different names.

Correct me if I'm wrong, but if you was to have a file called Capiton instead of Caption then it would resolve.

[shaketbaby]

Thanks @derozn , you might be correct. The file name needs to be same as directory name.