search

emulsify-ds / documentation

Documentation for the Emulsify Design System
https://docs.emulsify.info
7 stars 7 forks source link

Importing libraries for individual components #7

Closed lasseitorp closed 3 years ago

lasseitorp commented 4 years ago

What's the best practice for importing external libraries for both Storybook and Drupal? Is there an example of that?

┆Issue is synchronized with this Jira Story by Unito

acouch commented 4 years ago

There are examples and docs here for both global and libraries for individual components: https://docs.emulsify.info/help/3rd-party-libraries

Can you try and let us know if you have feedback?

lasseitorp commented 4 years ago

@acouch Thanks for the swift reply!

Yes I've tried adding a library with yarn and using import LIBRARY from 'library' in components js-file which works in Storybook, but breaks Drupal. Which is best approach here?

acouch commented 4 years ago

Yes I've tried adding a library with yarn and using import LIBRARY from 'library' in components js-file which works in Storybook,

Great.

but breaks Drupal. Which is best approach here?

Can you say what breaks? Make sure to include the library in your Drupal theme as a separate step. It would look like: https://docs.emulsify.info/help/3rd-party-libraries#add-js-file-to-theme-library-and-load-in-the-template but you would be including the library in the theme as you normally would.

lasseitorp commented 4 years ago

Hi Aaron,

Thanks for taking your time on this issue and contributing to community .

Suddenly everything works as designed?? 🤦🏻‍♂️ Crazy!

Just to check so I’ve got this right:

yarn add my_library In my_component/my_component.js -> import My_library from ‘my_library’ In my_theme.libraries.yml add my_component.js as stated in the documentation

This is what I had that at first gave an error, but now works like magic!

Regards Lars McLachlan

On 1 Jun 2020, at 13:09, Aaron Couch notifications@github.com wrote:

Yes I've tried adding a library with yarn and using import LIBRARY from 'library' in components js-file which works in Storybook,

Great.

but breaks Drupal. Which is best approach here?

Can you say what breaks? Make sure to include the library in your Drupal theme as a separate step. It would look like: https://docs.emulsify.info/help/3rd-party-libraries#add-js-file-to-theme-library-and-load-in-the-template https://docs.emulsify.info/help/3rd-party-libraries#add-js-file-to-theme-library-and-load-in-the-template but you would be including the library in the theme as you normally would.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/emulsify-ds/documentation/issues/7#issuecomment-636790781, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAQO6NWC7DTZLNNQKMGKD6LRUOD7BANCNFSM4NPD2OTQ.

lasseitorp commented 4 years ago

I jumped the gun there… no it doesn’t work! I must miss something here?

//Lars

On 4 Jun 2020, at 13:06, Lars McLachlan lars@mclachlan.se wrote:

Hi Aaron,

Thanks for taking your time on this issue and contributing to community .

Suddenly everything works as designed?? 🤦🏻‍♂️ Crazy!

Just to check so I’ve got this right:

yarn add my_library In my_component/my_component.js -> import My_library from ‘my_library’ In my_theme.libraries.yml add my_component.js as stated in the documentation

This is what I had that at first gave an error, but now works like magic!

Regards Lars McLachlan

On 1 Jun 2020, at 13:09, Aaron Couch <notifications@github.com mailto:notifications@github.com> wrote:

Yes I've tried adding a library with yarn and using import LIBRARY from 'library' in components js-file which works in Storybook,

Great.

but breaks Drupal. Which is best approach here?

Can you say what breaks? Make sure to include the library in your Drupal theme as a separate step. It would look like: https://docs.emulsify.info/help/3rd-party-libraries#add-js-file-to-theme-library-and-load-in-the-template https://docs.emulsify.info/help/3rd-party-libraries#add-js-file-to-theme-library-and-load-in-the-template but you would be including the library in the theme as you normally would.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/emulsify-ds/documentation/issues/7#issuecomment-636790781, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAQO6NWC7DTZLNNQKMGKD6LRUOD7BANCNFSM4NPD2OTQ.

lasseitorp commented 4 years ago

I still can't get imports to work in Drupal!?!

If you look at the Westernarts Scratch-off-gallery component, it has an import on line 2. https://github.com/emulsify-ds/westernarts/blob/master/web/themes/custom/western_arts/components/03-organisms/scratch-off-gallery/scratch-off-gallery.js

When run through Babel it will be transpiled to a "require()" and as the JS files arn't webpacked, the browser throws a "require is not defined"

Am I missing something here?

evanmwillhite commented 3 years ago

Sorry that this issue never got resolved. We are watching the emulsify-drupal issue queue more closely than this docs one (our fault, not yours). I think you were likely facing the issue fixed here, so I am going to close this one out. If you are still running into issues with this, send a issue to the queue over there. Thanks again.