However, only TextField and TextArea seem to work. PasswordField, EmailField and NumberField remain only a HTML Tag without the rest of the webcomponent.
An image of the HTML code can be seen here : https://pasteboard.co/IKWD6lY.png
Those are not pro components and should work without issues. You should probably include your source code, otherwise it will be very hard to give you recommendations for how to fix it.
Thx for looking in !
An example of the code in its simplest form :
@Route(value = "test", layout = MainLayout.class)
@Component
@UIScope
public class TestView extends Div{
public TestView(){
PasswordField password = new PasswordField("password");
TextField text = new TextField("text");
this.add(text, password);
}
}
When the view is loaded I can only see the text field in the browser.
When I check the generated code in the developer console, I see the password field created as html but nothing more.
I have added my pom.xml as attachment.
De Vaadin bom and vaadin core are imported via pom.xml.
I never had any problem with any of the vaadin components so currently I am thinking hard but cannot think of any reason why it’s not working.
Should I add a specific entry in the pom to get the password field as a webcomponent ?
I found that the problem must be in the npm packages.
I cleaned everything, now i get missing npm modules while running maven goals :
Failed to find the following imports in the `node_modules` tree:
- @vaadin/vaadin-grid/src/vaadin-grid-column.js
- @vaadin/vaadin-combo-box/src/vaadin-combo-box.js
- @vaadin/vaadin-grid/src/vaadin-grid.js
- @vaadin/vaadin-app-layout/src/vaadin-app-layout.js
- @vaadin/vaadin-grid/src/vaadin-grid-column-group.js
- @vaadin/vaadin-app-layout/src/vaadin-drawer-toggle.js
- @vaadin/vaadin-grid/src/vaadin-grid-sorter.js
If the build fails, check that npm packages are installed.
I removed node_modules, i try to rebuild with npm install, deleting caches, rerunning but these npm_modules will not install giving webpack errors in the UI.
While googling, I am not the only one with this problem of missing npm_modules. Is there already some fixed procedure how to resolve this and do you have any understanding and idea where this problem is coming from ?
If i try to install a nmp package manually, i get errors like this :
npm ERR! code ENOLOCAL
npm ERR! Could not install from "@vaadin\vaadin-text-field\src\vaadin-password-field.js" as it does not contain a package.json file.
I found that the problem must be in the npm packages.
I cleaned everything, now i get missing npm modules while running maven goals :
Failed to find the following imports in the `node_modules` tree:
- @vaadin/vaadin-grid/src/vaadin-grid-column.js
- @vaadin/vaadin-combo-box/src/vaadin-combo-box.js
- @vaadin/vaadin-grid/src/vaadin-grid.js
- @vaadin/vaadin-app-layout/src/vaadin-app-layout.js
- @vaadin/vaadin-grid/src/vaadin-grid-column-group.js
- @vaadin/vaadin-app-layout/src/vaadin-drawer-toggle.js
- @vaadin/vaadin-grid/src/vaadin-grid-sorter.js
If the build fails, check that npm packages are installed.
I removed node_modules, i try to rebuild with npm install, deleting caches, rerunning but these npm_modules will not install giving webpack errors in the UI.
While googling, I am not the only one with this problem of missing npm_modules. Is there already some fixed procedure how to resolve this and do you have any understanding and idea where this problem is coming from ?
If i try to install a nmp package manually, i get errors like this :
npm ERR! code ENOLOCAL
npm ERR! Could not install from "@vaadin\vaadin-text-field\src\vaadin-password-field.js" as it does not contain a package.json file.
When i remove node_modules and npm_install runs again, than there are other packages missing. There is no constant.
Example when i run : npm install @vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js
The full log of npm is :
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'D:\\Development\\NodeJS\\node.exe',
1 verbose cli 'D:\\Development\\NodeJS\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'install',
1 verbose cli '@vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js'
1 verbose cli ]
2 info using npm@6.12.0
3 info using node@v12.13.0
4 verbose npm-session bd855e2950a9e4bf
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 silly fetchPackageMetaData error for file:@vaadin\vaadin-ordered-layout\src\vaadin-vertical-layout.js Could not install from "@vaadin\vaadin-ordered-layout\src\vaadin-vertical-layout.js" as it does not contain a package.json file.
8 timing stage:rollbackFailedOptional Completed in 1ms
9 timing stage:runTopLevelLifecycles Completed in 807ms
10 verbose stack Error: ENOENT: no such file or directory, open 'D:\Development\NetbeansProjects\aeosrmigateway\@vaadin\vaadin-ordered-layout\src\vaadin-vertical-layout.js\package.json'
11 verbose cwd D:\Development\NetbeansProjects\aeosrmigateway
12 verbose Windows_NT 10.0.18362
13 verbose argv "D:\\Development\\NodeJS\\node.exe" "D:\\Development\\NodeJS\\node_modules\\npm\\bin\\npm-cli.js" "install" "@vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js"
14 verbose node v12.13.0
15 verbose npm v6.12.0
16 error code ENOLOCAL
17 error Could not install from "@vaadin\vaadin-ordered-layout\src\vaadin-vertical-layout.js" as it does not contain a package.json file.
18 verbose exit [ 1, true ]
Have you tried removing the package-lock.json file?
Also the correct manual installation would be npm install @vaadin/vaadin-ordered-layout which installs the package and not to target a specific file in the package.This just might bring in the problem that the latest version is not the same as the one expected for 14.0.15 also you could try moving to the latest version 14.1.2
Deleting the package-lock.json did not help.
However, the packages installed manually via the correction on the npm command you gave me.
The final solution was npm install @vaadin/vaadin-ordered-layout (and all the other missing packages).
