feat: Ionic should work with vanilla webpack import

[claytongulick]

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request Currently it is not very straight forward to use ionic with npm + vanilla + webpack.

I'm not using angular or any framework, I'm just using Ionic web components mixed in with lit-html and LitElement components. Bundles are being created with normal webpack.

Currently, doing import '@ionic/core' doesn't work, the framework isn't loaded properly. Using unpkg is not an option, the loading times are prohibitive, and I need to serve all of the files from my server.

Importing esm modules doesn't work because the import paths are incorrect - this is due to ionic shipping with it's own loader.

The only solution that exists currently is to extract the dist folder from node_modules and create a 'script' or 'lib' folder with all of the dist content, and link to it with a script tag.

Describe Preferred Solution Ionic should be able to be loaded with a normal import or require statement from a standard webpack build.

[tvvignesh]

I have the same issue as well. Have to currently resort to putting ionic in the index.html like this:

    <script type="module" src="./node_modules/@ionic/core/dist/ionic/ionic.esm.js"></script>
    <script nomodule="" src="./node_modules/@ionic/core/dist/ionic/ionic.js"></script>
    <link href="./node_modules/@ionic/core/css/ionic.bundle.css" rel="stylesheet" />

Having a es6 import for this as well as for other things like pwaelements and ionicons would be great.

[tvvignesh]

@liamdebeasi @brandyscarney Hi. Any ideas on how we can solve this issue? Coming across the same issue again after an year 😅

It works if I import in the HTML file but not as a es6 import inside the ts file, but I prefer to have all the imports within the script files and just import 1 file in my HTML.

PS: I use IONIC with Lit Element (and not stencil or react)

[liamdebeasi]

Hey there! Could you please create a GitHub repo that showcases this issue? It's hard to suggest a resolution without being able to reproduce the issue myself.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!