Why it could not recongnize JSX in .cache\develop-static-entry.js ?

[wangpin34]

My project named docs-engine is a package with predefined gatsby-config.js, gatsby-node.js ,gatsby-ssr.js, and an index.js defined the commands.

index.js

yargs
  .command(
    'develop',
    'start developer server',
    {
      envFile: {
        alias: 'ef',
        default: '',
      },
      source: {
        alias: 'src',
        default: 'docs',
      },
      [`swagger-source`]: {
        alias: 'ssrc',
        default: 'swagger',
      },
    },
    function handler(argv) {
      let { ef, src, ssrc, dest } = argv
      ef = resolveRelativePath(ef)
      src = resolveRelativePath(src)
      ssrc = resolveRelativePath(ssrc)

      const localSrc = src
        .split(',')
        .filter((s) => !!s)
        .map((s) => path.join(__dirname, path.basename(s)))

      process.env.root = process.cwd()
      process.env.src = src
      process.env.ssrc = ssrc

      console.log(`env file: ${ef}\nsource folder: ${src}\nswagger source folder: ${ssrc}`)

      dotenv.config({ path: ef })

      process.chdir(__dirname)

      const execTarget = path.join(process.env.root, './node_modules/gatsby-cli')

      console.log(`execTarget: ${execTarget}`)

      Promise.all(
        src
          .split(',')
          .filter((s) => !!s)
          .map((s) => s !== path.join(__dirname, path.basename(s)) && copy(s, path.join(__dirname, path.basename(s))))
      )
        .then(() => {
          const p = cp.fork(execTarget, ['develop'], {
            cwd: process.cwd(),
            silent: false,
          })
        })
        .catch((err) => {
          console.error(err)
        })
    }
  )

This project was created by gatsby new the-name so the required packages are recorded at the package.json. I've tried the develop and build command here and it works.

Summary

The issue is when it was installed locally yarn add ../docs-engine from another project, named test-docs-engine, the command develop or build ended with an error like:

Generating SSR bundle failed                                                                                                                                      Unexpected token (31:4)                                                                                                                                           
File: .cache/develop-static-entry.js:31:4                                                                                                                        

Stepped int the file it said, I found the error line is just code of JSX:

node_modules/docs-engine/.cache/develop-static-entry.js

<meta key="environment" name="note" content="environment=development" />,

I guess it might be some issue with react preset which responsible for parsing JSX, but I don't know how to debug, or even collect more clues.

Relevant information

Environment (if relevant)

System:
OS: Windows 10 10.0.18363
CPU: (4) x64 Intel(R) Core(TM) i5-5300U CPU @ 2.30GHz
Binaries:
Node: 12.17.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.9.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 3.6.3 - /d/programs/python/python
Browsers:
Chrome: 84.0.4147.89
Edge: Spartan (44.18362.449.0)

--

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

Thank you for reaching my post! Any help would be great.

[chitoku-k]

I also faced this issue and found a workaround that probably works for you as well.

Install babel-plugin-syntax-jsx and add the following to your gatsby-node.js:

exports.onCreateBabelConfig = ({
  actions: {
    setBabelPlugin,
  },
}) => {
  setBabelPlugin({
    name: 'babel-plugin-syntax-jsx',
  })
}

Hope this helps dig into the root cause!

[wangpin34]

@chitoku-k Thanks for your comment, it also works for me.

Maybe it's the time to close it, but, I guess a deeper explanation would be nice. Unfornaturly, I have no idea.

[wardpeet]

We need a little bit more information on how you're adding <meta key="environment" name="note" content="environment=development" />,

[wangpin34]

@wardpeet Thanks for your reply.

It's not added manually actually but part of the source code of gatsby itself.

gatsby/packages/gatsby/cache-dir/develop-static-entry.js

Line 31 in af973d4

<meta key="environment" name="note" content="environment=development" />,

And, it seems not a problem with this file since gatsby works in the normal flow(gatsby developing/build), but not in my case.

I guess it might be some issue with the script that calling babel/react-preset which responsible for parsing JSX. In my script(In the head of the post you will find it), it doesn't work.