[Whats wrong in line 6 which make Parse Error ?][1]
{
"main": "index.js",
"dependencies": {
"vue": "latest"
}
}
}
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"test": "cross-env NODE_ENV=test jest",
"tdd": "npm run test -- --watch --notify"
},
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.15",
"axios": "^0.18",
"babel-jest": "^22.1.0",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"font-awesome": "^4.7.0",
"jest": "^22.1.4",
"jest-vue-preprocessor": "^1.3.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.10",
"pace": "github:HubSpot/pace#v1.0.2",
"popper.js": "^1.14.3",
"simple-line-icons": "^2.4.1",
"sweetalert2": "^7.19.2",
"tether": "^1.4.4",
"vue": "^2.5.7"
},
"jest": {
"roots": ["<rootDir>/tests/Javascript/"],
"moduleNameMapper": {
"^vue$": "vue/dist/vue.common.js"
},
"moduleFileExtensions": ["js",
"vue"],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
}
}
}
You have closed one extra curly braces in line no: 7
Related
I have tried the webpack solution written here but got no luck and tried to check the answer of my question on laracast as well as on stackoverflow but didn't get the solution.
Because I'm adding a input field dynamically using JQuery and it is disappearing that input field. I'm using Laravel 8.
composer.json
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": [
"framework",
"laravel"
],
"license": "MIT",
"require": {
"php": "^7.3|^8.0",
"fideloper/proxy": "^4.4",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^7.0.1",
"laravel/framework": "^8.12",
"laravel/jetstream": "^1.6",
"laravel/sanctum": "^2.6",
"laravel/tinker": "^2.5",
"livewire/livewire": "^2.0"
},
"require-dev": {
"facade/ignition": "^2.5",
"fakerphp/faker": "^1.9.1",
"mockery/mockery": "^1.4.2",
"nunomaduro/collision": "^5.0",
"phpunit/phpunit": "^9.3.3"
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"autoload": {
"psr-4": {
"App\\": "app/",
"Database\\Factories\\": "database/factories/",
"Database\\Seeders\\": "database/seeders/"
}
},
"autoload-dev": {
"psr-4": {
"Tests\\": "tests/"
}
},
"minimum-stability": "dev",
"prefer-stable": true,
"scripts": {
"post-autoload-dump": [
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
"#php artisan package:discover --ansi"
],
"post-root-package-install": [
"#php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"#php artisan key:generate --ansi"
]
}
}
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#tailwindcss/ui": "^0.6.0",
"axios": "^0.19",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"postcss-import": "^12.0.1",
"resolve-url-loader": "^3.1.0",
"tailwindcss": "^1.8.0",
"vue-template-compiler": "^2.6.12"
}
}
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'));
mix.browserSync('127.0.0.1:8000');
You just need to remove (or remark) last line from your webpack.mix.js
mix.browserSync('127.0.0.1:8000');
I have an issue with an NPM Build Error in ReactJS. I checked the index.html file in the build folder and this is what it has. I have uploaded my build folder to AWS S3 for a static site but I have this issue. Is my index.html file supposed to have this code or am I supposed to have something else?
Html Webpack Plugin:
Error: Parse Error: <src="components/app.js" />
<body>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.83185361.js">
</script>
</body>
</html>
- htmlparser.js:235 new HTMLParser
[reactProject]/[html-minifier]/src/htmlparser.js:235:13
- htmlminifier.js:944 minify
[reactProject]/[html-minifier]/src/htmlminifier.js:944:3
- htmlminifier.js:1297 exports.minify
[reactProject]/[html-minifier]/src/htmlminifier.js:1297:10
- index.js:296
[reactProject]/[html-webpack-plugin]/index.js:296:16
- util.js:16 tryCatcher
[reactProject]/[bluebird]/js/release/util.js:16:23
- promise.js:512 Promise._settlePromiseFromHandler
[reactProject]/[bluebird]/js/release/promise.js:512:31
- promise.js:569 Promise._settlePromise
[reactProject]/[bluebird]/js/release/promise.js:569:18
- promise.js:614 Promise._settlePromise0
[reactProject]/[bluebird]/js/release/promise.js:614:10
- promise.js:693 Promise._settlePromises
[reactProject]/[bluebird]/js/release/promise.js:693:18
- async.js:133 Async._drainQueue
[reactProject]/[bluebird]/js/release/async.js:133:16
- async.js:143 Async._drainQueues
[reactProject]/[bluebird]/js/release/async.js:143:10
- async.js:17 Immediate.Async.drainQueues
[reactProject]/[bluebird]/js/release/async.js:17:14
</pre>
Package.json file
"version": "0.1.0",
"private": true,
"proxy": {
"/auth/facebook": {
"target": "http://localhost:5000"
},
"/api/*": {
"target": "http://localhost:5000"
} }, "dependencies": {
"axios": "^0.18.0",
"express": "^4.16.3",
"imgix.js": "^3.3.2",
"informed": "^1.7.4",
"init": "^0.1.2",
"lodash": "^4.17.10",
"namor": "^1.0.1",
"nodejs": "0.0.0",
"react": "^16.2.0",
"react-ga": "^2.5.3",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.0.17",
"react-table": "^6.8.0",
"react-validation": "^3.0.7",
"redux": "^4.0.0",
"redux-form": "^7.4.2",
"redux-thunk": "^2.3.0",
"semantic-ui": "^2.2.13",
"slick-carousel": "^1.8.1" }, "scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": " react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"webpack": "webpack --mode production" }, "devDependencies": {
"prettier": "1.13.4",
"webpack-cli": "^3.1.0" }
I'm working on a project written in Laravel 5.4 and Vue 2 + Yarn
I'm getting errors the following JS errors in IE (versions 9-11)
Syntax error (line where there is usage in const and arrow functions)
Object doesn't support property or method 'startsWith'
What am I missing ? I wonder if I'm misusing babel or perhaps something else is missing. I'm totally frustrated here because I already spent so much time figuring why nothing work properly in IE when Vue 2 components are involved. Any help or advise here will be highly appreciated !
app.js:
require('./bootstrap');
var Promise = require('es6-promise').Promise;
require('babel-polyfill')
Promise.polyfill();
window.Vue = require('vue');
import Vue2Filters from 'vue2-filters'
import BootstrapVue from 'bootstrap-vue'
my webpack.mix.js (tried to install babel)
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.babel('out.es6.js', 'out.js')
.options({
polyfills: [
'Promise'
]
});
my package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"build": "babel src -d lib"
},
"devDependencies": {
"accounting": "^0.4.1",
"axios": "^0.15.3",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-vue-app": "^1.3.1",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "0.*",
"lodash": "^4.17.4",
"vue": "^2.4.2",
"vue-template-compiler": "^2.4.2",
"webpack": "^3.8.1"
},
"dependencies": {
"bootstrap-vue": "^1.0.0-beta.7",
"es6-promise": "^4.1.1",
"vee-validate": "^2.0.0-beta.17",
"vue-events": "^3.0.1",
"vue-strap": "^1.1.37",
"vue2-filters": "^0.1.9",
"vuelidate": "^0.5.0"
}
}
I succeeded to resolve the problem by running the babel code, echoing the results to specific location:
my .bashrc:
{
"presets": ["es2015"]
}
command:
./node_modules/.bin/babel public/js/app.js > public/js/out.js
Then in the layouts files I included public/js/out.js file instead of public/js/app.js
I have an application with SailsJs over NodeJs on Heroku and I can't run babeljs on. It runs ok on my localhost, but I always get the error:
Error: Couldn't find preset "env" relative to directory "/app"
The Heroku persists in look for itens at /app folder. This project does not have one /app folder
My app folders structure is:
app_name
- api
- assets
- config
- tasks
- views
I follow the documentation of http://babeljs.io to my .babelrc
.babelrc
now:
{
"presets": ["react", "env", "stage-1"],
"plugins": ["transform-class-properties"]
}
Already tried:
{
"presets": ["react", "es2015", "stage-1"],
"plugins": ["transform-class-properties"]
}
When I set the .babelrc to use es2015 I get the error:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
I already installed the dependencies
npm install babel-preset-es2015
npm install babel-preset-react
npm install babel --save-dev
My package.json
{
"name": "redux-cardeck",
"private": true,
"version": "0.0.1",
"engines": {
"node": "6.11.4"
},
"description": "a Sails-Redux application for multi-player online card game",
"keywords": [
"sailsjs",
"redux",
"es2015",
"webpack"
],
"dependencies": {
"axios": "^0.13.1",
"babel-cli": "^6.26.0",
"babel-plugin-transform-class-properties": "^6.11.5",
"babel-plugin-transform-object-rest-spread": "^6.6.5",
"babel-polyfill": "^6.7.2",
"babel-preset-stage-1": "^6.13.0",
"connect-mongo": "0.8.2",
"css-loader": "^0.23.1",
"ejs": "2.3.4",
"file-loader": "^0.8.5",
"grunt": "0.4.5",
"grunt-babel": "^6.0.0",
"grunt-contrib-clean": "0.6.0",
"grunt-contrib-coffee": "0.13.0",
"grunt-contrib-concat": "0.5.1",
"grunt-contrib-copy": "0.5.0",
"grunt-contrib-cssmin": "0.9.0",
"grunt-contrib-jst": "0.6.0",
"grunt-contrib-less": "1.1.0",
"grunt-contrib-uglify": "0.7.0",
"grunt-contrib-watch": "0.5.3",
"grunt-sails-linker": "~0.10.1",
"grunt-sync": "0.2.4",
"include-all": "~0.1.6",
"node-sass": "^3.8.0",
"postcss-modules-extract-imports": "^1.0.0",
"postcss-modules-scope": "^1.0.0",
"rc": "1.0.1",
"react": "^0.14.9",
"react-dom": "^0.14.9",
"react-redux": "^4.4.8",
"react-router": "^2.6.1",
"react-tap-event-plugin": "^0.2.2",
"redux": "^3.7.2",
"redux-form": "^5.3.2",
"redux-optimist": "0.0.2",
"redux-optimistic-ui": "^0.3.2",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"redux-undo": "^0.6.1",
"sails": "~0.12.1",
"sails-disk": "~0.10.9",
"sails-hook-babel": "^6.0.1",
"sails-mongo": "^0.12.2",
"sails-postgresql": "^0.11.4",
"sails-service-mailer": "^3.2.1",
"sails-webpack": "^1.0.13",
"sass": "^0.5.0",
"sass-loader": "^3.2.3",
"style-loader": "^0.13.1",
"unexpected-react": "^1.0.0",
"updeep": "^0.16.1",
"url-loader": "^0.5.7"
},
"scripts": {
"debug": "node debug app.js",
"start": "./node_modules/.bin/babel-node app.js"
},
"main": "app.js",
"repository": {
"type": "git",
"url": "git://github.com/vanphuong12a2/redux-cardeck.git"
},
"author": "phuong",
"license": "",
"devDependencies": {
"axios-mock-adapter": "^1.6.1",
"babel-cli": "^6.26.0",
"babel-core": "^6.7.2",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-modules-require-hook": "^4.0.0",
"jsdom": "^8.1.0",
"react-tools": "^0.13.3",
"redux-devtools": "^3.4.0",
"redux-logger": "^2.6.1",
"source-map": "^0.5.3",
"unexpected": "^10.10.8",
"webpack-dev-server": "^1.14.1"
}
}
Someone already used BabelJs on Heroku before? I can't understand why it cant find babeljs at the package.json. I set the local of babel on heroku as
"scripts": {
"debug": "node debug app.js",
"start": "./node_modules/.bin/babel-node app.js"
},
I think it could be a problem with the relative structure of heroku or the fact I do not have a folder with name app
Thanks if someone can help me with this.
By default Heroku doesn't install the dependencies listed on "devDependencies" in your package.json.
You can either move your presets to "dependencies" or follow the steps here to alter this behavior.
{
"name": "react-redux-starter-kit",
"version": "1.0.0",
"description": "This would be the starter kit for react projects.",
"main": "index.html",
"scripts": {
"start": "rm -rf build/ && rm -rf dist/ && webpack && webpack-dev-server --progress --colors",
"build": "rm -rf build/ && rm -rf dist/ && NODE_ENV=production webpack --config ./webpack.production.config.babel.js --progress"
},
"repository": {
"type": "git",
"url": "git+https://rahulshettyprdxn#bitbucket.org/rahulshettyprdxn/react-devops.git"
},
"keywords": [
"react",
"webpack",
"react-native"
],
"author": "Rahul Shetty",
"license": "MIT",
"homepage": "https://bitbucket.org/rahulshettyprdxn/react-devops#readme",
"devDependencies": {
"babel-core": "^6.5.2",
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.3",
"babel-plugin-react-transform": "^2.0.0",
"babel-preset-es2015-without-strict": "0.0.2",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"eslint": "^2.2.0",
"eslint-plugin-react": "^4.1.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.9.0",
"image-webpack-loader": "^1.6.3",
"node-sass": "^3.4.2",
"react-css-modules": "^3.7.5",
"react-transform-hmr": "^1.0.2",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"bootstrap": "^3.3.6",
"react": "^0.14.7",
"react-bootstrap": "^0.28.3",
"react-dom": "^0.14.7"
}
}
Below is the error that I am receiving:
Parsing error: Unexpected token at line 2 col 8 in Atom editor.
Note that I'm currently getting this error on Windows 10.
ESLint Version:
"eslint": "^2.2.0",
"eslint-plugin-react": "^4.1.0"
I have installed linter-eslint in my Atom editor and Global npm ESLint setting is off.
I am quite confused as the error message is not that descriptive. This in no way is hampering my project but I am quite inquisitive as to why I am getting this error in my editor.
ESLint is for validating JavaScript, not JSON.
From the website:
ESLint
The pluggable linting utility for JavaScript and JSX
[emphasis mine]
(You can try your code on the online demo here, and you get the same error)
If you want to use ESLint on a JSON file, you could use a package like eslint-plugin-json.