Cannot build a project using beta-2 with parcel.js

[manzanotti]

I'm having an issue upgrading to the new beta-2, but wanted to sanity check it first, as I figure it's mostly likely something I've done wrong.

I'm using Parcel.js as my bundler, and I've updated my project to import and initialise the Modal and Tab components.

However, when I attempt to build it, it fails complaining that it can't find the file:

node_modules\tw-elements\src\js\data\chart\charts.js

Now, that path is missing the dist folder before src, however I'm wondering why this file is even being requested, given that I'm not using charts, at least not intentionally? I would have thought that the tree-shaking would have meant that file was ignored by the buil?

I'm sure that at some point in my searching today I've seen a tailwind.config.js file that had charts.js in it, but I haven't been able to find it again.

You can see the build report on GitHub:

https://github.com/manzanotti/saferstreetmaker/actions/runs/4839138453/jobs/8623987964?pr=135

Any suggestions as to what I've done wrong here appreciated.

[juujisai]

Hi, I'm not really sure what could happen. Maybe some of those things could help?

• I think you are using tw-elements twice, one as a cdn package and two as a dependency: https://github.com/manzanotti/saferstreetmaker/blob/main/src/index.html#L58 https://github.com/manzanotti/saferstreetmaker/blob/main/package.json#L14
• the cdn links are not working, because since 1.0.0-beta2 we are using tw-elements.min.js not index.min.js - maybe that could cause some issues? Current cdns can be find here: https://tailwind-elements.com/docs/standard/getting-started/quick-start/#cdn
  If you need older cdn versions you can access them like this:

<script src="
https://cdn.jsdelivr.net/npm/[email protected]/dist/js/index.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/index.min.css
" rel="stylesheet">

• as of the charts, they were added in v1.0.0-beta2. If you are using the umd version of tw-elements, the charts will be checked by initTE method that is called automatically. If you are not using the cdn file, please check which version of tw-elements is installed (check in node_modules or package.lock.json).
• does the build fail in your local environment aswell? Components are working properly?

[manzanotti]

Hi. Thanks for the reply. I apologise, however, as I haven't described my situation clearly enough.

You are correct that the current main branch links to tw-elements on a CDN. This was done to minimise hosting costs. However, the styling on my site has broken as the filenames and locations have changed with beta 2, as you pointed out.

I have a pull request in for my site where I move tw-elements to a dependency. I thought that with tree-shaking, the increase in file size wouldn't be that great (as I'm only using two components).:

https://github.com/manzanotti/saferstreetmaker/pull/135/files

I could have just updated the site to link to the new locations of beta 1 on the CDN, but thought I should move to the new beta.

I have updated my typescript file to initialise the components:

initTE({ Tab, Modal }, true);

The build fails locally, with the same error message about the chart file being missing. Though I can run the site using parcel.js locally, and that works perfectly, including all the components.

This is the first time I've used either parcel.js or tailwind.css, so I assume that I'm doing something wrong here. I'm in that situation where I don't know enough about either of them to know which one I've set up incorrectly.

As I said, I would have thought that if I am not initialising a chart component, then it shouldn't be needed when producing the build. I accept that it is possible that I have got my project set up incorrectly, and that's why parcel appears to be attempting to bundle the charts file into the build. But could it be possible that tw-elements has a hard dependency on charts.js?

[juujisai]

Could you try setting type="module" to package.json? Is Modal and Tab working without initTE?

[manzanotti]

The setting doesn't seem to make a difference.

If I comment out initTE, then the modal windows still show (though I think I'm just using the css for them), but clicking on the tabs does not work.

I can, in fact, just remove Modal completely from initTE, and they still display correctly (which makes sense).

[juujisai]

If the modal is working properly without initTE method this means your app is most likely using the umd version of tw-elements. Without initTE method the autoinits (inits via data attributes) are not beeing added in es format.

I have few questions that could help to locate the problem:

• the change in settings in package.json (type="module") didn't make the behavior change? It should make the package use the tw-elements.es.min.js and not look for charts.js file. Maybe it will show the imported one in you browser devtools (i.e. card Sources for chrome => look for js files from tw-elements)
• on the other hand, did a console in local environment show anything? In umd format the initTE method is not available to import so it should show an error
• although I'm not a fan of this solution, could you check if instead of importing the elements from tw-elements , changing it to `tw-elements/dist/js/tw-elements.es.min.js changes anything?
• another thing to try is to not use the initTE method and try initing the components by javascript ( const myModal = new Modal(document.getElementById("myModal"), options); )