my app.js
class App extends React.Component {
render() {
return (
<div><h1>Welcome to React</h1></div>
);
}
}
ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
my html
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Hello</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app">
</div>
</body>
</html>
I want to show the whole class in html, because it takes a very long time to transfer the elements, especially when there are a lot of these elements.
And the situation is that the same code works in the compiler, but only Hello is displayed for me
Here is my json, maybe something else needs to be set
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.2.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^6.7.1",
"node-sass": "^7.0.3",
"sass-loader": "^13.0.2",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-preset-react-app": "^3.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
Related
Recently I update my project from ng 13 to ng 14.
What I execute ng build --configuration production, CLI creates some compiled and minimized js files.
One of the minimized files was scripts.js.
When I deploy it in IIS it is crushed and not displayed on the browser.
One of the errors in the console was :
Unexpected token
The project was not compiled well and I saw that when I execute ng build without --production, the js if different and OK.
Does anyone face this issue?
package.json
{
"name": "knesset-website-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^14.0.6",
"#angular/cdk": "^14.1.0",
"#angular/cli": "^14.0.6",
"#angular/common": "^14.0.6",
"#angular/compiler": "^14.0.6",
"#angular/core": "^14.0.6",
"#angular/forms": "^14.0.6",
"#angular/localize": "^14.0.6",
"#angular/platform-browser": "^14.0.6",
"#angular/platform-browser-dynamic": "^14.0.6",
"#angular/router": "^14.0.6",
"#ngx-translate/core": "^14.0.0",
"#ngx-translate/http-loader": "^7.0.0",
"#progress/kendo-angular-buttons": "^8.0.0",
"#progress/kendo-angular-common": "^3.1.0",
"#progress/kendo-angular-dateinputs": "^7.0.1",
"#progress/kendo-angular-dialog": "^7.1.2",
"#progress/kendo-angular-dropdowns": "^7.0.2",
"#progress/kendo-angular-excel-export": "^5.0.1",
"#progress/kendo-angular-grid": "^7.2.2",
"#progress/kendo-angular-icons": "^2.0.1",
"#progress/kendo-angular-inputs": "^9.0.3",
"#progress/kendo-angular-intl": "^4.1.0",
"#progress/kendo-angular-l10n": "^4.0.0",
"#progress/kendo-angular-label": "^4.0.0",
"#progress/kendo-angular-layout": "^7.1.0",
"#progress/kendo-angular-pager": "^4.0.1",
"#progress/kendo-angular-pdf-export": "^4.0.0",
"#progress/kendo-angular-popup": "^5.0.0",
"#progress/kendo-angular-progressbar": "^3.0.0",
"#progress/kendo-angular-tooltip": "^4.0.1",
"#progress/kendo-angular-treeview": "^7.1.0",
"#progress/kendo-data-query": "^1.6.0",
"#progress/kendo-drawing": "^1.16.3",
"#progress/kendo-licensing": "^1.2.2",
"#progress/kendo-svg-icons": "^0.2.0",
"#progress/kendo-theme-default": "latest",
"#types/jquery": "^3.5.5",
"#videogular/ngx-videogular": "^5.0.1",
"bootstrap": "^4.6.0",
"bootstrap-v4-rtl": "^4.6.0-2",
"core-js": "^2.5.4",
"dashjs": "^4.3.0",
"font-awesome": "^4.7.0",
"hls.js": "^1.1.5",
"jquery": "^3.6.0",
"ng-recaptcha": "^10.0.0",
"ngx-device-detector": "^2.1.1",
"popper.js": "^1.12.3",
"primeicons": "^4.1.0",
"primeng": "^10.0.3",
"rxjs": "~6.6.6",
"scriptjs": "^2.5.9",
"tslib": "^2.4.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.0.6",
"#angular/compiler-cli": "^14.0.6",
"#angular/language-service": "^14.0.6",
"#types/core-js": "^2.5.5",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^0.0.28",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "^6.3.17",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "~4.6.3"
}
}
I'm running an Angular 7 application and I'm trying to run it in IE11 and its showing me this error:
"SCRIPT1002: Syntax error " "vendor.js"
and the web page shows as a blank page.
In other browsers its working fine.
I have tried with uncomment polyfills and also tried with adding below line in index.html file
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
Below is my package.json file :
{
"name": "eyerne-frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node --max_old_space_size=5045 node_modules/#angular/cli/bin/ng serve --aot",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.6",
"#alyle/ui": "^2.7.6",
"#angular/animations": "^7.2.15",
"#angular/cdk": "^7.3.7",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/forms": "~7.2.0",
"#angular/material": "^7.3.7",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"#ng-bootstrap/ng-bootstrap": "^4.1.3",
"#ngx-translate/core": "^11.0.1",
"#ngx-translate/http-loader": "^4.0.0",
"amazing-time-picker": "^1.8.0",
"angular-datatables": "^8.0.0",
"angular-gridster2": "^8.2.0",
"angular-resizable-element": "^3.2.4",
"angular2-resizing-cropping-image": "^1.0.2",
"angular2-toaster": "^7.0.0",
"bootstrap": "^4.3.1",
"chroma-js": "^2.0.6",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.7",
"datatables": "^1.10.18",
"datatables.net": "^1.10.19",
"datatables.net-dt": "^1.10.19",
"echarts": "^4.2.1",
"exif-js": "^2.3.0",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.4",
"jquery": "^3.4.1",
"merge-images": "^1.1.0",
"moment": "^2.24.0",
"ng-http-loader": "^5.1.0",
"ng2-validation": "^4.2.0",
"ng5-slider": "^1.2.4",
"ngx-bootstrap": "^4.3.0",
"ngx-chips": "^2.0.0-beta.0",
"ngx-color-picker": "^8.1.0",
"ngx-cookie-service": "^2.2.0",
"ngx-echarts": "^4.2.1",
"ngx-google-places-autocomplete": "^2.0.4",
"ngx-slick-carousel": "^0.4.4",
"ngx-webcam": "^0.2.6",
"ngx-xml2json": "^1.0.2",
"recordrtc": "^5.5.8",
"rxjs": "^6.3.3",
"slick-carousel": "^1.8.1",
"socket.io-client": "^2.3.0",
"ts-ebml": "^2.0.2",
"tslib": "^1.9.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.13.0",
"#angular/cli": "~7.3.0",
"#angular/compiler-cli": "~7.2.0",
"#angular/language-service": "~7.2.0",
"#types/datatables.net": "^1.10.17",
"#types/echarts": "^4.1.9",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/jquery": "^3.3.30",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.3.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "^5.11.0",
"typescript": "~3.2.2"
}
}
What am I doing wrong? Please let me know if you can help me with this.
Following is my package.json:
"dependencies": {
"#angular/animations": "^5.2.0",
"#angular/cdk": "^5.2.0",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/material": "^5.2.0",
"#material/form-field": "^0.39.1",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"angular4-fusioncharts": "^1.0.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"material-design-icons": "^3.0.1",
"fusioncharts": "^3.12.2",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
}
And I have tried to implement it as:
<mat-icon>date_range</mat-icon>
The icons are missing.
Please help.
Perhaps you missed font import in index.html file:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
I removed "material-design-icons": "^3.0.1" from my dependencies and cleared material icons form my angular.json styles:[] section, and import sections of my styles.css. The only thing required is the index.html head to correctly use the material.io names, before this some of the icons worked but others like dark_mode did not work
In index.html import using all types (outline, two+Tone,,) - required if you want to use more than just the standard set
<head>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet">
</head>
So, I am stuck on this error:
Babel seems to work fine. It makes all the changes to the file in another folder. I guess I have all the necessary dependencies installed.
Package.json :
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"author": "Dima",
"license": "MIT",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.5.2",
"babel-preset-react": "^6.24.1",
"webpack-dev-server": "^2.9.7"
},
}
After some researching it seems that the code doesn't properly update the HTML file after a couple of changes to the dependencies (I tried several versions), or something with connection app.js file to HTML. But I don't know how to approach this, particularly in my environment.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Indecision App</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="/public/scripts/app.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
app.js
console.log('App.js is running, but not really!');
// JSX - JavaScript XML
var template = (
<div>
<h1>Indecision App</h1>
<p>This is some info</p>
<ol>
<li>Item one</li>
<li>Item two</li>
</ol>
</div>
);
var appRoot = document.getElementById("app");
ReactDOM.render(template, appRoot);
I don't know how to fix it, I have been search too many informations, all of people told me I don't install npm module, but my 'package.json' file has already installed them.
I have installed all npm module
dependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-runtime": "^6.22.0",
"css-loader": "^0.26.1",
"style-loader": "^0.13.1",
"vue": "^2.1.10",
"vue-hot-reload-api": "^2.0.8",
"vue-html-loader": "^1.2.3",
"vue-loader": "^10.3.0",
"vue-template-compiler": "^2.1.10",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"}
other files
webpack.config.js
module.exports={
entry:'./main.js',
output:{
path:__dirname,
filename:'build.js'
},
module:{
loaders:[
{test:/\.vue$/, loader:'vue'},
{test:/\.js$/, loader:'babel-loader', exclude:/node_modules/}
]
}};
main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'body',
components:{
app:App
}
});
App.vue
<template>
<h1>welcome Vue</h1>
</template>
<script type="text/javascript"></script>
<style type="text/css"></style>
and the final file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="bundle.js"></script>
</head>
<body>
<div id="app">
<app></app>
</div>
</body>
</html>
when I start webpack-dev-server, shell told me
TypeError: this._init is not a function
(ps : my English is not good, so....)
I have solved this problem, In 'webpack.config.js' file
{test:/\.vue$/, loader:'vue'}
change to
{test:/.vue$/, loader:'vue-loader'}
Because I use vue 2.0 version.
The line in webpack.config.js should be full name:
{test:/\.vue$/, loader:'vue-loader'},