I have code like:
import 'app/css/normalize.css'
import 'app/css/app.css'
import React from 'react'
import ReactDOM from 'react-dom'
const App = () => {
return (
<div>
<h1>Finances</h1>
Test
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('app')
)
ESLint complains that the / in </h1> is invalid. Why is that?
My ESLint config
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
}
};
ESLint output
> finances-web#1.0.0 lint /home/jiewmeng/Dropbox/finances2019/web
> eslint scripts/**/*.js
/home/jiewmeng/Dropbox/finances2019/web/scripts/app.js
10:20 error Parsing error: Unexpected token /
✖ 1 problem (1 error, 0 warnings)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! finances-web#1.0.0 lint: `eslint scripts/**/*.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the finances-web#1.0.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/jiewmeng/.npm/_logs/2018-12-23T04_08_42_410Z-debug.log
Could it be something to do with my react version?
{
"name": "finances-web",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"lint": "eslint scripts/**/*.js",
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --hot --color --history-api-fallback --config webpack.config.js"
},
"author": "Jiew Meng <jiewmeng#gmail.com>",
"license": "MIT",
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^2.0.1",
"eslint": "^5.10.0",
"eslint-plugin-react": "^7.11.1",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.5.0",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.5.0",
"react-hot-loader": "^4.6.1",
"style-loader": "^0.23.1",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"#babel/polyfill": "^7.0.0",
"lodash": "^4.17.11",
"react": "^16.6.3",
"react-dom": "^16.6.3"
}
}
Ok ... realized my mistake. In eslintrc I need to add
"parser": "babel-eslint",
Related
I am relatively new to Node js and was working on .NET MVC. When I am trying to run it using command node index its giving me an below error.
H:\Services\src>node index
H:\Services\src\index.js:1
import app from './app';
^^^^^^
SyntaxError: Cannot use import statement outside a module
?[90m at Module._compile (internal/modules/cjs/loader.js:895:18)?[39m
?[90m at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)?[39m
?[90m at Module.load (internal/modules/cjs/loader.js:815:32)?[39m
?[90m at Function.Module._load (internal/modules/cjs/loader.js:727:14)?[39m
?[90m at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)?[39m
?[90m at internal/main/run_main_module.js:17:11?[39m
Below is my package.json file. It says it is using node version 8.0.0 and npm version 5.0.0. Bt I have installed node version is v12.14.0 and NPM installed version is 6.13.4.
{
"name": "core",
"version": "0.0.1",
"description": "Core",
"main": "dist/index.js",
"engines": {
"node": "8.0.0",
"npm": "5.0.0"
},
"scripts": {
"prestart": "npm run -s build",
"start": "node dist/index.js",
"dev": "nodemon src/index.js --exec \"node -r dotenv/config -r babel-register\" localdev",
"clean": "rimraf dist && rimraf -p",
"build": "npm run clean && mkdir -p dist && babel src -s -D -d dist",
"test": "jest --watch",
"lint": "esw -w src test"
},
"keywords": [
"express",
"babel",
"es6",
"es2015",
"es2016",
"es2017",
"eslint"
],
"author": "ABC",
"license": "UNLICENSED",
"dependencies": {
"babel-cli": "6.26.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "1.6.1",
"cors": "2.8.5",
"express": "4.16.4",
"js-yaml": "3.12.2",
"mssql": "5.0.0",
"winston": "3.1.0",
"winston-daily-rotate-file": "3.5.1"
},
"devDependencies": {
"babel-eslint": "7.2.3",
"babel-jest": "21.0.2",
"babel-register": "6.24.1",
"dotenv": "4.0.0",
"eslint": "4.10.0",
"eslint-config-airbnb-base": "12.1.0",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jest": "21.0.2",
"eslint-watch": "3.1.0",
"nodemon": "1.18.10",
"rimraf": "2.6.3"
},
"babel": {
"presets": [
[
"env",
{
"targets": {
"node": "current"
}
}
]
],
"plugins": [
"transform-object-rest-spread"
]
},
"eslintConfig": {
"parser": "babel-eslint",
"plugins": [
"import",
"jest"
],
"parserOptions": {
"ecmaVersion": 2017,
"sourceType": "module"
},
"env": {
"node": true,
"jest": true
},
"extends": [
"eslint:recommended"
]
}
}
I have tried different google solutions for above error but each time gets a diff error depending upon steps I am doing to fix the issue. I am just looking to run this code and test it locally.
Thanks in advance.
I am new in Node and React and I am getting this error when trying to build in Babel in order to upload the serverjs and react client to Heroku.
Everything is working fine in Postman but could not upload it to Heroku. After searching online, I found I have to compile it with Babel first.
The error message is:
SyntaxError: client/node_modules/#babel/helper-plugin-utils/src/index.js: Unexpected token (38:4)
36 |
37 | return {
> 38 | ...proto,
| ^
39 | ...api,
40 | };
41 | }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Baraa\AppData\Roaming\npm-cache\_logs\2019-03-21T16_14_47_767Z-debug.log
My webpack.config.js file contains:
module.exports = {
entry: "./client/src/index.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
module: {
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: ["react"]
}
}
]
},
devServer: {
proxy: {
"/name": "http://localhost:3011"
}
}
};
package.json
{
"name": "app04",
"version": "1.0.0",
"engines": {
"node": "11.8.0"
},
"description": "app 04",
"main": "server.js",
"scripts": {
"build-babel": "babel -d ./build ./ -s",
"build": "npm run build-babel",
"start": "npm run build && node ./build/server.js"
},
"author": "Baraa Rashad",
"dependencies": {
"accuweather": "^1.0.1",
"axios": "^0.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"body-parser": "^1.18.3",
"bootstrap": "^3.4.1",
"cors": "^2.8.5",
"crypto": "^1.0.1",
"crypto-js": "^3.1.9-1",
"ejs": "^2.5.2",
"express": "^4.14.0",
"http": "0.0.0",
"nvm": "0.0.4",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-json-pretty": "^2.0.0",
"react-router-config": "^4.4.0-beta.6",
"react-router-dom": "^4.3.1",
"reactstrap": "^7.1.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.17.0",
"babel-register": "^6.26.0",
"nodemon": "^1.18.10"
}
}
.babelrc
{
"presets": ["env", "es2015", "react"],
"plugins": ["babel-plugin-transform-class-properties"]
}
I found the solution by adjusting the package.josn like following.
"scripts": {
"devstart": "babel-node ./src/bin/www",
"start": "npm run build && node ./build/bin/www",
"build": "npm run babel-build",
"babel-build": "babel -d ./build ./src -s",
"heroku-postbuild": "cd client && npm install && npm run build"
},
When wirite https://tictactoesko.herokuapp.com/ in a browser then I
recive folowing error message:
Failed to compile ./src/index.js Module build failed: Error: Cannot
find module 'eslint/lib/formatters/stylish'
My index.js look like this
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import Game from './Game'
ReactDOM.render(, document.getElementById('root'))
My package.json looks like this
{
"name": "tic-tac-toe",
"version": "0.1.0",
"private": true,
"eslintConfig": {
"env": {
"es6": true
},
"parserOptions": {
"ecmaVersion": 8,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"extends": [
"standard",
"react-app",
"plugin:jsx-a11y/recommended"
],
"plugins": [
"jsx-a11y",
"react"
],
"rules": {
"no-trailing-spaces": "off",
"padded-blocks":"off",
"jsx-a11y/href-no-hash":"off"
}
},
"jest": {
"testMatch": [
"**/test/**/*.js?(x)"
],
"collectCoverage": true,
"coverageDirectory": "coverage",
"coverageThreshold": {
"global": {
"branches": 100,
"functions": 100,
"lines": 100,
"statements": 100
}
}
},
"dependencies": {
"chromedriver": "^2.35.0",
"jest-cli": "^22.3.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1",
"selenium-webdriver": "^4.0.0-alpha.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"lint": "./node_modules/.bin/eslint src/** test/** ",
"test": "jest",
"eject": "react-scripts eject",
"cypress:open": "cypress open"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"babel-jest": "^22.2.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"cypress": "^2.0.3",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.18.1",
"eslint-config-google": "^0.9.1",
"eslint-config-react-app": "^2.1.0",
"eslint-config-standard": "^11.0.0",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-react": "^7.7.0",
"eslint-plugin-standard": "^3.0.1",
"jest": "^22.3.0",
"react-test-renderer": "^16.2.0"
}
}
Here is the travis.yml
language: node_js node_js:
- node addons: sonarcloud: before_script:
- npm start -- --silent & script:
- npm run lint
- npm test
- sonar-scanner -Dsonar.projectKey=TicTacToe -Dsonar.organization=steinko-github -Dsonar.sources=src,test -Dsonar.host.url=https://sonarcloud.io -Dsonar.login=6472ac35c070752487408fd8c946cca6b536eec2 -Dsonar.javascript.lcov.reportPaths=coverage/lcov.info
- $(npm bin)/cypress run --record --key a1319fd9-2c6e-4888-8f02-e62f02b5001b deploy: provider: heroku
api_key:
secure: iHZKdF2ZoiXshgTeDfAR8YjhChchFLMSAxU9i62eB/XGzj6VQ2iV9RS9OnD+dfOJAebk40rtEbyxv9Vx4RXBsWCNVMifg6rMoAiW9Bp3Us8Idw5f2kLKD0Sx6qzNZqdn9TzQT3EU12jLjIgpUse9PfJxisd/HZqmtdYQdJCMGcgOZk4lZJmbpe8tmCcU0tnUPxJnuDPUzkrViAK3pe/t8/m1mdZAZ4+2mAIXuJzsf//JJimdwIE3ZqSoxQjEo9l4QmXcdStrC3iAx+GLgjt2j9Rf0ERnuKYPdfSxPUw8O4/tJHEyF32E+mUPNxX1PvEyzkP6NtBss/288W0NPg42rxilEivNeJxWS8fGgUyQx52dHXcBZEdPOsye233WtEHvlIYzDj2Gp+IqD6Q2PhptobqK7XJuyM7xS3QH8Yao/JB2ZYz9PnZzngsfC3cohgxFJ3YjWVmfy87Y/BB5JBVAXARMwg6zvKKt+lHdsVbR3CcHN01S9wG4YgdiAViaIa5vEOUcI7OCGRdYlyJTKau4ENj/DahPxG+L7+wbrx292kL/9zgg0fINaByBOg+YSJN/OMQOphNMQZR/gUpf/N1T6uZVogH+ZgzY7XXtSRI3EFl4GgIcHFxoNulvNRmJOR04sK0cyznuwifmLjGiuxGCUeI9MUbSoAiNws7KrK6i9uw=
app: tictactoesko
And the deployment log feom Heroku looks like this
Building dependencies
Installing node modules (package.json + package-lock)
up to date in 11.521s
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 57.4M
-----> Launching...
Released v11
https://tictactoesko.herokuapp.com/ deployed to Heroku
When wirite https://tictactoesko.herokuapp.com/ in a browser then I
recive folowing error message:
Failed to compile ./src/index.js Module build failed: Error: Cannot
find module 'eslint/lib/formatters/stylish'
How could i correct this error?
You installed eslint manually and this can break things. You should uninstall it and edit just your .eslintrc file. Look the comments of #gaearon in this Github issue
But if you wish to control directly and customize everything. I would eject the project: npm run eject. Check the guide of Create React App.
I´m building my first monorepo using Lerna.
My lerna.json:
{
"lerna": "2.9.0",
"npmClient": "yarn",
"useWorkspaces": true,
"packages": [
"packages/*"
]
}
The lerna package.json is like:
{
"name": "monorepo",
"version": "1.0.0",
"workspaces": [
"packages/*"
],
"private": true,
"scripts": {
"start": "lerna exec -- start",
"server": "lerna exec -scope #monorepo/server -- server"
},
"devDependencies": {
"lerna": "^2.9.0"
}
}
And my project has the following package.json:
{
"name": "#monorepo/server",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "concurrently \"babel-node start-server\" \"babel-node start-auth-client\" \"babel-node start-editor-client\"",
"server": "nodemon --exec \"babel-node start-server.js\"",
"lint": "eslint ."
},
"dependencies": {
"#babel/cli": "^6.24.1",
"#babel/core": "^6.25.0",
"#babel/plugin-transform-runtime": "^6.23.0",
"#babel/preset-env": "^1.6.1",
"#babel/preset-es2017": "^6.24.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.17.2",
"connect-mongo": "^2.0.0",
"crypto": "^1.0.1",
"express": "^4.15.3",
"express-graphql": "^0.6.12",
"graphql": "^0.13.1",
"graphql-relay": "^0.5.4",
"jwt-simple": "^0.5.1",
"mongoose": "^5.0.10",
"morgan": "^1.8.2",
"nodemailer": "^4.6.0",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"path": "^0.12.7",
"validator": "^9.1.1"
},
"devDependencies": {
"concurrently": "3.5.1",
"eslint": "^4.18.2",
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-import": "2.9.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.7.0",
"fs-extra": "^5.0.0",
"node-fetch": "^2.1.1",
"nodemon": "^1.11.0"
},
"babel": {
"presets": [
"#babel/es2017",
"#babel/preset-env"
],
"plugins": [
"transform-runtime"
]
}
}
My problem is running the server application, issuing one of the following commands:
$ yarn start
yarn run v1.5.1
$ concurrently "babel-node start-server" "babel-node start-auth-client" "babel-node start-editor-client"
[0] 'babel-node' Program is not recognized as an internal or external command, operable program or batch file.
[1] 'babel-node' Program is not recognized as an internal or external command, operable program or batch file.
[2] 'babel-node' Program is not recognized as an internal or external command, operable program or batch file.
[2] babel-node start-editor-client exited with code 1
[1] babel-node start-auth-client exited with code 1
[0] babel-node start-server exited with code 1
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: C:\\WINDOWS\\system32\\cmd.exe
Arguments: /d /s /c concurrently \"babel-node start-server\" \"babel-node start-auth-client\" \"babel-node start-editor-client\"
Directory: c:\\dev\\monorepo\\packages\\server
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "c:\\dev\\monorepo\\packages\\server\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I think this is due to the fact that all packages now reside at package root/node_modules.
Any ideas how to fix that?
npm v3.10.10 node v6.11.0 eslint v4.2.0
You can pull the repo here. Just npm install then npm run lint
I'm trying to use the following export statement (comment works, but is ugly):
containers/index.js
export MainContainer from './Main/MainContainer'
// export { default as MainContainer } from './Main/MainContainer'
config/routes.js
import React from 'react'
import { Route, HashRouter, browserHistory } from 'react-router-dom'
import { MainContainer } from '../containers'
const routes = (
<HashRouter history={browserHistory}>
<Route path="/" component={MainContainer} />
</HashRouter>
)
export default routes
I installed the following package:
npm install babel-eslint#next --save-dev
.eslintrc
{
parser: "babel-eslint",
en: {
es6: true,
browser: true
},
extends: ["eslint:recommended", "plugin:react/recommended", "standard"],
plugins: [
"react"
]
}
.eslintrc.json
{
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"off",
"always"
]
}
}
However even with that installed I still get the error about the MainContainer when I npm run lint
package.json
"scripts": {
"start": "webpack-dev-server",
"production": "webpack -p",
"lint": "eslint app/.; exit 0",
"fix": "eslint --fix app/.; exit 0"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-eslint": "^8.0.0-alpha.13",
"babel-loader": "^7.1.1",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.4",
"eslint": "^4.2.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.1.0",
"eslint-plugin-standard": "^3.0.1",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^3.2.0",
"webpack-dev-server": "^2.5.1"
}
folder structure
Figured it out! I needed to edit my .eslintrc.json file, not the .eslintrc
https://github.com/babel/babel-eslint/issues/6
{
...
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
...
}