![](/img/trans.png)
[英]Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: Cannot read property 'bindings' of null
[英]eslint-loader/index.js Cannot read property 'range' of null
我正在尝试确定以下问题是否由我的配置文件中的错误或 ESLint 中的某种错误引起; 以及最终如何修复它。
ESLint 版本:5.9.0
错误文本:
Module build failed (from ./node_modules/eslint-loader/index.js): TypeError: Cannot read property 'range' of null at Array.forEach (<anonymous>)
错误原因:
在eslint/lib/rules/template-curly-spacing
的第 117 行, eslint/lib/rules/template-curly-spacing
了一个名为getFirstToken
的函数。 该函数调用getOneToken
,它位于eslint/lib/token-store/forward-token-cursor.js
第 55 行,该函数如下所示:
getOneToken() { return (this.index <= this.indexEnd) ? this.tokens[this.index] : null; }
出于某种原因, this
(ForwardTokenCursor) 的index
值超出了this.indexEnd
的范围,这就是 ForwardTokenCursor 在 eslint 返回错误之前的样子: {current: null, tokens: Array(1188), index: 1092, indexEnd: 1090 }
如您所见,getOneToken 函数稍后将向 getTokenBefore 返回 null,当访问此 null 对象的假定属性时,它会导致 linter 出错。 为什么会发生这种情况? 我认为这是我设置 eslint 方式的问题,尽管我不知道为什么会导致这种错误。 无论如何,我已经在此处包含了我的配置信息。
webpack.config.dev.js:
'use strict';
const autoprefixer = require('autoprefixer');
const path = require('path');
const paths = require('../paths');
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.config.common.js');
const InterpolateHtmlPlugin = require('../../scripts/create_react_app_utils/InterpolateHtmlPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const getClientEnvironment = require('../env');
const fs = require('fs');
// process.env.API_ENV = 'mock';
const env = getClientEnvironment('');
module.exports = merge(common, {
entry: [
require.resolve('../../scripts/create_react_app_utils/webpackHotDevClient'),
require.resolve('../polyfills'),
/* require.resolve('react-error-overlay'), */
paths.appIndexJs
],
output: {
pathinfo: true,
filename: 'static/js/bundle.js',
chunkFilename: 'static/js/main-react.chunk.js',
publicPath: '/',
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath),
},
mode: 'development',
devtool: 'inline-source-map',
module: {
strictExportPresence: true,
rules: [
{
test: /\.(js|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
/\.scss$/,
],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
sourceMap: true
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader", // translates CSS into CommonJS
options: {
sourceMap: true,
}
},
{
loader: "sass-loader", // compiles Sass to CSS
options: {
sourceMap: true,
data: '@import "globals";',
includePaths: [path.resolve(paths.appSrc, "./styles")]
}
}]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
new webpack.DefinePlugin(env.stringified),
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
new CaseSensitivePathsPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// new BundleAnalyzerPlugin()
]
});
.eslintrc
{
"parser": "babel-eslint",
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true
},
"globals": {
"React":true
},
"plugins": [
"react"
],
"extends": "airbnb",
"rules": {
"max-len": 0,
"one-var": 0,
"no-console": ["error", { "allow": ["warn", "error"] }],
"no-mixed-operators": 0,
"no-multiple-empty-lines": ["error", {"max": 2}],
"no-prototype-builtins": 0,
"class-methods-use-this": 0,
"padded-blocks": 0,
"no-return-assign": 0,
"no-unused-expressions": ["error", { "allowTernary": true }],
"camelcase": 0,
"no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
"prefer-destructuring": ["off"],
"no-tabs": 0,
"no-mixed-spaces-and-tabs": "error",
"indent": ["error", "tab", { "SwitchCase": 1 }],
"new-cap": 0,
"spaced-comment": ["error", "always", { "exceptions": ["*"] }],
"import/no-named-as-default": 0,
"import/no-unresolved": 0, // Linting will not interpret aliases if this rule is turned on
"import/no-extraneous-dependencies": 0,
"import/extensions": 0,
"jsx-a11y/href-no-hash": 0,
"jsx-a11y/no-static-element-interactions": 0,
"jsx-a11y/no-noninteractive-element-interactions": 0, //Allow us to put event handlers on any HTML element
"jsx-a11y/no-noninteractive-tabindex": 0,
"react/forbid-prop-types": [2, { "forbid": ["any"] }],
"react/jsx-indent": [2, "tab"],
"react/jsx-indent-props": ["error", "tab"],
"react/jsx-filename-extension": 0,
"react/jsx-no-bind": 1,
"react/prefer-stateless-function": [1, { "ignorePureComponents": true }],
"react/sort-comp": 0
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"modules": true
}
}
}
如果需要任何其他配置或构建文件,请在评论中告诉我。 感谢您的帮助,我在 eslint github 上发现了几个似乎与此问题有关的错误票,但它们已关闭且似乎未解决。 https://github.com/eslint/eslint/issues/9872
在您的“.eslintrc”配置文件中添加
.."rules": {
"indent": ["error", 2, {
"ignoredNodes": ["TemplateLiteral"]
}]
or
"index": "off"
https://www.javascripttutorial.net/es6/javascript-template-literals/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.