typewritten-text icon indicating copy to clipboard operation
typewritten-text copied to clipboard

Install through NPM gives an error. Please help!!

Open bettermanagenow opened this issue 4 years ago • 2 comments

In my repo when I include the CDN links, typewritten-text tag works in my markdown. But this approach raises other issues to fix in Google Search Console as the pages do not load some packages. So, it seems this is not the right approach.

But when I install through NPM it gives the following error only for the js file and not for the css file:

Error: File to import not found or unreadable: @auroratide/typewritten-text/lib/define.js

I re-did the whole thing again thinking of some error but still, the error persists. The files are there in node_modules and the packages are also visible in the .package-lock.json

Could you please offer some solution?

bettermanagenow avatar Sep 12 '21 07:09 bettermanagenow

Based on that particular error, my hypothesis is the JS file is being imported into or being interpretted by a CSS preprocessor instead.

I do not know how your app is set up, but the CSS file should be imported in your root CSS file, and the JS file should be imported in the root JS file. For example:

/* main.scss */
@import "@auroratide/typewritten-text/lib/style.css"
// main.js
import '@auroratide/typewritten-text/lib/define.js'

If it is not the case that the JS file is being interpretted by CSS, then to figure things out further would require either more logs or more details about your app's configuration (eg. a webpack file).

Auroratide avatar Sep 12 '21 13:09 Auroratide

Based on that particular error, my hypothesis is the JS file is being imported into or being interpretted by a CSS preprocessor instead.

I do not know how your app is set up, but the CSS file should be imported in your root CSS file, and the JS file should be imported in the root JS file. For example:

/* main.scss */
@import "@auroratide/typewritten-text/lib/style.css"
// main.js
import '@auroratide/typewritten-text/lib/define.js'

If it is not the case that the JS file is being interpretted by CSS, then to figure things out further would require either more logs or more details about your app's configuration (eg. a webpack file).

Thank you so much for the quick reply. I tried everything as suggested by you. I put the js file in the root main.js of my project. I referred it from the plugin directory. But still it doesn't seem to work. However, the CDN thing works. My project is a GoHugo website. You may like to know anything further. Thanks 👍

betterify avatar Sep 13 '21 06:09 betterify