Related
I was writing ES6 class with private properties/methods in vue project. And using eslint to lint the code. Below is the example class:
class TestClass {
constructor(value) {
this.#privateProperty = value
this.#privateMethod(this.#privateProperty)
}
#privateProperty = undefined
// lint error raised at below line
#privateMethod(value) {
this.e = value
console.log(this.e)
}
}
The vue project is created by #vue/cli 4.1.2. And here are some configures about the project:
babel.config.js:
module.exports = {
presets: ['#vue/cli-plugin-babel/preset'],
plugins: [
['#babel/plugin-proposal-class-properties', { loose: true }],
['#babel/plugin-proposal-private-methods', { loose: true }]
]
}
package.json:
{
"name": "demo-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.0",
"cesium": "^1.64.0",
"core-js": "^3.4.4",
"mockjs": "^1.1.0",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.2"
},
"devDependencies": {
"#babel/plugin-proposal-private-methods": "^7.8.0",
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-plugin-router": "^4.1.0",
"#vue/cli-plugin-unit-jest": "^4.1.0",
"#vue/cli-plugin-vuex": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"#vue/eslint-config-prettier": "^5.0.0",
"#vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.3",
"copy-webpack-plugin": "^5.1.1",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.0.0",
"lint-staged": "^9.5.0",
"node-sass": "^4.12.0",
"prettier": "^1.19.1",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.5"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,vue}": [
"vue-cli-service lint",
"git add"
]
}
}
.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: ["eslint:recommended", "plugin:vue/recommended", "#vue/prettier"],
rules: {
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
},
parserOptions: {
parser: "babel-eslint"
},
overrides: [
{
files: [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
env: {
jest: true
}
}
],
globals: {
'process': true
}
};
The problem is that eslint always raises lint error Parsing error: This experimental syntax requires enabling the parser plugin: 'classPrivateMethods' at hashtag of #privateMethod.
I googled a lot but fail to find out what I have missed.
Please help, and thanks very much.
EDIT
ECMAScript has changed, consequently; so has ESLint.
Fortunately, the change is really good one!
ESLint DIDN'T SUPPORT the TC-39 stage-4 octothorpe Syntax used to uniquely-name private-fields, and private-methods, however; ESLint has added native built-in support for the new octothorpe (#) syntax.
No longer is a plug-in needed to lint JS &/or TS that implement the octothorpe syntax in the names of their private fields &/or methods.
!IMPORTANT! Please Read the Following...
Support is included "out-of-the-box" with eslint, and nothing is required of the project's developer to make it work, HOWEVER: you have to have a version of ESLint that is equal to v8.0 or newer (at the time of writing this the version is 8.12). You also have to be aware of the Frameworks, API's, transpilers, and typings that you use with eslint. Several pieces of modularization software, included the entities I just listed, do not support ESLint v8.0 yet.
A small (but not insignificant) issue that Node.js developers have to be aware of on a regular basis is when a dependency — lets say Dependency Alpha — doesn't support the newest version of another dependency — Dependency Beta — that's used by the project.
What the NPM package manager does in a situation, when "Alpha v5" doesn't support "Beta v10", is NPM looks at Alpha's package.json project manifest to see what the newest version of dependency Beta is, that dependency Alpha can use. If it sees that it can only use versions 8 or older, then it will install Beta v8.
Because of this, many people are still looking for plugins to support many features that eslint has gained support for.
Like all widely used pieces of software. A major update, which 8.0 was, breaks things. in this case ESLint broke several things.
Its important to know what is doing what, and WHY it is doing it, in all aspects of software development & computer science.
Click the ESLint broke several things link. It shows you different stuff that broke if you having an ESLint v8 issue.
Most of the major plugins have gained support for v8 now, but a few are slacking still. Here is the list, u can see if you are using a plugin that is lacking support for v8.
You just need to install babel-eslint version v11.0.0-beta.0, but as you can see its beta version but that should work for this syntax.
I have a Vue-CLI app which was working fine until recently. Now, sometimes this message appears in the console, and the rest of the app fails to load:
TypeError: "exports" is read-only
The direct cause appears to be one of my modules, which uses module.exports to export its default function. I understand that Webpack (which Vue CLI uses) reduced support for module.exports, at least in the case of a module which also contains ES2015 import statements. But that's not the case here. And Webpack sometimes compiles it just fine.
What's particularly weird is it's intermittent. Generally I can make the problem go away temporarily by rm -rf node_modules; npm install. (Yarn install doesn't seem as reliable). But then it comes back.
What could be the cause? Perhaps two competing dependencies? My package.json looks like this:
"dependencies": {
"#turf/turf": "^5.1.6",
"bluebird": "^3.5.3",
"color": "^3.1.0",
"mapbox-gl": "^0.50.0",
"mapbox-gl-utils": "^0.4.0",
"thenify": "^3.3.0",
"vue": "^2.5.17",
"vue-carousel": "^0.16.0-rc2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.5",
"#vue/cli-plugin-eslint": "^3.2.1",
"#vue/cli-service": "^3.0.5",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.4",
"copy-webpack-plugin": "^4.6.0",
"eslint": "^5.9.0",
"eslint-plugin-vue": "^5.0.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"pug": "^2.0.3",
"pug-plain-loader": "^1.0.0",
"vue-template-compiler": "^2.5.17"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
and my vue.config.js is (simplified):
const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path');
module.exports = {
chainWebpack: config => {
config.module
.rule('eslint')
.use('eslint-loader')
.tap(options => {
options.configFile = path.resolve(__dirname, ".eslintrc.js");
return options;
})
},
configureWebpack: {
plugins: [
new CopyWebpackPlugin([
{ ... }
]
}
}
I suspect, without being certain, that the problem is triggered when I make updates in my module, which is linked using npm link.
Using Vue CLI version 2.1.1.
As a workaround, if I use an ES2015 export statement instead, yes, the app works, but then I can't run my test suite with NodeJS.
I would love any suggestions for how to make my environment more stable so this intermittent problem doesn't recur.
According to https://github.com/vuejs/vue-cli/issues/3227 this is due to some configurable behaviour. Add this in your vue.config.js:
module.exports = {
chainWebpack: (config) => {
config.resolve.symlinks(false)
}
}
It's working in my case.
I've run into this problem even after adding
chainWebpack: (config) => {
config.resolve.symlinks(false)
}
to my vue.config.js
To resolve, I deleted my node_modules folder and ran a fresh npm install
Here's the offending line of code:
import Channel from '!json-loader!yaml-loader!../../../../config/channel.yml'
As you can see, I'm using !s to bypass the normal import loader logic so I can import the parsed YAML file as a local variable at compile-time.
This works perfectly in development (with webpack-dev-server) but fails in production:
Module not found: Error: Can't resolve 'yaml-loader' in '/var/www/www.avfacts.org/releases/20180205125420/app/frontend/views/Episodes'
# /var/www/www.avfacts.org/shared/node_modules/babel-loader/lib!/var/www/www.avfacts.org/shared/node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/frontend/views/Episodes/Form.vue 87:0-78
# ./app/frontend/views/Episodes/Form.vue
# /var/www/www.avfacts.org/shared/node_modules/babel-loader/lib!/var/www/www.avfacts.org/shared/node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/frontend/views/Episodes/Edit.vue
# ./app/frontend/views/Episodes/Edit.vue
# ./app/frontend/routes.js
# ./app/frontend/packs/application.js
Here's my package.json file:
{
"name": "avfacts",
"private": true,
"dependencies": {
"#panter/vue-i18next": "^0.9.1",
"#rails/webpacker": "^3.2.1",
"axios": "^0.17.1",
"babel-polyfill": "^6.26.0",
"babel-preset-minify": "^0.2.0",
"i18next": "^10.3.0",
"lodash": "^4.17.4",
"luxon": "^0.4.0",
"marked": "^0.3.12",
"moment": "^2.20.1",
"moment-duration-format": "^2.2.1",
"normalize.css": "^7.0.0",
"numeral": "^2.0.6",
"precss": "^3.1.0",
"simplemde": "^1.11.2",
"vue": "^2.5.13",
"vue-datetime": "^1.0.0-beta.2",
"vue-loader": "^13.7.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.13",
"vuex": "^3.0.1",
"weekstart": "^1.0.0"
},
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"webpack-dev-server": "^2.11.1",
"yaml-loader": "^0.5.0"
}
}
(and yes, I did try moving yaml-loaders from devDependencies to dependencies even though that shouldn't work, and it did indeed not work)
Have you added loader in your webpack.config.js .
// webpack.config.js
module: {
loaders: [
{
test: /\.yaml$/,
include: path.resolve('data'),
loader: 'yaml',
},
],
}
As its been mentioned in https://www.npmjs.com/package/yaml-loader
EDIT: Nope, that wasn't it. I replaced yaml-loader with yaml-js-loader and called it a day. Still not sure what the problem was.
This problem was seemingly fixed by disabling require 'capistrano/rails/assets in my Capfile, thus disabling the normal Rails Sprockets asset compilation (this task also runs yarn install, but apparently in a different environment or something?).
Now only the capistrano/yarn tasks run, which perform the Webpack asset compilation successfully.
I am trying to implement the Facebook Login API from the Ionic Native library, and have a button in my application that opens up the Facebook login window. However, when that window opens on my iOS device, the following error first appeared.
Then, I began receiving a new error after executing the following commands in terminal:
$ ionic plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"
$ npm install --save #ionic-native/facebook
This issue finally resolved itself after 1 day of inactivity, and then I made my app public by clicking on this in the App Review tab of the Facebook Developers site.
Now, I am receiving yet another error, which should have been fixed by making the app public. Here is the error:
App Not Setup: The developers of this app have not set up this app properly for Facebook Login.
Here is the relevant code for this implementation. I have made sure to include the correct APP ID in all relevant variables, and the code, itself, is not causing any errors. It is simply the case that the login is not communicating with my app.
In package.json:
{
"name": "twine-app",
"author": "Anthony Krivonos",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/animations": "^4.0.1",
"#angular/common": "^4.0.1",
"#angular/compiler": "^4.0.1",
"#angular/compiler-cli": "^4.0.1",
"#angular/core": "^4.0.1",
"#angular/forms": "^4.0.1",
"#angular/http": "^4.0.1",
"#angular/platform-browser": "^4.0.1",
"#angular/platform-browser-dynamic": "^4.0.1",
"#angular/platform-server": "^4.0.1",
"#angular/router": "^4.0.1",
"#ionic-native/core": "^3.4.4",
"#ionic-native/facebook": "^3.4.4",
"#ionic/cloud-angular": "^0.11.0",
"#ionic/storage": "1.1.7",
"angular2-elastic": "^0.13.0",
"firebase": "^3.7.5",
"ionic-angular": "2.2.0",
"ionic-native": "^2.9.0",
"ionicons": "3.0.0",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.2.0",
"sw-toolbox": "3.4.0",
"typescript": "^2.2.2",
"zone.js": "0.7.2"
},
"devDependencies": {
"#ionic/app-scripts": "1.1.4",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-statusbar",
"cordova-plugin-console",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "Twine: An Ionic project",
"version": "0.0.1",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://twineme#bitbucket.org/twine-app/twine-app.git"
},
"license": "ISC"
}
In app.component.ts:
platform.ready().then(() => {
let env = this;
NativeStorage.getItem('user')
.then(function (data) {
env.nav.push(FeedPage);
Splashscreen.hide();
}, function (error) {
env.nav.push(OnboardingPage);
Splashscreen.hide();
});
StatusBar.styleDefault();
StatusBar.overlaysWebView(false);
Splashscreen.hide();
});
In onboarding.ts (Code by Sampath):
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Facebook, FacebookLoginResponse } from '#ionic-native/facebook';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public fb: Facebook) {
}
fbLogin(): void {
this.fb.login(['public_profile', 'user_friends', 'email'])
.then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res))
.catch(e => console.log('Error logging into Facebook', e));
}
}
I have scoured several different websites and forums for solutions, and seemed to have come up with no way of fixing this error. Most answers suggest to add a new platform in the Facebook developer portal with the app's Site URL, but my app runs off localhost. Additionally, I have installed all necessary plugins. Does anyone understand what may be causing this issue? Thank you so much in advance.
Edit: DO NOT suggest that I should make the app public via the Facebook Developer portal, because my question clearly outlines that I have done so already. Thanks.
Edit 2: I have tried Sampath's solution, and login works perfectly. This reaffirms that there is an issue with the above code. However, I cannot seem to pinpoint it after days of work. Here's a screenshot.
Update:
It is working fine for me.It seems your issue with facebook's app settings section.Please let me know if you need any help on that section too.
Play with Git Repo.
home.ts
import { Facebook, FacebookLoginResponse } from '#ionic-native/facebook';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public fb: Facebook) {
}
fbLogin(): void {
this.fb.login(['public_profile', 'user_friends', 'email'])
.then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res))
.catch(e => console.log('Error logging into Facebook', e));
}
}
app.module.ts
import { HomePage } from '../pages/home/home';
import { Facebook } from '#ionic-native/facebook';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
Facebook
]
})
export class AppModule { }
home.html
<button ion-button block type="button" (click)="fbLogin()">Fb Login</button>
Old Answer
I can see 3 issues on your package.json file.
Issue 1:
You have to remove "ionic-native": "2.4.1", module from it.
Issue 2:
You have to use "#ionic/app-scripts": "1.1.4", instead of "#ionic/app-scripts": "1.0.0",
Issue 3:
You have to use "ionic-angular": "2.2.0", instead of "ionic-angular": "2.0.1",
After all above changes run npm i
I fixed it! In the end, my app was configured properly on the Facebook API, and the implementation by Sampath worked like a charm. Here was my issue:
The entire time, I had been running the Ionic 2 app off a directory in my iCloud Drive on my MacBook. Since iCloud consistently updates any minor file changes, I was never able to do a complete iOS build using ionic build ios, and had to exit early using ^C. By keeping my project in a directory outside my iCloud drive, which in this case was the directory under the username, I was able to do a complete build with no errors!
In short, check out Sampath's solution code, and make sure you
are not running your Ionic 2 project off iCloud Drive.
here is the error that the browser throws in each time I npm start my app.
and here is my bower.json file:
{
"name": "myapp",
"version": "1.3.0",
"authors": "My example",
"description": "AngularJs Bootstrap example",
"keywords": ["AngularJS", "admin", "admin", "dashboard", "admin", "panel", "app", "charts", "components", "flat", "flat", "ui", "responsive", "responsive", "layout", "ui", "kit", "ui", "route", "web", "app", "widgets"],
"license": "ISC",
"homepage": "http://example/com",
"private": true,
"ignore": ["**/.*", "node_modules", "bower_components", "test", "tests"],
"dependencies": {
"jquery": "~2.1.3",
"fastclick": "~1.0.6",
"angular": "~1.5.x",
"angular-animate": "~1.5.x",
"angular-cookies": "~1.5.x",
"angular-resource": "~1.5.x",
"angular-sanitize": "~1.5.x",
"angular-touch": "~1.5.x",
"angular-ui-router": "~0.3.x",
"ngstorage": "~0.3.x",
"angular-translate": "~2.11.x",
"angular-translate-loader-url": "~2.11.x",
"angular-translate-loader-static-files": "~2.11.x",
"angular-translate-storage-cookie": "~2.11.x",
"angular-translate-storage-local": "~2.11.x",
"oclazyload": "~0.6.3",
"angular-breadcrumb": "~0.4.x",
"angular-bootstrap": "~1.1.x",
"angular-loading-bar": "~0.9.x",
"angular-scroll": "~1.0.x",
"angular-moment": "~1.0.x",
"AngularJS-Toaster": "~2.0.x",
"angular-bootstrap-nav-tree": "*",
"angular-ladda": "~0.4.x",
"ng-table": "~0.5.4",
"angular-ui-select": "~0.11.1",
"angular-ui-utils": "mask-0.2.2",
"ngImgCrop": "~0.3.2",
"angular-file-upload": "~1.1.5",
"angular-aside": "~1.1.3",
"angular-truncate": "*",
"angular-sweetalert-promised": "~1.0.4",
"angular-elastic": "~2.4.2",
"ngmap": "~1.4.2",
"tc-angular-chartjs": "~1.0.9",
"angular-ui-switch": "~0.1.0",
"angular-ckeditor": "~0.3.2",
"angular-bootstrap-calendar": "~0.7.0",
"angular-xeditable": "~0.1.8",
"checklist-model": "~0.2.4",
"ng-nestable": "~0.0.1",
"ng-flow": "~2.6.0",
"v-accordion": "~1.2.1",
"components-modernizr": "~2.8.3",
"moment": "~2.8.3",
"perfect-scrollbar": "~0.6.1",
"ladda": "~0.9.7",
"sweetalert": "~0.4.2",
"chartjs": "~1.0.2",
"jquery.sparkline.build": "~2.1.3",
"ckeditor": "~4.4.7",
"jquery-nestable": "v1.0",
"spin.js": "~2.0.2",
"bootstrap-touchspin": "~3.0.1",
"select2": "~4.0.0",
"select2-bootstrap-css": "~1.4.6",
"selectize": "~0.12.0",
"animate.css": "~3.2.0",
"font-awesome": "~4.2.0",
"themify-icons": "~0.1.0",
"bootstrap": "~3.3.7",
"bootstrap-rtl": "~3.3.1"
},
"resolutions": {
"angular": "~1.5.x"
}
}
when I run install my bower dependencies, I get a lot of prompts to choose which version of the packages I want to install.
Can somebody tell me where the problem lies actually?
This is more likely due to the code in your application and is not related to your bower dependencies. Can you post your code?
You appear to be suffering from two separate problems.
The first is an angular error generated when angular detects that its digest cycle is being thrown into an infinite loop (you can read more about it here: https://docs.angularjs.org/error/$rootScope/infdig). Check your code for issues where a watcher might be updating the value being watched or some other circular scope changes.
The second problem is regarding bower conflicts with your libraries. Bower attempts to enforce a flat hierarchy among packages it clones, which is desirable in the browser because it reduces filesize/payload. But in order to do this, it has to make sure that it does not install multiple versions of various packages and it doesn't know which versions it should be using, so it requires input from the user to determine. You most likely have many packages that are requesting conflicting versions of their dependencies. You can use the bower interface to select which version is your preference or do so manually (How to resolve Bower dependency version conflicts? has good instructions for doing so).
Another thing you might try with bower is to use specific version numbers for your packages. Using ~ or .x allows bower to include packages according to semver rules as explained here: What is the bower (and npm) version syntax?. This makes conflicts among dependencies more likely. It's also unusual to use both ~ and .x as they both perform the same function.