Relative import path breaks after building the lib

[sag1v]

Hi Cory,
I'm not sure this is the place to ask this question. If you prefer i will post it in pluralsight let me know.

I'm having an issue, with relative paths outside the components folder.
Let say i'm using some functions from the utils folder in some of my components:

//MyComponent.js
import { myHelper } from '../../utils/helpers';
//...

in development it works fine of course, but when we run the build:lib there is no utils folder inside lib folder. So obviously we should include utils in our build process and copy it to lib.

But here is the problem, utils is now on the same root folder as all the other components,
so now the relative path that we used:
import { myHelper } from '../../utils/helpers';

Should be different:
import { myHelper } from './utils/helpers';

I can think of 2 ways to (almost) solve this:

1. Copy the components to a nested structure like lib/somefolder/someOtherFolder/, but this will force me to manipulate the root index.js file as well and who knows what else.

2. Attack it from a different angle and make the change in the DEV environment. i know we can configure webpack with some alias folder or context and thus use the import with something like this:
   import { myHelper } from 'utils/helpers';
   But i'm having trouble finding an example for this or understand how and where exactly should i put the configuration in webpack.
   This might also not work because this is not a relative path, so outside my webpack context node will look for "utils" inside node_modules.

any help and suggestions would be appreciated 😄

[coryhouse]

Hi Sagiv - Can you please post this on the discussion instead? That way more people are likely to see my response. I'll answer there. Thanks!

[sag1v]

Thanks! done.