I'm New to Vue can u please anyone help with this error?
whenever i run script watch it return x (vue) unknown Tranform 'collections'
whether it is an problem with my api ?
Related
I want to use <docs> blocks in my *.vue files to add documentation to components.
These blocks are correctly interpreted by vue-docgen-cli, but file compilation fails because vite is reading inside the block. For example, compilation of this SFC file fails with error: Uncaught SyntaxError: Unexpected identifier 'is':
<docs>
This is my component.
</docs>
<script setup lang="ts">
. . .
</script>
Is there a way to make vite ignore <docs> blocks? There is vite-plugin-vuedoc that seems useful, but the package does not install.
Thanks for your help!
mario
Environment
vue 3.2.45
vite 4.0.0
Windows 11
node 18.12.1
You will probably need to use a plugin for that.
Vite plugins are compatible with rollup plugin structure, so you may be able to use the rollup-plugin-re plugin to remove the desired content using a regexp. You could also write your own plugin that does exactly what you need.
Found a way. In vite.config.ts add the following code (from https://github.com/vitejs/vite/discussions/9301#discussioncomment-3224059):
const vueDocsPlugin = {
name: 'vue-docs',
transform(_code: unknown, id: string) {
if(!/vue&type=docs/.test(id)) return
return `export default ''`
}
}
Then in the plugins array add vueDocsPlugin.
Someone can tell me if I can add var on project name please ?
project = "${var.env}"
error output when using waypoint init
[xxxx#xxxx finess-api]$ waypoint init
❌ Error loading configuration!
! /home/xxxx/waypoint.hcl:2,25-28: Unknown
variable; There is no variable named "var"., and 1 other diagnostic(s)
! Project had errors during initialization.
Waypoint experienced some errors during project initialization. The output
above should contain the failure messages. Please correct these errors and
run 'waypoint init' again.
variable env {
type = string
default = ""
}
Thx
It's not possible to template the project name; however instead of templating the project name, I recommend using workspace-scoped operations, with one workspace for each "env" you're using.
https://developer.hashicorp.com/waypoint/docs/lifecycle/scope
When a component errors in storybook you only get the line number where it died in the main.iframe.bundle.js file. How can I get it to give me the line number in the original source file? Is there an option to have it generate & use some kind of sourcemap?
Are you using typescript ? Are you using React or something else ?
On my storybook, I use React with Typescript. If I put an error like that:
export function BookList (p: BookListProps) {
// ...
throw new Error('hey')
return (
//...
);
}
I have this error embed in the document (is that what you meant ?):
But I do have something useful in the console:
When clicking on the link, it open the sources panel in chrome dev tools.
I just started experimenting with Nativescript and am using the Playground to test things and see how it works.
What I wanted to do: add the moment.js module for formatting date/time
What I tried:
1. added the moment package. This appears to have worked because Playground now shows the moment folder along with files (package.json, ender.js, moment.js, etc) and subfolders.
2. In my code I used this snippet to require "moment"
var Moment = require("moment");
This failed though because I get an error of
Error: Could not find module 'moment'. Computed path '/var/mobile/Containers/Data/Application/xxxx/Documents/Playground/LiveSync/app/tns_modules/moment'
Any suggestions on what I need to change to get it to find 'moment'? I checked in package.json and it has the name as "moment".
The default require statement will search for the module form the tns_modules directory that was packed with the app during build time. So with Playground you could use relative path.
For example, if you want to use it on app.js which is in the root level,
var Moment = require('./moment');
You know, I spend more time just trying to get things set up to work with Angular than I do actually developing with Angular. There must be an easier way... :(
Currently, I am using the aspnetcore-spa template, creating a project with the command "dotnet new angular" - this is version 1.0.3, which adds Angular 4.1.2 to the npm dependencies. This works great to get a project running quickly. But now I want to add PrimeNG to take advantage of their form controls. I have been struggling with this all day, and would love it if anyone could provide some assistance.
Here is what I have done in my current effort (the latest of many, starting fresh each time):
1) Added to the package.json file: "primeng": "4.1.0-rc.2"
2) Added 'primeng/primeng' to the webpack.config.vendor.js file's vendor collection.
3) Added the following to my test module (which is in turn referenced in app.module.shared.ts so I can route to it via my RouterModule):
import { FileUploadModule } from 'primeng/components/fileupload/fileupload';
And in the html for the module, in an attempt to use the file uploader control, I have (from their site - https://www.primefaces.org/primeng/#/fileupload):
<p-fileUpload name="myfile[]" url="./upload.php"></p-fileUpload>
4) ran "webpack --config webpack.config.vendor.js" from a command prompt at the root of the project folder, which completed with no errors.
Then I hit F5 to run the project, and I got this error:
Exception: Call to Node module failed with error: Error: Template parse errors:
'p-fileUpload' is not a known element:
1. If 'p-fileUpload' is an Angular component, then verify that it is part of this module.
2. If 'p-fileUpload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. (" type="button" (click)="onclick()" class="ui-button-info" label="Click Me">Click Me</button>-->
So, in an effort to comply, I added a reference to the ngprime module to the app.module.shared.ts file, like this (I don't really know how I should reference the module...):
import { FileUploadModule } from 'primeng/primeng';
But got the same exact error.
What am I missing???
Any help would be most appreciated.
I finally have this working, using the asp-prerender-module to get server-side rendering, and not having to rely on the asp-ng2-prerender-module (see my last comment). The trick, I found, was to reference the FileUploaderModule in the app.module.shared.ts file like this:
import { FileUploadModule } from 'primeng/components/fileupload/fileupload';
rather than like this:
import { FileUploadModule } from 'primeng/primeng';
The reason this matters is that the latter method of referencing will load all other components as well (see explanation here: https://www.primefaces.org/primeng/#/setup), and SOME of the PrimeNG components can not be rendered on the server due to DOM-related references (things like "window", which do not exist on the server). See the discussion here for more on this: https://github.com/primefaces/primeng/issues/1341
This change, combined with the other steps listed in my answer and, of course, actually referencing the directive in app.module (thank you #pankaj !) made everything work correctly at last. Only took me about 7 hours to figure it out. :(