[bug]: yarn watch fails after adding a comment in root component talon

[elliot-zoerner-aligent]

Describe the bug Overriding a RootComponent talon and adding a commented out if statement causes the yarn watch process to fail with the following error:

ERROR in (webpack)-inject-plugin/dist/webpack-inject-plugin.loader.js?id=webpack-inject-module-1
Module build failed (from (webpack)-inject-plugin/dist/webpack-inject-plugin.loader.js):
TypeError: Cannot read property 'type' of undefined
    at Parser.match (/home/elliot.zoerner/sites/kathmandu/pwa-magento2/node_modules/@magento/directive-parser/src/Parser.js:67:22)
    at Parser.parseDirective (/home/elliot.zoerner/sites/kathmandu/pwa-magento2/node_modules/@magento/directive-parser/src/Parser.js:43:19)
    at Parser.parse (/home/elliot.zoerner/sites/kathmandu/pwa-magento2/node_modules/@magento/directive-parser/src/Parser.js:29:14)
    at module.exports (/home/elliot.zoerner/sites/kathmandu/pwa-magento2/node_modules/@magento/directive-parser/src/Parser.js:168:58)
    at /home/elliot.zoerner/sites/kathmandu/pwa-magento2/node_modules/@magento/directive-parser/src/index.js:12:38
    at Array.reduce (<anonymous>)
    at parseDirectives (/home/elliot.zoerner/sites/kathmandu/pwa-magento2/node_modules/@magento/directive-parser/src/index.js:11:40)
    at /home/elliot.zoerner/sites/kathmandu/pwa-magento2/node_modules/@magento/pwa-buildpack/lib/WebpackTools/plugins/RootComponentsPlugin.js:111:56
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Promise.all (index 6)
    at async /home/elliot.zoerner/sites/kathmandu/pwa-magento2/node_modules/@magento/pwa-buildpack/lib/WebpackTools/plugins/RootComponentsPlugin.js:100:17
    at async Promise.all (index 0)
    at async /home/elliot.zoerner/sites/kathmandu/pwa-magento2/node_modules/@magento/pwa-buildpack/lib/WebpackTools/plugins/RootComponentsPlugin.js:89:63
    at async RootComponentsPlugin.buildFetchModule (/home/elliot.zoerner/sites/kathmandu/pwa-magento2/node_modules/@magento/pwa-buildpack/lib/WebpackTools/plugins/RootComponentsPlugin.js:86:40)
ℹ ｢wdm｣: Failed to compile.

To reproduce Steps to reproduce the behavior:

1. Copy useCategoryContent.js from peregrine into your source folder.
2. Override the talon by adding the following to componentOverrideMapping:

   ['@magento/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js']:
       'src/RootComponents/Category/talons/useCategoryContent.js',

3. Edit the talon by adding the following comment inside the talon's body:

   // }

Expected behavior The project should build successfully.

Please complete the following device information:

• Device [e.g. iPhone6, PC, Mac, Pixel3]:
• OS: CentOS Linux 7
• Magento Version:
• PWA Studio Version:
  • "@magento/babel-preset-peregrine": "~1.0.1", "@magento/eslint-config": "^1.5.2", "@magento/pagebuilder": "^2.0.0", "@magento/peregrine": "^7.0.0", "@magento/pwa-buildpack": "^6.0.0", "@magento/upward-js": "^4.0.2", "@magento/venia-ui": "^4.0.0",
• NPM version npm -v: 6.14.7
• Node Version node -v: 12.16.3

Please let us know what packages this bug is in regards to:

• [ ] venia-concept
• [ ] venia-ui
• [x ] pwa-buildpack
• [ ] peregrine
• [ ] pwa-devdocs
• [ ] upward-js
• [ ] upward-spec
• [ ] create-pwa

[m2-assistant[bot]]

Hi @elliot-zoerner-aligent. Thank you for your report. To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[brendanfalkowski]

Sounds similar to: https://github.com/magento/pwa-studio/issues/2239

[sirugh]

I'm not sure what componentOverrideMapping is. Could you provide repro steps with using targets?

[elliot-zoerner-aligent]

@brendanfalkowski You're right - it looks like this is the same issue as in #2239 and has been fixed in 8.0.0.

[spencer1573]

this is definitely not fixed. I noticed an issue when copying over venia code. the parser is looking at the commented out code... is there a reason for this? I can't get my project to run without modifying a certain node modules file to not call .type when the thing being parsed is undefined. i'm not sure why there was no checking for undefined in this file

@magento/directive-parser/src/Parser.js

    }

    match(type, token = this.currentToken) {
        return token.type === type;
    }

    eat(type) 

i may naive but the code i have only works when the node_modules code is changed to handle an undefined token.

i'm working on a demo of the code in its not working should be working form to post here soon.