Vaadin with node.js

Hi!
After making sure my script worked locally I moved on to getting it working within a node.js instance. However I’m unable to get it to work.

I’ve run npm i @vaadin/vaadin-date-picker --save

We are using node.js version 13.7.

I first tried using import statements, as described in the “How to use web components” tutorial - This resulted in errors such as
import '@vaadin/vaadin-date-picker/vaadin-date-picker.js'; ^^^^^^ SyntaxError: Cannot use import statement outside a module

I tried using var datepicker = require('@vaadin/vaadin-date-picker/vaadin-date-picker.js'); - this resulted in an error from inside the vaadin-date-picker module.

import './theme/lumo/vaadin-date-picker.js'; ^^^^^^ SyntaxError: Cannot use import statement outside a module

Apparently these are ES Modules, but I added "type": "module" manually to the package.json (and changed the file type to .mjs too) but I still received the same error - import './theme/lumo/vaadin-date-picker.js'; ^^^^^^ SyntaxError: Cannot use import statement outside a module

(And require doesn’t work after I make those changes because require() of ES modules is not supported.)

I’ve tried putting the import/require statement in multiple logical places: With the other main requirements inside our app.js, inside the .js of the page which will specifically render the vaadin components, inside the function which renders that page… but it always seem to give me the same error: import './theme/lumo/vaadin-date-picker.js'; ^^^^^^ SyntaxError: Cannot use import statement outside a module

I feel like I am missing something very obvious here! What am I missing? How can I get this to work in node.js?

I’ve gotten farther by using import(@vaadin/vaadin-date-picker); but then I get errors deeper inside the plugin - e.g., `(node:13980) UnhandledPromiseRejectionWarning: C:\Users\Owner\node_modules@vaadin\vaadin-date-picker\theme\lumo\vaadin-date-picker.js:1
import ‘./vaadin-date-picker-overlay-styles.js’;
^^^^^^

SyntaxError: Cannot use import statement outside a module`

Now I can bypass even more of these by using the ESM plugin, running as node -r esm app.js, but I still get problems in Firefox and IE (though not in Edge - Chromium might have some partial solution?)
(node:13528) UnhandledPromiseRejectionWarning: C:\Users\Owner\node_modules\@vaadin\vaadin-lumo-styles\version.js:1 ReferenceError: HTMLElement is not defined at Object.<anonymous> (C:\Users\Owner\node_modules\@vaadin\vaadin-lumo-styles\version.js:1) at Generator.next (<anonymous>) at Object.<anonymous> (C:\Users\Owner\node_modules\@vaadin\vaadin-lumo-styles\sizing.js:1) at Generator.next (<anonymous>) at Object.<anonymous> (C:\Users\Owner\node_modules\@vaadin\vaadin-date-picker\theme\lumo\vaadin-date-picker-overlay-styles.js:1) at Generator.next (<anonymous>) at Object.<anonymous> (C:\Users\Owner\node_modules\@vaadin\vaadin-date-picker\theme\lumo\vaadin-date-picker.js:1) at Generator.next (<anonymous>)

In all cases - the date-picker element does not render on the page anyways.

At this point I’ve installed polymer3 and followed the directions at https://vaadin.com/learn/tutorials/using-web-components to the letter - modifying only my import statement and ensuring I insert the javascript into the page that renders most of the HTML.

The error SyntaxError: Cannot use import statement outside a module implies that the the script where the imports happen is a common <script> when it should be a <script type="module">.

What do you mean by “getting it working within a node.js instance”?

You mentioned that you run script in node -r esm app.js. Are you using app.js as a server?
Please consider using [es-dev-server]
(https://github.com/open-wc/open-wc/tree/master/packages/es-dev-server) if you need to run ES modules during development.

Creating your own server will require some work: even though there is native support for ES modules in node.js 13, in browsers ES modules do not use same module resolution mechanism as in node.js.

In our components we use “bare module specifiers” which have to be transformed for browsers. For example, see [express-transform-bare-module-specifiers]
(https://github.com/nodecg/express-transform-bare-module-specifiers) plugin that handles it for express. I recommend es-dev-server that does that too, but also supports older browsers via SystemJS and Babel.

Jouni Koivuviita:
The error SyntaxError: Cannot use import statement outside a module implies that the the script where the imports happen is a common <script> when it should be a <script type="module">.

Because this is a javascript applet, there are no instances where <script> is called to render vaadin-date-picker

Serhii Kulykov:
What do you mean by “getting it working within a node.js instance”?

You mentioned that you run script in node -r esm app.js. Are you using app.js as a server?
Please consider using [es-dev-server]
(https://github.com/open-wc/open-wc/tree/master/packages/es-dev-server) if you need to run ES modules during development.

Creating your own server will require some work: even though there is native support for ES modules in node.js 13, in browsers ES modules do not use same module resolution mechanism as in node.js.

In our components we use “bare module specifiers” which have to be transformed for browsers. For example, see [express-transform-bare-module-specifiers]
(https://github.com/nodecg/express-transform-bare-module-specifiers) plugin that handles it for express. I recommend es-dev-server that does that too, but also supports older browsers via SystemJS and Babel.

Yes - apologies for the confusion, this is another case where my inexperience with webdev comes through.

We are running a node.js server right now - I was doing the testing locally and have recently migrated my work into node.js’ format of interlinked javascript. Now I’m doing testing using a local Node.js server on my Windows machine(s) (https://docs.microsoft.com/en-us/windows/nodejs/setup-on-windows)

The ESM package I described earlier https://www.npmjs.com/package/esm is one piece of node.js which supposedly improves ES module support. But the HTMLElement is not defined error seems to be related to some sort of resolution troubles.

As I previously mentioned, Vaadin components ship as ES modules, but they are supposed to be executed in a browser.

Error HTMLElement is not defined means that your script runs in node.js without any server-side DOM implementation.
This use case is not officially supported by our components (neither usage in applets).

When rendering on the server, people usually use jsdom but it doesn’t have full support for custom elements yet.
One potential alternative is [happy-dom]
(https://www.npmjs.com/package/happy-dom) that claims it supports server side rendering of web components.