How to import twig files from different direcotory (Drupal parent - child themes)

[crazyrohila]

I was following https://docs.emulsify.info/help/packaging-for-multiple-properties to setup global vs property kind of setup. I have parent theme which has it's own storybook and components. Now I have created a sub-theme which will use twig components from parent theme, I have added namespace in webpack.config.js but got below error:

My directory structure: /docroot/profiles/custom/myprofile/themes/parenttheme/ - here is the parent theme with all components, .storybook, dist etc /docroot/themes/custom/subtheme - here is child theme with components, .storybook, dist etc.

I want to use parent theme atoms/molecules in subtheme organisms. I have updated the .storybook/webpack.config.js with following:

namespaces: {
              atoms: path.resolve(
                __dirname,
                '../../../../',
                'profiles/custom/myprofile/themes/parenttheme/',
                'components/01-atoms'
              ),
              molecules: path.resolve(
                __dirname,
                '../../../../',
                'profiles/custom/myprofile/themes/parenttheme/',
                'components/02-molecules'
              ),
              st_atoms: path.resolve(__dirname, '../', 'components/03-organisms'),

Is there way to use parent twigs in this child theme or they must be available in child theme directory?

[evanmwillhite]

In theory, you should be able to do this from anywhere since these are just relative path files being pulled into webpack. Are you sure your relative path is correct? Does st_atoms work?

[crazyrohila]

Yes, st_atoms is working fine. Relative paths are correct, it's just that they are outside of this directory. For time being I have copied outside ../../../../profiles/custom/myprofile/themes/parenttheme/components/ in child theme as parent_components when composer gets profile and used this parent_componets in webpack.config.js. I would have created a symbolic link but that could create some issue with our cloud provider and the way apps are deployed, so choose the copied way 🤷‍♂️.

[evanmwillhite]

Weird, this is what we did on our fake "Western University" examples. Here's the Art school Webpack config with the Twig section highlighted: https://github.com/emulsify-ds/westernarts/blob/master/web/themes/custom/western_arts/.storybook/webpack.config.js#L43-L78

Those Western U repos are public in our Emulsify org if it helps to debug. We didn't traverse as far in our relative urls as you did, but the principle stands since we went one directory back and into the node_modules directory for our packages. Hope this helps.