vaadin/base-starter-react

Base Starter for Vaadin components with ReactJS

Vaadin web components

This package contains all Vaadin web components (free and commercial).

See https://github.com/vaadin/web-components for more details.

base-starter-react's Issues

Styles do not apply to first imported component in polyfilled browsers for P3

The following behavior happens in FIrefox, Edge and IE11:

When re-ordering imports so text-field comes first:

• webcomponentsjs 2.1.3
• react-scripts 2.0.0

Update vaadin-core to beta9

p3-preview is unbuildable. Vaadin components on npm are unusable in React apps.

How to verify

1. Take a checkout
2. Switch to p3-preview branch
3. run yarn build
4. Output:

yarn run v1.7.0
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

 	./node_modules/@polymer/polymer/lib/utils/mixin.js:13

Read more here: http://bit.ly/2tRViJ9

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reasons behind the failure

This is because parts of polymer (and maybe Vaadin) is not precompiled to ES5 before they are released under npm and react-scripts 1.0 does not want to compile modules to minify them, due to the risk of breaking something.

This is a problem with all react projects, not just our starter. Even if you create a react project from scratch and just add say to it, then it will fail in this manner.

Updating to react-scripts 2.0

They have made a change in policy in react-scripts 2.0 and now they build them to minify. With 2.0, yarn build passes. However at runtime when testing the built version, the web components won't work and you have a huge amount of exceptions in the console.

Steps to test with react-scripts 2.0

I will create a new app from scratch with react-scripts 2.0 and add vaadin-date-picker from npm to it. Nothing else.

1. npx create-react-app@next --scripts-version=2.0.0-next.66cc7a90 react-scripts-2-test
2. cd react-scripts-2-test
3. yarn add @vaadin/vaadin-date-picker
4. Edit src/App.js and add import '@vaadin/vaadin-date-picker' and <vaadin-date-picker></vaadin-date-picker>
5. yarn start. The component works! (the theme is very off and the component is barely visible, but that is another issue)
6. yarn build. Passes without issues.
7. serve -s build App loads up, everything except the date picker is there. There is a barrage of errors in the console, where of 30 first ones are this:

Uncaught DOMException: custom element constructors must call super() first and must not return a different object
    at Object.<anonymous> (http://localhost:5000/static/js/main.e9a02274.js:1:9728)

Additionally there is these two.

Uncaught (in promise) TypeError: Illegal invocation
    at t.value (custom-style.js:81)

Uncaught TypeError: Illegal invocation
    at t.value (custom-style.js:81)

Summary

I have no way to deploy my app anywhere. I can't put it up anywhere without the build so I can only show my app on my personal computers. You can't do anything other that development with React and Vaadin Components on npm, so the combo provides zero business or other kind of value.

P3 preview branch build is failing

The same as vaadin/base-starter-vue#13

$ yarn build
yarn run v1.9.4
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

 	./node_modules/@polymer/polymer/lib/utils/mixin.js:13

Need to find out what is the problem in UglifyJS, possibly create small reproduction.

V11 starter does not start up when following /start instructions.

On https://vaadin.com/start/latest/react, the instructions to get the starter to use are the following.

1. Extract zip
2. Ensure yarn is installed
3. yarn install
4. yarn start

Following these instructions, you get a huge error on your screen when it is loaded in the browser, and the app is unusable.

Element ref was specified as a string (text) but no owner was set. This could happen for one of the following reasons:

1. You may be adding a ref to a functional component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
   See https://fb.me/react-refs-must-have-owner for more information.

This can be fixed with an bower install between 3 and 4.

Furthermore, the README.md has another list of instructions.

1. install bower
2. npm install
3. bower install
4. npm start

These instructions work out of the box.

Please choose one set of instructions that work, and put the same set in both the README and /start/latest/react

(and other versions than latest if they are broken as well).