VS Code module error TimelineMax from GSAP - javascript

It might sound nooby, but I do not know what's the problem and I searched for hours for an answer on the internet. I am using React with VS Code. When I want to use MagicScroll with GSAP (TimelineMax, TweenMax) to scroll to the next anchor/section direcly on my website, in the VS Code terminal appears "Module not found: Can't resolve 'TimelineMax' in 'C:\Users\marcv\webapp\src'". I have installed with npm the following: magicscroll, gsap, greensock, scrollmagic-plugins, scrollmagic-plugins-gsap. But the error doesn't go away even though I see everywhere that gsap package contains the timelinemax package. Am I right? I'm quite new in this field.
Thanks a lot for your time and if you have any question or need more information, feel free to ask.
Specifically, I want to use this: codepen.io/andystent/pen/GRgjBdJ?editors=0010.
I see at the settings that I need those 5 external scripts. So what do I need to install to have TimelineMax package?

Related

React native is unable to find modules that definitely exist

So after playing with Expo for a bit I've decided that I'd rather develop with the option for native features if needed.
I've followed all the steps here: https://reactnative.dev/docs/environment-setup and double checked them.
I ran npx react-native init <myprojectname> which was create successfully. I've then copied my minimal existing code to my new project, and now I can't run the app. I was able to run my code when it was on expo, and I was able to run the initial native setup before copying my code.
The issue doesn't seem to be related to the code itself though. Maybe some configuration?
It says it is Unable to resolve module.. and that None of these files exist.
These files most definitely exist.
I've tried cleaning the app's cache from my phone. Completely deleting it and reinstalling.
I've tried renaming my screen name from HomeScreen.tsx to HomeScreen.native.tsx.
Nothing seems to work. What is the issue here?
This is the error screen
And this is my files structure:

How to resolve a missing library on react-native?

Image libraries
Image Error
I'm following this tutorial https://www.youtube.com/watch?v=Ov3Z3vD5zFw&t=202s to make a Chat App, i didn't change any part of the tutorial but i got this error. The only difference between the tutorial and my code is his project was made on Expo, and mine was make normally.
I uninstall and reinstall the #react-navigation/stack, and update it, but now i don't know what to do.

Vue website complains that JavaScript isn't enabled after Vuetify is added

So this is abit of a tough one for me as this is a new learning curve and I'm not entirely sure how to debug it.
I'm following a tutorial listed Here but I made to to where we add navigation to the main page and started up the app to see how it looks and noticed a blank page. I copied the tutorial code eventually and double checked my javascript settings and ensured it is on. I started a new project and it worked fine showing the base template but after adding Vuetify, the page turned blank with
We're sorry but meal-prep doesn't work properly without
JavaScript enabled. Please enable it to continue.
in the console.
I know questions like this are not allowed but I'm not quite sure what else to look for.
If someone could point me in the right position or needs to see any specific file, ill add it.
Thanks
Going in order of #skirtle questions,
I created the project by using vue create in my terminal.
I started the app after that and it showed the default Vue home page. I then stopped the server then installed Vuetify by using vue add vuetify. After this however is when my problem starts. I started up the app again and the default vue home page is just a blank page and the html in the dev console is as follows.
There were no changes made besides installing this plugin.
My versions are as follows
Vue - vue#2.6.10
Vue CLI - #vue/cli 4.0.5
Vuetify - vuetify#2.1.6
I'm getting a warning in my VSCode terminal, which states
warning in ./src/plugins/vuetify.js
"export 'default' (imported as 'Vuetify') was not found in 'vuetify'
And in my web console
Uncaught TypeError: Cannot read property 'extend' of undefined
at Module.srcMixinsThemeableIndexTs (vuetify.js?ce5b:33332)
at webpack_require (vuetify.js?ce5b:30)
at Module.srcComponentsVAppVAppTs (vuetify.js?ce5b:380)
at webpack_require (vuetify.js?ce5b:30)
at Module.srcComponentsVAppIndexTs (vuetify.js?ce5b:465)
at webpack_require (vuetify.js?ce5b:30)
at Module.srcComponentsIndexTs (vuetify.js?ce5b:28810)
at webpack_require (vuetify.js?ce5b:30)
at Module.srcIndexTs (vuetify.js?ce5b:30337)
at webpack_require (vuetify.js?ce5b:30)
I hope this gives a better insight to my problem.
I was able to reproduce the same problem with Vue CLI 3.8.4.
It would seem that you're running into an incompatible combination of options. I don't exactly know where the fault lies but the tutorial you are using encourages a lot of custom configuration options, which makes it more likely you'll fall through a crack. It also makes it much more difficult to give an answer as the answer to some extent depends on exactly what combination of options you choose.
Nevertheless there does seem to be a bug somewhere here, though I'm unclear exactly which bit it buggy. My guess would be the Vuetify CLI plugin.
This bug report seems somewhat related:
https://github.com/vuetifyjs/vuetify/issues/9184
The simplest way to fix it seemed to be to edit the file vue.config.js and remove the line:
transpileDependencies: ["vuetify"]
However, that's no good if you actually do want to transpile Vuetify.
This is where it gets really complicated and it depends a lot on exactly what settings you want.
In the file src/plugins/vuetify.js you should find two lines like this:
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
That won't work with transpiling.
There are a few possible ways to go here but try changing them to:
import Vuetify from "vuetify/lib";
If you start the server you may see another error:
Failed to resolve loader: sass-loader
You may need to install it.
There are some instructions for how to solve that problem in the Vuetify installation guide:
https://vuetifyjs.com/en/getting-started/quick-start#webpack-installation
However, rather than trying to do all of this manually, you will likely find it easier to go back to the CLI and create a project with a different combination of options. Without spending hours and hours trying all the different permutations I can't say for sure exactly what does and doesn't work but from a quick experiment it seemed that enabling CSS Pre-processors during the project creation makes the sass-loader error go away.
It happened the same to me and I realized that I had only download it in the CLI complements but forgot to add it.
To do so write in the terminal:
vue add vuetify

How do I install freedraw for leaflet?

I need to get a leaflet freedraw plugin to work with my project. But I have no idea how to do that because there is no real tutorial about how to do it on the entire internet it seems. What are the steps to get the plugin to work with the project? I've visited the project's GitHub page but there is no tutorial either. What I need to do before I can just sit and write the code? I'm honestly trying to fix this for like two days but there's just nothing to start from including old questions from Stack Overflow with zero answers...
I've tried to install the plugin with ndm which gave me a bunch of errors with no results. Even after that, I had no idea how to connect the plugin with my project or what to do... I also tried installing the freedraw plugin with Bower which installed some files, but still, I had no idea how to get them to work with my project.
Leaflet freedraw plugin - https://github.com/Wildhoney/Leaflet.FreeDraw
Someone, please help I'm definitely not the first one waiting for full working step by step tutorial on how to get it running with leaflet.
If you don't use npm or bower you can load the plugin directly like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.freedraw/2.0.1/leaflet-freedraw.web.js"></script>
Invocation is as per the GitHub page
const freeDraw = new FreeDraw({ mode: FreeDraw.ALL });
map.addLayer(freeDraw);
Add options as required.

WebStorm 2016.3 + Electron: Unresolved function or method

I am playing around with Electron and WebStorm as part of a project preparation and I am struggling with different problems. Therefore I want to start simple by creating very basic stuff and working my way up.
So I have a very simple project setup in WebStorm and my first Electron app is running. But WebStorm keeps saying that it cannot resolve function names.
Electron and electron-prebuilt are added to the package.json and Node.js coding assistance is enabled. Therefore require('electron') is recognised correctly.
I saw the blog entry by JetBrains on how to start with Electron in WebStorm and found also another similar answer here on StackOverflow.
JetBrains' blog entry
StackOverflow answer
It is said, that one should add github-electron to the JavaScript library from the communitie-stubs repositories. But these seems outdated, as there is no github-electron anymore and all other electron entries are ambiguous.
So my question is: How to setup WebStorm for plain JS ES6 correctly, beginning by eliminating the "unresolved" messages?
So, after digging into the topic more and more and climbing the steep learning curve, I finally found the answer by myself.
Here we go:
Go to WebStorm's Preferences / Languages & Frameworks / TypeScript
Make sure Use TypeScript Service is enabled
Open up WebStorm's Terminal panel (as it will automatically point to your project's working directory) and install the type definitions for TypeScript via NPM:
npm install #types/electron
You don't need to use the --save / --save-dev tags, as the types are needed solely for WebStorm's code assistance and have no impact on your project.
You'll get a new entry inside your node_modules folder containing the type definitions.
And that's it. WebStorm does not show any unresolved function or method messages for this particular module anymore.
This works for theoretically every other module, as long as there are type definitions available. But chances are good, as there are a lot of them. Way more than what WebStorm's JavaScript library download functionality offers.
Have a nice day, everyone!
Martin
install the electron library. Since the github-electron has renamed to electron.

Categories