Maximum call stack size exceeded when component references itself

Aerlin commented 3 years ago

Version: @marko/webpack@9.0.3

Details

I'm using the webpack-express template from the marko cli tool. I have a component named comment-box which references itself for child comments. When I run the project's npm run dev (webpack serve), an error is thrown and all CSS stops being served to the browser.

Expected Behavior

To include itself as child components.

Actual Behavior

An error is thrown in console and no CSS is served to the browser.

Possible Fix

Unknown

Your Environment

Debian 10, NPM 6.14.15, Node v14.17.6,

Steps to Reproduce

Component template components/comment-box/index.marko

<div class="comment-box flex">
  <div class="comment-minimize flex-grow-0">
    <i class="fas fa-minus-square comment-icon"></i><br/>
    ▲<br>
    ▼
  </div>
  <div>
    <div class="comment-header">
      ${comment.user.username} ${comment.score} points ${comment.age}
    </div>
    <p class="comment-text">
    ${comment.text_raw}
    </p>
    <div class="comment-footer">
      reply
    </div>
  </div>
  <div class="comment-replies">
    <if(typeof comment.comments !== "undefined")>
      <for|comment| of=comment.comments>
        <comment-box comment=comment /> <!-- this is causing the error -->
      </for>
    </if>
  </div>
</div>

Stack Trace

ERROR in ./src/pages/submission/template.marko?browser-entry
  Module build failed (from ./node_modules/@marko/webpack/dist/loader/index.js):
  RangeError: /home/aerlin/projects/markotest/src/pages/submission/template.marko: Maximum call stack size exceeded
      at NodePath._containerInsert (/home/aerlin/projects/markotest/node_modules/@babel/traverse/lib/path/modification.js:51:26)
      at NodePath._containerInsertAfter (/home/aerlin/projects/markotest/node_modules/@babel/traverse/lib/path/modification.js:85:15)
      at NodePath.insertAfter (/home/aerlin/projects/markotest/node_modules/@babel/traverse/lib/path/modification.js:129:17)
      at NodePath.replaceWithMultiple (/home/aerlin/projects/markotest/node_modules/@babel/traverse/lib/path/replacement.js:36:22)
      at NodePath.pushContainer (/home/aerlin/projects/markotest/node_modules/@babel/traverse/lib/path/modification.js:215:15)
      at addBrowserDeps (/home/aerlin/projects/markotest/node_modules/@marko/translator-default/dist/util/add-dependencies.js:150:15)
      at addHydrateDeps (/home/aerlin/projects/markotest/node_modules/@marko/translator-default/dist/util/add-dependencies.js:77:5)
      at addHydrateDeps (/home/aerlin/projects/markotest/node_modules/@marko/translator-default/dist/util/add-dependencies.js:87:9)
      at addHydrateDeps (/home/aerlin/projects/markotest/node_modules/@marko/translator-default/dist/util/add-dependencies.js:87:9)
      at addHydrateDeps (/home/aerlin/projects/markotest/node_modules/@marko/translator-default/dist/util/add-dependencies.js:87:9)

  browser:modern (webpack 5.51.1) compiled with 1 error in 1570 ms

ryansolid commented 3 years ago

Try updating your version of Marko to the latest 5.15.10. We just fixed a bug this morning with the same error message and steps to reproduce as this issue. It's likely already fixed if it is caused by the same thing.

Aerlin commented 3 years ago

Thank you @ryansolid, the latest version appears to have fixed the issue. :)

marko-js / webpack