Stencil Start Error: SyntaxError: Unexpected token ' in JSON at position 63

[mjwhiting21]

Expected behavior

No error to show up

Actual behavior

The error appears while running stencil start, but only after the browser loads the live preview:

Debug: internal, implementation, error
    SyntaxError: Unexpected token ' in JSON at position 63
    at JSON.parse (<anonymous>)
    at Object.internals.getResponse (C:\ProgramData\nvm\v12.0.0\node_modules\@bigcommerce\stencil-cli\server\plugins\renderer\renderer.module.js:125:16)
    at processTicksAndRejections (internal/process/task_queues.js:88:5)
    at async internals.implementation (C:\ProgramData\nvm\v12.0.0\node_modules\@bigcommerce\stencil-cli\server\plugins\renderer\renderer.module.js:40:20)
    at async module.exports.internals.Manager.execute (C:\ProgramData\nvm\v12.0.0\node_modules\@bigcommerce\stencil-cli\node_modules\@hapi\hapi\lib\toolkit.js:45:28)
    at async Object.internals.handler (C:\ProgramData\nvm\v12.0.0\node_modules\@bigcommerce\stencil-cli\node_modules\@hapi\hapi\lib\handler.js:46:20)
    at async exports.execute (C:\ProgramData\nvm\v12.0.0\node_modules\@bigcommerce\stencil-cli\node_modules\@hapi\hapi\lib\handler.js:31:20)
    at async Request._lifecycle (C:\ProgramData\nvm\v12.0.0\node_modules\@bigcommerce\stencil-cli\node_modules\@hapi\hapi\lib\request.js:312:32)
    at async Request._execute (C:\ProgramData\nvm\v12.0.0\node_modules\@bigcommerce\stencil-cli\node_modules\@hapi\hapi\lib\request.js:221:9)

Steps to reproduce behavior

cd into theme directory run stencil start load preview in browser

Background info

I was using the Windows 11 beta but I was seeing also seeing this back when I was on stable Windows 10. I recently switched to Mac, and I still see it. We have also seen it on other Mac systems as well, so I believe it is OS-agnostic.

Stencil info:

Node Version: v12.0.0
Stencil 3.2.0

And I am running these versions of atom to edit my code:

Atom    : 1.58.0
Electron: 9.4.4
Chrome  : 83.0.4103.122
Node    : 12.14.1

Let me know if other info would be helpful.

See https://stackoverflow.com/questions/68775422/bigcommerce-stencil-syntaxerror-unexpected-token-in-json-at-position-63 for the original question

[drmzio]

I have the same issue. I just ignore it for now. Nothing we can do about it.

[gclift]

Joining this thread. I have the same issue with Stencil CLI 3.5.1, Node 12.22.6, MacOS 11.4 using M1 chip.

[guillermochalliol]

Same issue: Background:

Node v: 14.20.1 Stencil v: 5.3.3 Win 11 WSL 1 with ubuntu 22 Does anyone have a solution for that?

[cooladm1n]

Joining this thread. I have the same issue with Stencil 5.3.2, Node 14.20.0, Windows 11. Also on Stencil CLI 6.0.0

[Browsersync] Reloading Browsers...
Debug: internal, implementation, error 
    SyntaxError: Unexpected token ' in JSON at position 63
    at JSON.parse (<anonymous>)
    at Object.internals.getResponse (..\npm\node_modules\@bigcommerce\stencil-cli\server\plugins\renderer\renderer.module.js:133:16)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async internals.implementation (..\npm\node_modules\@bigcommerce\stencil-cli\server\plugins\renderer\renderer.module.js:48:20)
    at async exports.Manager.execute (..\npm\node_modules\@bigcommerce\stencil-cli\node_modules\@hapi\hapi\lib\toolkit.js:60:28)
    at async Object.internals.handler (..\npm\node_modules\@bigcommerce\stencil-cli\node_modules\@hapi\hapi\lib\handler.js:46:20)
    at async exports.execute (..\npm\node_modules\@bigcommerce\stencil-cli\node_modules\@hapi\hapi\lib\handler.js:31:20)
    at async Request._lifecycle (..\npm\node_modules\@bigcommerce\stencil-cli\node_modules\@hapi\hapi\lib\request.js:371:32)
    at async Request._execute (..\npm\node_modules\@bigcommerce\stencil-cli\node_modules\@hapi\hapi\lib\request.js:281:9)

[cooladm1n]

Since this error is ignored I did my own investigation. The reason why we are all getting the error is at character 63 JSON in an API method that returns a mix of quotation marks Upcoming request get: /remote/v1/cookie-notification Answer: { "PrivacyCookieEnabled": false, "PrivacyCookieNotification" : '' }

as you can see the response contains both " and ' this causes the JSON.parse function to crash.

my not the best workaround here is to use (I made this fix in my local modules in @bigcommerce -> renderer.module.js):

    function jsonParse(s) {
      if (s) {
        try {
          return JSON.parse(s.replace("''",`""`));
        } catch (e) {
          console.log('ERROR!!!!', e); // error in the above string (in this case, yes)!
          return {};
        }
      } else {
        return {};
      }
    }

I note that this edit is only aimed at a specific response from this method and does not fix any other similar cases and in general this way of fixing the error is bad, but it works. However, the correct solution would be to correct the response from the server for this API method