vaadin / base-starter-react Goto Github PK
View Code? Open in Web Editor NEWBase Starter for Vaadin components with ReactJS
Home Page: https://vaadin.com/start
Base Starter for Vaadin components with ReactJS
Home Page: https://vaadin.com/start
yarn build
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.
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.
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.
I will create a new app from scratch with react-scripts 2.0 and add vaadin-date-picker from npm to it. Nothing else.
npx create-react-app@next --scripts-version=2.0.0-next.66cc7a90 react-scripts-2-test
cd react-scripts-2-test
yarn add @vaadin/vaadin-date-picker
import '@vaadin/vaadin-date-picker'
and <vaadin-date-picker></vaadin-date-picker>
yarn start
. The component works! (the theme is very off and the component is barely visible, but that is another issue)yarn build
. Passes without issues.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)
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.
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.
On https://vaadin.com/start/latest/react, the instructions to get the starter to use are the following.
yarn install
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:
- You may be adding a ref to a functional component
- You may be adding a ref to a component that was not created inside a component's render method
- 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.
npm install
bower install
npm start
These instructions work out of the box.
(and other versions than latest if they are broken as well).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.