Cannot read property 'end' of null
- Dominant language
- JavaScript
- Stars
- 4.4k
- Forks
- 217
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
I don't know what causes this bug. I can only tell the symptoms.
I get this error when I declare and initialize a variable before the React component. It occurs even if I am not using that variable anywhere.
If I export that variable or declare the variable (without exporting) after the React Component, the error doesn't occur. Another way to prevent the error is to disable the plugin `minify-constant-folding`.
**To Reproduce**
Since I don't know what exactly causes the bug, I cannot give an MWE.
**Actual Output**
`Cannot read property 'end' of null`
**Expected Output**
No errors.
**Stack Trace**
Here is how the stack looks like:
```
ERROR in ./.tsx
Module build failed: TypeError: .tsx: Cannot read property 'end' of null
at _evaluate (node_modules\babel-traverse\lib\path\evaluation.js:159:58)
at evaluate (node_modules\babel-traverse\lib\path\evaluation.js:65:17)
at NodePath.evaluate (node_modules\babel-traverse\lib\path\evaluation.js:41:15)
at evaluateIdentifier (node_modules\babel-helper-evaluate-path\lib\index.js:129:15)
at evaluate (node_modules\babel-helper-evaluate-path\lib\index.js:21:12)
at PluginPass.Expression (node_modules\babel-plugin-minify-constant-folding\lib\index.js:165:21)
at PluginPass.newFn (node_modules\babel-traverse\lib\visitors.js:318:17)
at newFn (node_modules\babel-traverse\lib\visitors.js:276:21)
at NodePath._call (node_modules\babel-traverse\lib\path\context.js:76:18)
at NodePath.call (node_modules\babel-traverse\lib\path\context.js:48:17)
at NodePath.visit (node_modules\babel-traverse\lib\path\context.js:105:12)
at TraversalContext.visitQueue (node_modules\babel-traverse\lib\context.js:150:16)
at TraversalContext.visitMultiple (node_modules\babel-traverse\lib\context.js:103:17)
at TraversalContext.visit (node_modules\babel-traverse\lib\context.js:190:19)
at Function.traverse.node (node_modules\babel-traverse\lib\index.js:114:17)
at NodePath.visit (node_modules\babel-traverse\lib\path\context.js:115:19)
at TraversalContext.visitQueue (node_modules\babel-traverse\lib\context.js:150:16)
at TraversalContext.visitMultiple (node_modules\babel-traverse\lib\context.js:103:17)
at TraversalContext.visit (node_modules\babel-traverse\lib\context.js:190:19)
at Function.traverse.node (node_modules\babel-traverse\lib\index.js:114:17)
at NodePath.visit (node_modules\babel-traverse\lib\path\context.js:115:19)
at TraversalContext.visitQueue (node_modules\babel-traverse\lib\context.js:150:16)
at TraversalContext.visitSingle (node_modules\babel-traverse\lib\context.js:108:19)
at TraversalContext.visit (node_modules\babel-traverse\lib\context.js:192:19)
at Function.traverse.node (node_modules\babel-traverse\lib\index.js:114:17)
at NodePath.visit (node_modules\babel-traverse\lib\path\context.js:115:19)
at TraversalContext.visitQueue (node_modules\babel-traverse\lib\context.js:150:16)
at TraversalContext.visitMultiple (node_modules\babel-traverse\lib\context.js:103:17)
at TraversalContext.visit (node_modules\babel-traverse\lib\context.js:190:19)
at Function.traverse.node (node_modules\babel-traverse\lib\index.js:114:17)
at NodePath.visit (node_modules\babel-traverse\lib\path\context.js:115:19)
at TraversalContext.visitQueue (node_modules\babel-traverse\lib\context.js:150:16)
at TraversalContext.visitSingle (node_modules\babel-traverse\lib\context.js:108:19)
at TraversalContext.visit (node_modules\babel-traverse\lib\context.js:192:19)
at Function.traverse.node (node_modules\babel-traverse\lib\index.js:114:17)
at NodePath.visit (node_modules\babel-traverse\lib\path\context.js:115:19)
```
**Configuration**
I write my code in Typescript with `target` and `module` both set to `esnext` in `tsconfig.json`.
I package the code with webpack using `ts-loader` and output of `ts-loader` passed to `babel-loader`.
The `babel-loader` uses `babel-preset-minify`. Here are the other babel packages:
"babel-cli": "6.26.0",
"babel-core": "6.26.3",
"babel-loader": "7.1.4",
"babel-plugin-lodash": "3.3.2",
"babel-plugin-transform-builtin-extend": "1.1.2",
"babel-plugin-webpack-alias": "2.1.2",
"babel-polyfill": "6.26.0",
"babel-preset-env": "1.7.0",
"babel-preset-minify": "0.4.2",
"babel-preset-react": "6.24.1",
"babel-preset-react-optimize": "1.0.1",
"babel-preset-stage-2": "6.24.1"
babelrc:
I pass this config to the Webpack `babel-loader`.
```json5
{
"babelrc": false,
"cacheDirectory": true,
"presets": [
"minify",
"react-optimize",
[
"env",
{
"modules": false,
"loose": true,
"useBuiltIns": true,
"debug": false
}
],
"react",
"stage-2"
],
"plugins": [
[
"builtin-extend",
{
"globals": [
"Error"
]
}
],
"lodash"
]
}
```
**Possible solution**
1. `export` the variable
1. remove the variable declaration and move the values right in the code.
1. disable the plugin `minify-constant-folding` by passing in the option `evaluate` as false. See [this](https://github.com/babel/minify/tree/master/packages/babel-preset-minify#options).
**Additional context**
It occurs in `evaluation.js` in babel-traverse when `binding.path.node` is `null`.

This is how `binding.path` looks like:

Let me know if I you need more information.
Contributor guide
Assessment
This issue has not been assessed yet.