I try to migrate a large existing codebase from Vue2 to Vue3 using Webpack. So I upgraded the necessary packages in package.json to looks like this (no problems here):
"vue": "^3.2.45",
"#vue/compat": "^3.2.45",
"#vue/cli-plugin-babel": "^5.0.8",
"#vue/cli-plugin-eslint": "^5.0.8",
"#vue/cli-plugin-typescript": "^5.0.8",
"#vue/cli-plugin-unit-jest": "^5.0.8",
"#vue/cli-service": "^5.0.8",
"#vue/compiler-sfc": "^3.2.0",
"vue-class-component": "^8.0.0-rc.1",
"vue-loader": "^17.0.1",
...
Now the Webpack build always fails with the error: "At least one template or script is required in a single file component.", no matter which single file component it tries to compile.
So I debugged the source of the error, which is the #vue\compiler-sfc\dist\compiler-sfc.cjs.js), and found out, that the the function parsing the component file gets called twice. First time with the actual code of my component, which works perfectly fine. Then a second time with an already compiled version which looks like this:
import { render } from "./deploymentInfos.vue?vue&type=template&id=1ced640a&ts=true"
import script from "./deploymentInfos.vue?vue&type=script&lang=ts"
export * from "./deploymentInfos.vue?vue&type=script&lang=ts"
import exportComponent from "\\node_modules\\vue-loader\\dist\\exportHelper.js"
const __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__file',"/deploymentInfos/deploymentInfos.vue"]])
/* hot reload */
if (module.hot) {
__exports__.__hmrId = "1ced640a"
const api = __VUE_HMR_RUNTIME__
module.hot.accept()
if (!api.createRecord('1ced640a', __exports__)) {
api.reload('1ced640a', __exports__)
}
...
Of course it fails to parse <script> and <template> from this and throws the error.
I assume I have some kind of misconfiguration but am not able to find it. Does anyone have clue where to look?
Solved ✓
The problem was that another webpack plugin also used the vue-loader. That was where the second call to parse the file came from.
So if you encounter the same error message, try checking your webpack config if there are multiple usages of vue-loader.
Like the question says, I was following a tutorial and it was working fine so I wanted to implement it into my own side project app.
After adding it exactly the same as the doc says the component in the <Stack.Screen/> won't load.
I have tried multiple things but nothing seems to work. No errors either so I'm stuck on how to debug.
As I don't know which part of my code is causing the problem I will post my github repo link here.
https://github.com/totablue/ToyBoxOfWords
Answering my own question.
The thing that was causing my app to get stuck on the splashscreen was the SplashScreen.preventAutoHideAsync()
that was called while the app was loading the font.
const onLayoutRootView = useCallback(async () => {
if (fontsLoaded) {
await SplashScreen.hideAsync();
}
}, [fontsLoaded]);
this part of the code was not running so the splash screen never went away.
Used this video to load custom fonts in a different way and it fixed everything.
https://youtu.be/viIkcDYSBrI
I have tried to run your code, and it worked well. The problem is that you have not added some dependencies!
This is the package.json file that I use with your code.
{
"dependencies": {
"expo-font": "~10.2.0",
"expo-constants": "~13.2.4",
"expo-status-bar": "~1.4.0",
"#expo/vector-icons": "^13.0.0",
"expo-splash-screen": "~0.16.2",
"react-native-paper": "4.9.2",
"react-native-screens": "~3.15.0",
"#react-navigation/native": "*",
"#react-navigation/native-stack": "*",
"react-native-safe-area-context": "4.3.1"
}
}
I'm working on a portfolio website and I need to open a resume.pdf file from local files when a button is clicked but I cant make it work. I'm using gridsome and vue.js. I tried this code initially:
<a class="cv-button float-right"
href="../assets/resume.pdf"
target="_blank">MY CV</a>
But when I hit the link(button) I get this error:
Cannot GET /src/assets/resume.pdf
and the url it goes to is:
http://localhost:8080/src/assets/resume.pdf
The problem I'm facing has been asked before:
Opening a PDF file in another window with VueJS
and Open a PDF using VueJS.
I tried to use the solutions provided but none of them actually worked and I got almost the same error every time! I have no problem loading images but this pdf file just doesn't work. The file is located in src -> assets -> resume.pdf. Please note that I tried many methods open the file but all failed, including using vue.js methods and windos.open() in javascript or the required keyword or using different ways to give the path of the source file such add #/assets/resume.pdf etc.
below is my package.json file:
{
"name": "portfolio.farzinnasiri.com",
"version": "0.0.2",
"private": true,
"scripts": {
"build": "gridsome build",
"develop": "gridsome develop",
"explore": "gridsome explore"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.28",
"#fortawesome/free-brands-svg-icons": "^5.13.0",
"#fortawesome/free-solid-svg-icons": "^5.13.0",
"#fortawesome/vue-fontawesome": "^0.1.9",
"#gridsome/source-filesystem": "^0.6.2",
"#gridsome/transformer-remark": "^0.5.0",
"gridsome": "^0.7.0",
"vue-typer": "^1.2.0"
},
"devDependencies": {
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2"
}
}
and the preview of the website is here:http://farzinnasiri.ir. Of course I haven't yet added the pdf file but theoretically when some one hits the MY CV button, he/she should be directed to the resume file in the browser...
on last thing is that I couldn't find the pdf file in the final builded project(dist folder) so maybe vue.js can't read the file in the first place!
Please give me some help here. Thank you for your attention
OK, So i fixed the problem in gridsome by simply putting my pdf files in the static directory which gridsome makes when the project is created. Gridsome puts every thing from that folder directly to the dist/ folder so I just needed to give it a path like:
<g-link class="cv-button float-right" href="/resume.pdf" target="_blank">MY CV</g-link>
those are the dependencies I'm using
"dependencies": {
"express": "^4.16.3",
"express-graphql": "^0.6.12",
"graphql": "^0.13.2",
"lodash": "^4.17.10"
}
here is my schema.js file looks like
here is the code inside my server.js file
and I recieve this error
I was facing the same issue. Here's how I managed to fix it:
const { URLSearchParams } = require('url');
global.URLSearchParams = URLSearchParams;
lodash library find methods first parameter is the data source. so URLSearchParam is mistakenly typed. be careful about auto completions of some IDEs provide. so they may fill incorrect data as you type.
using a good JavaScript linter can point you that problem. I do recommend eslint.
in this situation the data source is the variable users so replacing URLSearchParam with users solved this problem.
I have tried to apply the normal button of angular material but the ripple affect will not work at all.
Iv'e got:
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'hammerjs';
import 'web-animations-js';
import { MatCheckboxModule } from '#angular/material';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import {MatButtonModule} from '#angular/material/button';
imports: [
MatButtonModule,
MatCheckboxModule,
BrowserAnimationsModule
],
providers: [WeatherService],
bootstrap: [AppComponent, WeatherComponentComponent]
})
In the global styles.css file i have: #import
'~#angular/material/prebuilt-themes/deeppurple-amber.css';
dependancies:
"dependencies": {
"#angular/animations": "^5.2.10",
"#angular/cdk": "^5.2.5",
"#angular/common": "^5.2.10",
"#angular/compiler": "^5.2.10",
"#angular/core": "^5.2.10",
"#angular/forms": "^5.2.10",
"#angular/http": "^5.2.10",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "^5.2.10",
"#angular/platform-browser-dynamic": "^5.2.10",
"#angular/router": "^5.2.10",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.26"
"devDependencies": {
"#angular/cli": "^1.7.4",
"#angular/compiler-cli": "^5.2.10",
"#types/jasmine": "^2.8.6",
"#types/node": "^9.6.6",
"codelyzer": "^4.3.0",
"jasmine-core": "^3.1.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^2.0.2",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.6.0",
"protractor": "^5.3.1",
"ts-node": "^6.0.0",
"tslint": "^5.9.1",
"typescript": "^2.7.0"
}
HTML:
<button mat-raised-button color="primary">Button</button>
I have also tried to link the stylesheet in the global HTML - but doesn't work still.
I got the same problem and I solved the issue at the end.
I looked at several SO posts but none of them works in my case.
I'll show how I did below, so it might help anyone who came across the issue.
Context
I was working on the Tutorial: Tour of Heroes in Angular's site, so my app was fairly small and simple. To use the material components, I follow the "Getting Started" page on the Angular Material official website. I use Angular CLI, so I imported the prebuilt theme css in styles.css, imported MatButtonModule and tried <button mat-button>basic</button>, but the button ripple effect just didn't work.
Solution
In index.html add a class mat-app-background to body like this
<body class="mat-app-background">
...
</body>
And the ripple effect in button is now working!
Explanation Please
This solution is based on Angular Material Theming Guide. They have a few words about additional settings before the theming actually works:
Finally, if your app's content is not placed inside of a mat-sidenav-container element, you need to add the mat-app-background class to your wrapper element (for example the body). This ensures that the proper theme background is applied to your page.
This isn't mentioned in Angular Material's Getting Started page. So if you follow that page and test the mat-button right away, it might not work.
Does that work for everyone?
Definitely not. The solution above is more likely to work if your situation is similar to mine. But I will show you what step I did before, which leads to my situation.
I use Angular CLI to create my Angular app, and I followed the Getting Started tutorial as below:
I installed these packages: #angular/material #angular/cdk #angular/animations
I Imported MatButtonModule in app.module.ts.
In app.module.ts I have
...
import {MatButtonModule} from '#angular/material';
#NgModule({
...
imports: [
BrowserModule,
...
MatButtonModule, // import the Angular Material modules after Angular's BrowserModule, as described in the tutorial.
],
...
})
Import prebuilt theming CSS
In styles.css
#import '~#angular/material/prebuilt-themes/pink-bluegrey.css';
...
Now add the button in HTML
In app.component.html
...
<button mat-button>Basic</button>
...
And I clicked on the button and ripple effect did not work. So I got stuck here. But, a strange thing is, if I switch to the prebuilt theme deeppurple-amber.css, the ripple then works, without applying the Solution above.
If I switch to other prebuilt themes like purple-green.css or pink-bluegrey.css, ripple effect is again not working. I'm not sure what the cause is, but probably the theming is still not configured properly so things become unpredictable. Sometimes it works, sometimes it doesn't, which is not a good sign, so let's proceed to the next step.
If your ripple effect did not work so far like me, follow the information in Solution and the instructions in Theming Guide. According to the theming guide, you either need the element mat-sidenav-container or the class mat-app-background to make material theming configured properly. Then finally, the ripple effect should work now.
Not a solution for OP, but this is what's been causing it for me:
Make sure the BrowserAnimationsModule is imported:
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
...
imports: [
BrowserAnimationsModule
],
...
})
The project I'm working on had the NoopAnimationsModule included, remove this first; you can't add them both.
For me it was an easy mistake to make if you skim the documentation. This was my problem...
This:
#import '~#angular/material/prebuilt-themes/pink-bluegrey.css';
Was here:
The Component or Module .scss files...
But needed to be here:
The styles.scss file found in the /app directory.
I had the same problem. When, I created buttons using material, the ripple effect was not happening. Later, I found that I did not include any style-theme in the project. So, it's a very basic but most essential thing to check when you are going to start a project in Angular-Material to include at least its pre-built theme style sheet. Then, you are not going to miss the ripple effect. This was my solution to my problem.
Make sure you have MatRippleModule imported into the module of that component
Okay I think I may have found some bug in angular as I was able to track the cause. It was due to usage of variable inside here: {{forecasts.list[0].dt}} Temperature (celsius): {{ weathers.main.temp }} . - So basically using {{ weathers.main.temp }} within that broke the animations in the entire page. –