I am currently starting my first Vue3 project (I have done many Vue2 projects) and am currently facing errors when importing components.
In vue2/webpack, I was used to doing imports like this (in fact, phpstorm/webstorm is importing them for me like this)
import PageBase from "./components/PageBase";
This however yields
[vite] Internal server error: Failed to resolve import "./components/PageBase" from "src/App.vue". Does the file exist?
At first, I thought that it was due to the # vs ./ notation.
But later I noticed that it is actually about the .vue extension at the end.
import PageBase from "#/components/PageBase.vue";
and
import PageBase from "./components/PageBase.vue";
work just fine.
Is this the desired behaviour?
Its a bit confusing and inconvenient, as my IDE is importing it by default like this.
Ps: I am using an out of the box Vue3 setup like here: https://vuejs.org/guide/quick-start.html#with-build-tools
Thanks for any clarifications.
Related
I have a fresh MeteorJS project and I have only installed chessboardjs and chessjs as follows
meteor npm install --save chessboardjs
meteor npm install --save chess.js
In my client main.js I have also imported the above packages as follows;
import Chessboardjs from 'chessboardjs';
import Chessjs from 'chessjs';
According to chessboardjs documentation, the way to display a board is as follows;
For html
<div id="board1" style="width: 400px"></div>
and for JS
var board1 = Chessboard('board1', 'start')
My question is how do I get to display this in MeteorJS and how do I get the two chess npm packages to work together?
Any working examples will be highly appreciated.
Maybe I should also mention that the whole purpose is to have a two player game.
There are three issues here.
Imports typo
importing css
Rendering
First your imports and the function you call need to be the same. You imports are
import Chessboardjs from 'chessboardjs';
import Chessjs from 'chessjs';
but they should be
import Chessboard from 'chessboardjs';
import Chessjs from 'chess.js';
Second, the npm package import usually not automatically imports the css as well. You need to actively locate it's path within the node_modules/chessboardjs folder and import it:
import 'chessboardjs/www/css/chessboard.css'
Finally, the Chessboard function can't inject code into the DOM, if the target element (the div with id board1) has not been rendered, yet.
To fix this you need to call it within onRendered:
Template.myTemplate.onRendered(function () {
var board1 = Chessboard('board1', 'start')
})
It won't work in onCreated, because the onCreated callback is called before the first time the Template has been rendered.
See http://blazejs.org/api/templates.html#Template-onRendered
I have a Vaadin7 application I am trying to move to Vaadin12 and there is a line of code where I call VaadinServlet.getCurrent() to get the servlet ( I actually need to configuration information ). It is returning null. What is happening and how can I fix?
Obviously, this line of code works fine in Vaadin7.
Ok, it was a simple solution: I just had to change import com.vaadin.server.VaadinServlet; to import com.vaadin.flow.server.VaadinServlet;. There is a addon we use that seems to reference vaadin 7 stuff, and thus neither of us noticed the wrong import statement. Either we should have stopped using this addon or updated it to the latest version.
Lesson to learn from this: make sure you are no referencing Vaadin 7 via depencies in your pom, I guess.
I installed bootstrap-colorpicker npm package and I'm trying to import to my meteor app.
I did read "Using npm packages" and I tried to use their example: "import moment from 'moment';". but the problem is the there is a hyphen/dash in the middle of the name and it throws an error.
where should I look in the package to know how to import a npm package?
here is what i did:
import bootstrap-colorpicker from 'bootstrap-colorpicker';
Template.Test.onRendered(function() {
$('#m-color-picker').colorpicker();
});
I want the #m-color-picker to turn into a color picker, but it gives me error for the hyphen/dash.
You can use any name you like for the module in your code, eg
import bootstrapColorpicker from 'bootstrap-colorpicker';
or
import colorpicker from 'bootstrap-colorpicker';
Easy as that
For the second part of your question:
Usually the 'getting started' part of the README file should tell you how to import a module, although some older packages only mention how to require a package, which I presume is where you are coming from.
Quite often the default export will be what you need, so for example, referring to the momentjs web site:
var moment = require('moment');
You can usually assume this:
import moment from 'moment';
Basically this is taking the top level object from the module.
Your specific package doesn't seem to export anything, but just has some side-effects (perhaps it monkey-patches itself into jQuery?), so you can even drop the first part of the import and just say:
import 'bootstrap-colorpicker';
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. :(
I can't find a way to use variables in import directive for LESS.
I have got a #cdnUri variable which gets it's value from JavaScript:
#cdnUri: `window.cdnUri`;
cdnUri can be http://localhost/cdn in development mode or http://cdn.example.com in production mode.
What i want is importing other LESS file with this Urls prepended. Like this:
#import "#{cdnUri}/shared/twitter-bootstrap/less/bootstrap.less"
But it gives me this error because it doesn't parse the variables from url.
Couldn't load http://wordy/ui/frontend/themes/default2/ui/css/#{cdnUri}/ui/shared/js/twitter-bootstrap/less/bootstrap.less (404)
Thanks in advance.
This isn't a direct answer to your question, but LESS imports are always relative to the current file, so it's not possible to import from another domain.
It is a known less.js bug. It was a year to partially fix it.
Here is what you want:
LESS CSS, #import path from variable
Talk about this bug.
https://github.com/cloudhead/less.js/pull/1108
And here are the new sources.