Support
Quality
Security
License
Reuse
kandi has reviewed device-uuid and discovered the below as its top functions. This is intended to give you an instant insight into device-uuid implemented functionality, and help decide if they suit your requirements.
Fast browser device uuid generation library. Written in pure JavaScript, no dependencies.
Installation
$ bower install device-uuid --save
Usage overview
<script src="/path/to/device-uuid.js" type="text/javascript"></script>
Reactjs - Uncaught SyntaxError: Unexpected token <
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
];
-----------------------
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
<Directory /var/www/html/>
Options Indexes FollowSymLinks MultiViews
AllowOverride all
Require all granted
Order allow,deny
allow from all
</Directory>
-----------------------
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
<Directory /var/www/html/>
Options Indexes FollowSymLinks MultiViews
AllowOverride all
Require all granted
Order allow,deny
allow from all
</Directory>
QUESTION
Reactjs - Uncaught SyntaxError: Unexpected token <
Asked 2019-Sep-01 at 15:08i create the reactjs app, test and compile it with webpack, it is fully functional and every thing is okay, once i need to make a production build it compiled successfully and dist folder created, now i copy the files in apache path, when the browse website i got this error :
Uncaught SyntaxError: Unexpected token <
This is my .htaccess file :
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
Options -MultiViews
RewriteRule ^ index.html [QSA,L]
this is my .bablerc file
{
"presets": [
[
"@babel/env",
{
"modules": false,
"targets": {
"browsers": [
"last 2 versions",
"safari >= 7"
]
}
}
],
"@babel/react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/syntax-dynamic-import",
"@babel/transform-runtime",
"@babel/plugin-transform-react-jsx",
"babel-plugin-transform-class-properties"
]
}
this is my package.json
{
"name": "Test",
"version": "1.0.0",
"description": "My Test Project",
"homepage": "/",
"scripts": {
"start": "webpack-dev-server --inline --history-api-fallback --progress --config webpack/dev.js",
"build": "webpack --config webpack/prod.js --progress "
},
"keywords": [
"reactjs"
],
"author": "Author",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@babel/plugin-transform-runtime": "^7.5.5",
"@babel/polyfill": "^7.2.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-react-transform": "^3.0.0",
"clean-webpack-plugin": "^1.0.1",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^2.1.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"sass-loader": "^7.3.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0",
"webpack-filter-warnings-plugin": "^1.2.1",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/runtime": "^7.5.5",
"@types/googlemaps": "^3.37.5",
"@types/markerclustererplus": "^2.1.33",
"@types/react": "^16.9.2",
"availity-reactstrap-validation": "^2.6.0",
"axios": "^0.19.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"base-64": "^0.1.0",
"blob-to-base64": "^1.0.2",
"chart.js": "^2.7.2",
"chartjs-plugin-datalabels": "^0.3.0",
"classnames": "2.2.6",
"cors": "^2.8.5",
"device-uuid": "^1.0.4",
"draft-js": "^0.10.5",
"firebase": "^5.3.0",
"formik": "^1.5.8",
"ip": "^1.1.5",
"js-base64": "^2.5.1",
"lodash": "^4.17.15",
"match-sorter": "^4.0.1",
"md5": "^2.2.1",
"moment": "2.22.2",
"moment-jalaali": "^0.8.3",
"node-machine-id": "^1.1.12",
"rc-slider": "^8.6.13",
"rc-switch": "^1.6.0",
"react": "^16.9.0",
"react-advance-jalaali-datepicker": "^1.2.2",
"react-autosuggest": "^9.3.4",
"react-barcode-reader": "0.0.1",
"react-big-calendar": "^0.20.3",
"react-chartjs-2": "^2.7.4",
"react-circular-progressbar": "^1.0.0",
"react-contextmenu": "^2.9.4",
"react-datepicker": "^1.5.0",
"react-datepicker2": "^3.0.3",
"react-device-detect": "^1.7.5",
"react-dom": "^16.9.0",
"react-dropzone-component": "^3.2.0",
"react-file-base64": "^1.0.3",
"react-google-maps": "^9.4.5",
"react-headroom": "^2.2.4",
"react-image-file-resizer": "^0.2.0",
"react-intl": "2.4.0",
"react-lines-ellipsis": "^0.13.2",
"react-loadable": "5.4.0",
"react-mousetrap": "^0.2.0",
"react-perfect-scrollbar": "^1.5.3",
"react-persian-datepicker": "^3.0.2",
"react-polyfills": "0.0.1",
"react-quill": "^1.3.1",
"react-rater": "^5.1.0",
"react-redux": "5.0.7",
"react-rounded-image": "^2.0.2",
"react-router-dom": "^4.2.2",
"react-scroll-to-component": "^1.0.2",
"react-select": "^2.4.4",
"react-sortablejs": "^1.3.6",
"react-table": "^6.10.0",
"react-tagsinput": "^3.19.0",
"react-transition-group": "^1.2.0",
"react-yandex-maps": "^3.1.0",
"reactstrap": "^6.5.0",
"redux": "4.0.0",
"redux-saga": "^0.16.0",
"sortablejs": "^1.6.1",
"utf8": "^3.0.0",
"uuid": "^3.3.3",
"video.js": "^7.6.0",
"yup": "^0.27.0"
}
}
This is my base.js (webpack common)
"use strict";
const path = require('path');
const fs = require('fs');
const publicPath = '/';
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
index: ['./src/index.js']
},
output: {
path: resolveApp('dist'),
filename: 'assets/js/[name].[hash:4].js',
chunkFilename: 'assets/js/[name].[hash:4].chunk.js',
publicPath: publicPath,
// hotUpdateChunkFilename: 'hot/hot-update.js',
// hotUpdateMainFilename: 'hot/hot-update.json'
},
resolve: {
alias: {
Components: path.resolve(__dirname, '../src/components/'),
Brisky: path.resolve(__dirname, '../src/brisky_components/'),
Containers: path.resolve(__dirname, '../src/containers/'),
Assets: path.resolve(__dirname, '../src/assets/'),
Util: path.resolve(__dirname, '../src/util/'),
Routes: path.resolve(__dirname, '../src/routes/'),
Constants: path.resolve(__dirname, '../src/constants/'),
Redux: path.resolve(__dirname, '../src/redux/'),
Data: path.resolve(__dirname, '../src/data/')
}
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
},
]
},
plugins: [
new CopyWebpackPlugin([
{from:'src/assets/img',to:'assets/img'},
{from:'src/assets/fonts',to:'assets/fonts'}
]),
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html",
favicon: './public/favicon.ico'
}),
]
};
This is my prod.js (production config)
'use strict'
const path = require('path');
const fs = require('fs');
const merge = require('webpack-merge')
const baseConfig = require('./base')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
let pathsToClean = [
'dist'
]
let cleanOptions = {
root: __dirname,
verbose: false, // Write logs to console.
dry: false
}
module.exports = merge(baseConfig, {
mode: 'production',
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({})
]
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
},
// Scss compiler
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader?indentedSyntax"
]
}
]
},
performance: {
hints: "warning"
},
plugins: [
new CleanWebpackPlugin(pathsToClean, cleanOptions),
new MiniCssExtractPlugin({
filename: "assets/css/[name].[hash:4].css"
}),
new FilterWarningsPlugin({
exclude: /mini-css-extract-plugin[^]*Conflicting order between:/
})
]
})
after copying the dist folder i expected it work as web page without error
ANSWER
Answered 2019-Sep-01 at 11:26You did not provide any error context or stack trace, so I will need to guess: "@babel/react"
preset is probably omitted during the build, so JSX hasn't been transpiled to valid JavaScript syntax.
Reason is: You included babel config twice - once in base.js
config under babel-loader options
, once in .babelrc
. In this case options
takes precedence and .babelrc
is omitted.
I assume here, that .babelrc
is the "complete" config, so remove options
entry and update your Webpack module config:
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
];
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
No vulnerabilities reported
Save this library and start creating your kit
Explore Related Topics
Save this library and start creating your kit