我试图在反应应用中设置auth0并且此错误在我的auth0= new auth0.WebAuth({
初始化时不断弹出,我尝试使用/* eslint-disable */
禁用eslint但是它已经#39 ; s不工作。
这是我的Auth.js文件:
// imports EventEmitter
import { EventEmitter } from 'events';
// imports the Auth0 JS library
import auth0 from 'auth0-js';
// imports Auth0 credentials from the auth0-variables.js file
import { AUTH_CONFIG } from './auth0-variables';
// imports the history module, which will be created later
import history from '../history';
export default class Auth extends EventEmitter {
// An instance of Auth0 is instantiated with Auth0 credentials gotten from the auth0-variables.js file
auth0 = new auth0.WebAuth({ //this is where I'm getting the error
domain: AUTH_CONFIG.domain,
clientID: AUTH_CONFIG.clientId,
redirectUri: AUTH_CONFIG.callbackUrl,
audience: `https://${AUTH_CONFIG.domain}/userinfo`,
// Telling Auth0 what to return after a successful authentication, in this case, the token and the id_token
responseType: 'token id_token',
// To retrieve a user's profile after authentication, we need to add openid profile to the the scope.
scope: 'openid profile'
});
这是我的.eslint:
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:import/warnings"
],
"plugins": [
"react"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true,
"experimentalObjectRestSpread": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true,
"jquery": true,
"mocha": true
},
"rules": {
"no-unexpected-multiline": "warn",
"comma-dangle": 0,
"quotes": 0,
"no-console": 1,
"no-debugger": 1,
"no-var": 1,
"semi": [1, "always"],
"no-trailing-spaces": 0,
"eol-last": 0,
"no-unused-vars": 0,
"no-underscore-dangle": 0,
"no-alert": 0,
"no-lone-blocks": 0,
"jsx-quotes": 1,
"react/display-name": [ 1, {"ignoreTranspilerName": false }],
"react/forbid-prop-types": [1, {"forbid": ["any"]}],
"react/jsx-boolean-value": 1,
"react/jsx-closing-bracket-location": 0,
"react/jsx-curly-spacing": 1,
"react/jsx-indent-props": 0,
"react/jsx-key": 1,
"react/jsx-max-props-per-line": 0,
"react/jsx-no-bind": 1,
"react/jsx-no-duplicate-props": 1,
"react/jsx-no-literals": 0,
"react/jsx-no-undef": 1,
"react/jsx-pascal-case": 1,
"react/jsx-sort-prop-types": 0,
"react/jsx-sort-props": 0,
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
"react/no-danger": 1,
"react/no-did-mount-set-state": 1,
"react/no-did-update-set-state": 1,
"react/no-direct-mutation-state": 1,
"react/no-multi-comp": 1,
"react/no-set-state": 0,
"react/no-unknown-property": 1,
"react/prefer-es6-class": 1,
"react/prop-types": 1,
"react/react-in-jsx-scope": 1,
"react/require-extension": 1,
"react/self-closing-comp": 1,
"react/sort-comp": 1,
"react/wrap-multilines": 1
},
}
这是我的package.json:
{
"name": "TurboWeb",
"version": "1.0.0",
"description": "",
"scripts": {
"prestart": "babel-node tools/startMessage.js",
"start": "npm-run-all --parallel open:src lint:watch test:watch",
"open:src": "babel-node tools/srcServer.js",
"lint": "node_modules/.bin/esw webpack.config.* src tools",
"lint:watch": "npm run lint -- --watch",
"test": "mocha --reporter spec tools/testSetup.js \"src/**/*.test.js\"",
"test:watch": "npm run test -- --watch"
},
"author": "Cory House",
"license": "MIT",
"dependencies": {
"auth0-js": "^9.2.2",
"babel-polyfill": "6.8.0",
"body-parser": "^1.18.2",
"bootstrap": "4.0.0-beta.2",
"events": "^2.0.0",
"history": "^4.7.2",
"jquery": "2.2.3",
"popper.js": "^1.12.9",
"prop-types": "^15.6.0",
"pusher": "^1.5.1",
"react": "15.6.2",
"react-dom": "15.6.2",
"react-redux": "4.4.5",
"react-router": "3.2.0",
"react-router-redux": "4.0.4",
"redux": "3.5.2",
"redux-thunk": "2.0.1",
"semantic-ui-css": "^2.2.12",
"semantic-ui-react": "^0.74.2",
"toastr": "2.1.2"
},
"devDependencies": {
"babel-cli": "6.8.0",
"babel-core": "6.8.0",
"babel-loader": "7.1.2",
"babel-plugin-react-display-name": "2.0.0",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-react-hmre": "1.1.1",
"babel-register": "6.8.0",
"cheerio": "0.22.0",
"colors": "1.1.2",
"compression": "1.6.1",
"cross-env": "1.0.7",
"css-loader": "0.23.1",
"enzyme": "^3.0.0",
"enzyme-adapter-react-15": "^1.0.5",
"eslint": "2.10.1",
"eslint-plugin-import": "1.6.1",
"eslint-plugin-react": "5.0.1",
"eslint-watch": "2.1.11",
"eventsource-polyfill": "0.9.6",
"expect": "1.19.0",
"express": "4.13.4",
"extract-loader": "^1.0.1",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "^0.8.5",
"html-loader": "^0.5.1",
"jsdom": "8.5.0",
"mocha": "2.4.5",
"nock": "8.0.0",
"npm-run-all": "1.8.0",
"open": "0.0.5",
"react-addons-test-utils": "15.0.2",
"react-test-renderer": "^15.5.0",
"redux-immutable-state-invariant": "1.2.3",
"redux-mock-store": "1.0.2",
"rimraf": "2.5.2",
"style-loader": "0.13.1",
"url-loader": "^0.5.7",
"webpack": "^3.10.0",
"webpack-dev-middleware": "2.0.3",
"webpack-hot-middleware": "2.10.0"
},
"repository": {
"type": "git",
"url": "https://github.com/coryhouse/pluralsight-redux-starter"
}
}
和我的webpack.config以防万一:
import webpack from 'webpack';
import path from 'path';
export default {
devtool: 'cheap-module-eval-source-map',
// noInfo: false,
entry: [
'eventsource-polyfill', // necessary for hot reloading with IE
'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
'./src/index'
],
target: 'web',
output: {
path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
inline: false,
contentBase: './src'
},
plugins: [
new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(),
new webpack.ProvidePlugin({ $: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
// In case you imported plugins individually, you must also require them here:
Util: "exports-loader?Util!bootstrap/js/dist/util",
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown"})
],
module: {
rules: [
{
test: /\.js$/,
include: path.join(__dirname, 'src'),
loaders: 'babel-loader'
}, {
test: /(\.css)$/,
loaders: ['style-loader', 'css-loader']
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
}, {
test: /\.(woff|woff2)$/,
loader: 'url-loader'
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader'
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader'
}, {
test: /\.(png|jp(e*)g|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}
]
}
]
}
};
答案 0 :(得分:0)
类实例属性(类体内的auth = new auth0.WebAuth(/*...*/);
)仍然是实验性的。如果您有兴趣,可以follow development of the proposal - 截至撰写本文时,它位于tc39 proposal process的第3阶段。
如果你想今天使用类属性(我看到你正在使用React,它们在React代码中很常见),并且假设你已经设置了Babel,ESLint可以解析它们和其他实验性功能babel-eslint的帮助。自述文件有更完整的说明,但您需要npm install --save-dev babel-eslint
并将"parser": "babel-eslint"
添加到.eslintrc.json
。