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
Related
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:
I have a React application, and a bunch of no-unused-vars in the console when running it getting me nuts, so I'm kindly asking you folks to share your experience: are there any such tools or no.
Screenshot of the console:
When projects get large its a pain to manage old code, what I did is to write a script to find unused exports (these will not be picked up by eslint) it should show you where you have a export that is not imported anywhere
just run:
npx dead-exports
assuming that your code is in ./src
read more here:
https://www.npmjs.com/package/dead-exports
Use vs code with and ES7 React/Redux/GraphQL/React-Native snippets proper code formatter like prettier and you will find unused components in different color as compared to used component
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?
I am quite new to react (and still learning), so I apologize if the problem is too basic.
I have created a shoe store App (inspired by this tutorial on React Router v6)
The problem I am facing is that the App works perfectly on development build.
But when I create a production build (yarn build) and serve it using npx serve -s build, I get an empty page
The console gives an error that shoeData (a javascript object on a separate shoeData.js file with named export.) is not defined. There was no such error on development build. In fact, just before the errors on the console in the production build, an array has been logged twice using the following code
console.log(Object.keys(shoeData).filter((productId) => shoeData[productId].featured));
The above code uses the shoeData object, therefore the object is available to the component at least initially.
I have also modified the package.json to add "homepage": "." since people have solved similar issues using this fix, but it doesn't work in this case.
The complete project is available on GitHub here
Any help in this regard would be highly appreciated
What I can see on url is that, ReferenceError: shoeData is not defined is being shown. Please look after it.
I'm also looking what's the reason just cloning the repo
This line looks weird，you should pass string to src rather than require a file.
I just clone the repo and make sure the problem is cause by require().
Steps to fix:
Move images/ into public/ folder
Replace all require('...').default with image url, such as /images/${shoeData[productId].gender}/${productId}/01.jpg.
Remove homepage field from package.json
So I was starting researching about angular2 and since I saw so many references to typescript being prefered I am trying to switch to it from javascript. Problem is, I saw a nice little guide I could follow to install it all in eclipse (angular, javascript, everything needed to launch the 5 minute guide code on the main page of angular), so I did it and managed to get it to work.
Now I would like to do the same with typescript, but I find myself lost since it doesn't seem to be working, I can't launch code, it's like node.js isn't working anymore, but since I do not know what the expected result is, I am not sure what is missing.
For example, I re did the 5 minute guide and notice as a difference that I do not have the installation of the modules, nor any run-as configuration ready, in fact, I can't manage to run as any typescript code I try to do.
What I did was:
1- Install Eclipse Mars, other guys uses older versions
2- Install Node.js
3- Install WildFly Server
4- Install TypeScript plugin https://marketplace.eclipse.org/content/typescript
5- Import my project in eclipse, you may have to create a new static web project and add your files in there. The 5 minute quick start is not an eclipse web project so you may not be able to import this. Do not forget to copy and past the same structure with the node modules that you have
6- Right click on the project > Configure > Enable Typescript Builder
7- Right Click the project > Properties > TypeScript > Compiler and configure as follows:
I hope this will do it for you.
Remember, this plugin does not respect json configuration file, so you have to do this manually as in the screenshot. Also, if you are going to provide arguments to your component constructor, You will have errors. Let me know if you got those. Another thing to mention is that using some annotations like #Input will not work, you will have to use inputs:[] inside your #Component annotation.
You can try to add those plugins on top of Mars:
https://github.com/angelozerr/angular2-eclipse
https://github.com/angelozerr/typescript.java
Those 2 are incubating but already provide good features. There is another one, that I didn't try but which has some popularity:
https://github.com/palantir/eclipse-typescript
Eclipse >= Neon
sudo npm install -g angular-cli (ng help must work)
See: https://github.com/angelozerr/angular2-eclipse
Install it and restart Eclipse
Open a .ts file
Eclipse Oxygen
Default javascript installation, then added the default free plugin for angular 2 / typescript from here:
angular2.ide - http://oss.opensagres.fr/angular2-eclipse/1.3.0/
After installing I opened an existing Angular 4 / TS project, worked fine. I then installed support for .scss from http://www.liclipse.com/text/updates. All setup and configured with Typescript 2.4.1 / nodejs v6.9.4.
But within days it now fails to open .ts files at all. Re-installation of the ng plugin did not fix it, I uninstalled liclipse plugin and no change either. It basically leaves eclipse unusable for ng4 projects as is.
The logs show the following errors.
org.eclipse.core.runtime.CoreException: Plug-in "ts.eclipse.ide.jsdt.ui" was unable to instantiate class "ts.eclipse.ide.jsdt.internal.ui.editor.TypeScriptEditor".
at org.eclipse.core.internal.registry.osgi.RegistryStrategyOSGI.throwException(RegistryStrategyOSGI.java:194)
at org.eclipse.core.internal.registry.osgi.RegistryStrategyOSGI.createExecutableExtension(RegistryStrategyOSGI.java:188)
at org.eclipse.core.internal.registry.ExtensionRegistry.createExecutableExtension(ExtensionRegistry.java:905)
...
Caused by: java.lang.NoClassDefFoundError: org/eclipse/wst/jsdt/ui/text/JavaScriptSourceViewerConfiguration
at java.lang.Class.getDeclaredConstructors0(Native Method)
at java.lang.Class.privateGetDeclaredConstructors(Unknown Source)
...
Caused by: java.lang.ClassNotFoundException: An error occurred while automatically activating bundle org.eclipse.wst.jsdt.ui (441).
at org.eclipse.osgi.internal.hooks.EclipseLazyStarter.postFindLocalClass(EclipseLazyStarter.java:112)
at org.eclipse.osgi.internal.loader.classpath.ClasspathManager.findLocalClass(ClasspathManager.java:529)
...
Caused by: java.lang.ClassFormatError: Name index 1 in LocalVariableTable has bad constant type in class file org/eclipse/wst/jsdt/internal/core/JavaModelManager
I found
TypeEcs plugin for Typescript
it provide below.
•Syntax highlighting
•Code Completion
•Code Outline
•Find References
•Rename / Refactor
•Open Type
•Code Compilation
•Format Code
•Comment Code
•Open Declaration
•Mark Occurences
•Type Script Debug