Can't use lib after import via npm - javascript

I'm trying to use flexibility lib inside my Laravel projet. So I ran npm i flexibility --save and require it inside my app.js file:
require('flexibility/flexibility.js');
...
flexibility(document.documentElement);
But I receive an alert:
Uncaught ReferenceError: flexibility is not defined

Require the name of the package, and set it in the window object
In bootstrap.js
window.flexibility = require('flexibility');
And in app.js or from the console
flexibility(document.documentElement);
Hope this helps

Related

Can I import npm packages dynamically from CDNs in Webpack?

I need to require a different version of Zoid npm package dynamically in my JS bundle, depending on a variable. So for example:
if (isLatestVersion) {
zoid = await import('https://unpkg.com/zoid#9.0.80/index.js')
} else {
zoid = await import('https://unpkg.com/zoid#9.0.31/index.js')
}
However when I try the above I get this error:
script.js:2 Uncaught (in promise) Error: Cannot find module 'https://unpkg.com/zoid#9.0.80/index.js'
at webpackMissingModule (script.js:2)
Presumably this is because I don't have zoid defined in my package.json.
So basically my question is, is there's a way to import libraries from a CDN such as unpkg.com or skypack.dev, using Webpack's dynamic imports (aka code splitting)?
The way I ended up solving this was by adding two versions of the same package in my package.json. So I ran these commands:
yarn add zoid9080#npm:zoid#9.0.80
yarn add zoid9031#npm:zoid#9.0.31
yarn remove zoid
Then I imported these two packages statically, since I didn't actually need dynamic importing, and the code ended up being simpler as well:
import zoid from 'zoid9080';

Webpack/jQuery: "Uncaught ReferenceError: $ is not defined" when importing other modules

I have a project that I'm using Webpack for, and I am trying to use the autocomplete feature of jQuery-UI. However, whenever I import jQuery-UI into my app.js file using `import 'jquery-ui/ui/widgets/autocomplete', it breaks jQuery and I get the error:
Uncaught ReferenceError: $ is not defined.
The problem was fixed when I changed import 'jquery-ui/ui/widgets/autocomplete into require(jquery-ui/ui/widgets/autocomplete) in my apps.js file (or index.js or whatever your entry file for Webpack is).
Again, I have no idea why this works, but it does, and I can't argue with that.
Thanks to https://stackoverflow.com/a/42465244/10757677 for the inspiration.

How to configure webpack for path resolver to use dependency which is an internal dependency of another dependency?

I have a project (named xProject) setup as depicted in images below. As we can see a module named utils.js under commons/ is importing uuid module but it is not installed as a dependency in commons/pacakge.json. I have added commons as dependency in web/package.json: "commons": "file:../commons". When I import utils.js into a module MyModule.tsx under web/, it complains about following ERROR:
ERROR in ../commons/utils.js
Module not found: Error: Can't resolve 'uuid' in '/Users/xuser/myfolder/xproject/commons/'
I want webpack to use uuid from other dependencies whose internal dependency is 'uuid'. Is it possible? If yes, how? For example, node-sass is a package which has uuid as an internal dependency.
I did look for the solution whole last day but unfortunately I didn't get it working.
Thank you in advance for your help.

Importing tex2max.js into an angular project via npm / index.html

When I try to import tex2max using declare var tex2max: any; I get a ReferenceError: tex2max is not defined. But this doesn't occur with other npm packages. I have tried binding the scripts by installing the npm package and through the script tag in index.html to no avail.
Here is a CDN file of the source code:
https://unpkg.com/tex2max#1.3.0/lib/tex2max.js
If the project author corrected their bundle a little you could do:
import TeX2Max from 'tex2max';
But that ends in error [EDIT: on stackblitz]
Error in /turbo_modules/tex2max#1.3.0/lib/tex2max.js (13:28806)
Cannot assign to read only property 'exports' of object '[object Object]'
The best option is to file an issue with the author.
Stackblitz example

VueJS CLI function not available

i'm new to VueJS CLI webpack.
I want to globally include my javascript files.
my main.js:
require('./assets/css/main.css');
require('./assets/js/vendor/jquery-2.2.4.min.js');
require('./assets/js/vendor/TweenMax.min.js');
require('./assets/js/vendor/device.min.js');
require('./assets/js/functions.js');
In functions.js i'm using functions from all of the libraries(jquery,device.js...)
I get the error:
Uncaught ReferenceError: TweenMax is not defined
...
Why cant i use the libraries in functions.js ? i'm confused.
Thanks in advance
That doesn't work because of how vue and webpack handle assets and static files.
Usually you would just install your module via npm like:
npm install gsap --save
That's for TweenMax you tried to use. You'll find it on npm here.
Then in the .vue file where you want to use it, you would just import and use it:
<script>
import {TweenMax} from 'gsap'
export default {
methods: {
myMethod () {
TweenMax.to()
}
}
}
</script>
If you want to use them in several components you could consider adding them as instance properties. Then you don't have to import them manually all the time.

Categories