fix: cannot read properties of undefined (reading 'line')

[tthheusalmeida]

Q	A
Fixed Issues?	Fixes #1, Fixes #2
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature?
Tests Added + Pass?
Documentation PR Link
Any Dependency Changes?
License	MIT

Hey there, I'm using @babel/generator and this error appeared for me:

@babel\generator\lib\printer.js:599
const nodeStartLine = hasLoc ? nodeLoc.start.line : 0;
TypeError: Cannot read properties of undefined (reading 'line')

So I went straight to this node_module file and added this line of code:
const nodeStartLine = hasLoc ? (nodeLoc?.start?.line ? nodeLoc.start.line : 0) : 0;

Giving more context:

I'm using:
node: v20.11.1
npm: v20.2.4

I used the parser with the object { sourceType: 'module' },
to generate the AST and then I performed some functions with traverse, then when running the generator the above error occurs with the file below:

/* eslint-disable vars-on-top */
/* eslint-disable no-var */
/* eslint-disable no-param-reassign */
/* eslint-disable no-bitwise */
// eslint-disable-next-line import/prefer-default-export

export function lightenHexColor(col, amt) {
   let usePound = false;

   if (col && col[0] === '#') {
     col = col.slice(1);
     usePound = true;
   }

   const num = parseInt(col, 16);
   let r = (num >> 16) + amt;

   if (r > 255) r = 255;
   else if (r < 0) r = 0;

   let b = ((num >> 8) & 0x00FF) + amt;

   if (b > 255) b = 255;
   else if (b < 0) b = 0;

   let g = (num & 0x0000FF) + amt;

   if (g > 255) g = 255;
   else if (g < 0) g = 0;

   return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);
}

export function getHexColorFromRoot(options) {
   const {
     type,
     isBackground,
     lighten,
   } = options;
   let colorFromRoot = '';

   const definedColor = isBackground
     // eslint-disable-next-line prefer-template
     ? '--background-' + type + '-type'
     // eslint-disable-next-line prefer-template
     : '--' + type + '-type';

   const rootColor = getComputedStyle(document.documentElement)
     .getPropertyValue(definedColor)
     .trim();

   const isStandardColor = /^#[0-9a-f]{3,6}$/i;

   if (rootColor.match(isStandardColor)) {
     const color = lightenHexColor(rootColor, lighten);

     colorFromRoot = color;
   } else {
     var split = rootColor.split(' ');

     split[1] = lightenHexColor(split[1], lighten);
     split[3] = lightenHexColor(split[3], lighten);

     colorFromRoot = split.join(' ');
   }

   return colorFromRoot;
}

export function getSolidColor(type) {
   let newType = type;

   const typesWithMoreColors = [
     {
       type: 'flying',
       changeFor: 'water',
     },
     {
       type: 'ground',
       changeFor: 'electric',
     },
     {
       type: 'dragon',
       changeFor: 'ice',
     },
   ];

   const isMoreThenOneColor = typesWithMoreColors
     .filter((elem) => elem.type === type).shift();

   if (isMoreThenOneColor) {
     newType = isMoreThenOneColor.changeFor;
   }

   return newType;
}

export function getCardBackgroundColor(type) {
   if (type) {
     const color = getHexColorFromRoot({
       type: getSolidColor(type),
       isBackground: true,
       Lighten: 32,
     });

     // eslint-disable-next-line prefer-template
     return 'background: ' + color;
   }
   return 'background: var(--card-white);';
}

I thought about this solution, because I noticed that sometimes AST doesn't put either start, or start.line.

[babel-bot]

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/56987

[liuxingbaoyu]

Thank you for your PR.
I think the fix should be in the plugin, since Babel assumes that the AST does not have node.loc or has a valid node.loc.

[tthheusalmeida]

liuxingbaoyu, which plugin?

[liuxingbaoyu]

That could be a 3rd party plugin you're using, with current information I'm not sure which it is.

[tthheusalmeida]

Thanks for the idea of possibly being the plugin, but I'm not even using a plugin.

I didn't find a plugin that can do this for me but I found a solution.

The solution was to create a function in traverse that adds loc to nodes that may not be defined. This function will be the first to align the missing nodes:

function setDefaultLoc(ast) {
 const currentAst = { ...ast };

 traverse(currentAst, {
   enter(path) {
     if (!path.node?.loc) {
       path.node.loc = { start: { line: 0, column: 0 }, end: { line: 0, column: 0 } };
     }
   }
 });

 return currentAst;
};

And after each operation in traverse I validate that node.loc exists but if start or start.line are not defined, I delete node.loc:

   // Handle loc property
   if (path.node.loc) {
     if (!path.node.loc.start || !path.node.loc.start.line) {
       delete path.node.loc;
     }
   }

Example with traverse:

function destroyedToUnmouthed(ast) {
   const currentAst = { ...ast };
   traverse(currentAst, {
     enter(path) {
       if (path.isIdentifier({ name: 'destroyed' })) {
         path.node.name = 'unmounted';

         console.info(MIGRATION.SUCCESSFULL.DESTROYED_TO_UNMOUNTED);
       }

       // Handle loc property
       if (path.node?.loc) {
         if (!path.node.loc.start || !path.node.loc.start.line) {
           delete path.node.loc;
         }
       }
     }
   });

Thank you for your support.