'<unnamed>' panicked at 'cannot access a scoped thread local variable without calling `set` first'

[mischnic]

🐛 bug report

Importing an MDX file causes a Rust panic

😯 Current Behavior

@parcel/transformer-js: cannot access a scoped thread local variable without calling `set` first

  Error: cannot access a scoped thread local variable without calling `set` first
  at Object.transform (packages/transformers/js/src/JSTransformer.js:371:9)
  at Transformation.runTransformer (packages/core/core/src/Transformation.js:760:7)
  at Transformation.runPipeline (packages/core/core/src/Transformation.js:403:36)
  at Transformation.runPipelines (packages/core/core/src/Transformation.js:260:29)
  at Transformation.runPipelines (packages/core/core/src/Transformation.js:306:34)
  at Transformation.run (packages/core/core/src/Transformation.js:174:19)
  at Object.run (packages/core/core/src/requests/AssetRequest.js:135:8)
  at RequestTracker.runRequest (packages/core/core/src/RequestTracker.js:831:20)
  at AssetGraphBuilder.runAssetRequest (packages/core/core/src/requests/AssetGraphRequest.js:815:18)
  at PromiseQueue._runFn (packages/core/utils/src/PromiseQueue.js:85:7)

Context

"last working run was June 29, so likely a regression in 2.0.0-nightly.746"

💻 Code Sample

parcel build index.js

// index.js
import page from "./page.mdx";
console.log(page);

// page.mdx
# Hello, world!

package.json:

{
  "dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-select": "^4.3.1"
  }
}

🌍 Your Environment

Software	Version(s)
Parcel	fd99fa043c2dffe946543c501beff90094f9f703

[mischnic]

Looks like swc is trying to throw the error "pragma and pragmaFrag cannot be set when runtime is automatic" (and MDX does emit those as comments)

https://github.com/swc-project/swc/blob/d5cdf444e8df727852b84e5cb00cdfa0352dc83f/ecmascript/transforms/react/src/jsx/mod.rs#L760-L768

(So there are two problems: panic instead of the error message itself, and the actual pragma error)

[devongovett]

Hmm so should we disable the automatic runtime if @jsxFrag is somewhere in the source code?

[mischnic]

swc might be happy if mdx emits /** @jsxRuntime classic */ (at least the Babel plugin supports that: https://babeljs.io/docs/en/babel-plugin-transform-react-jsx)

[Banou26]

Error still happening for me on ^2.0.0-nightly.811, even tho i don't import any MDX files?

> parcel --no-hmr src/index.html src/sandbox/index.html

Server running at http://localhost:1234
⠋ Building index.tsx...
thread '<unnamed>' panicked at 'cannot access a scoped thread local variable without calling `set` first', C:\Users\runneradmin\.cargo\registry\src\github.com-1ecc6299db9ec823\scoped-tls-1.0.0\src\lib.rs:168:9
Server running at http://localhost:1234
× Build failed.

@parcel/transformer-js: cannot access a scoped thread local
variable without calling `set` first

  Error: cannot access a scoped thread local variable without  
  calling `set` first
  at Object.transform
  (C:\dev\oz\web\node_modules\@parcel\transformer-js\lib\JSTransformer.js:355:31)
  at processTicksAndRejections
  (node:internal/process/task_queues:96:5)
  at async Transformation.runTransformer
  (C:\dev\oz\web\node_modules\@parcel\core\lib\Transformation.js:604:5)
  at async Transformation.runPipeline
  (C:\dev\oz\web\node_modules\@parcel\core\lib\Transformation.js:357:36)
  at async Transformation.runPipelines
  (C:\dev\oz\web\node_modules\@parcel\core\lib\Transformation.js:241:40)
  at async Transformation.run
  (C:\dev\oz\web\node_modules\@parcel\core\lib\Transformation.js:167:19)
  at async Child.handleRequest
  (C:\dev\oz\web\node_modules\@parcel\workers\lib\child.js:217:9)

Not really sure what is causing that error in my project.

[mischnic]

Can you share a reproduction?

[Banou26]

Here's a repro, https://github.com/Banou26/parcel-bug-6605

[Banou26]

After some more testing, deleting my package-lock and my node_modules(not sure if those did anything TBH), plus setting parcel as watch mode, allow parcel to not throw. But the moment i re-enable the http-server by removing watch, it starts throwing again.

[Banou26]

And it also looks like the watch mode is actually broken and doesn't ~re-build on file changes~ build at all, even though it prints

Bundling...
√ Built in 45ms

Same result after deleting the .parcel-cache folder

[Banou26]

Also, While working on the repro for another issue, i confirmed? that this issue only happens when using the JSX pragma, as its the same repro, without the pragma at the top of the file, and it doesn't throw.

[mevanloon]

Thanks banou, that helped me out of a pickle. Kinda counterintuitive the remove the pragma like that.

[CreativeCactus]

I cam here from SO.

I hit

@parcel/transformer-js: cannot access a scoped thread local variable without calling `set` first

when compiling a component (even if the component was not referenced anywhere):

export const Component = ({children})=>{
    return (
        <div style={{
            fontFamily: 'Arial',
        }}>
            <Something/>
            {...children}
        </div>
    );    
}

and solved by replacing {...children} with {children}. Hope this helps someone!

[dev-angelo-c]

Just ran into this. Thank you very much!

[nullpaper]

Further to @CreativeCactus it looks like Parcel crashes out with this error when you spread any array (not just children):

const Boom = () => {
  const littleBoom = ['hello', 'world']
  return <div>{...littleBoom.map(el => el)}</div>
}

[mischnic]

This syntax isn't supported, neither by swc nor Babel: https://babeljs.io/repl#?browsers=&build=&builtIns=false&corejs=false&spec=false&loose=false&code_lz=MYewdgzgLgBAQiEBbGBeGAKAlGgfDAbwCgYZRJYAbASyikoFMFk0YBtAcgAsHLKQOAGhgcA7iABOlACYcAuiRgSGUAK4SwMADzTqAN1wEAdCZp1GzJEaQBDAA4ZeeGLywBfLQHpdBom6LkECCMRvwA5hiWWADcQA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=false&presets=react&prettier=false&targets=Node-14&version=7.17.11&externalPlugins=&assumptions=%7B%7D

I'll make sure this "Spread children are not supported in React" message is shown in this case (instead of this panic).

[harryhjsh]

I'm seeing the same error on v2.5.0 with XML namespaced attributes in <svg> tags when they're incorrectly included in JSX in their colon-separated form.

e.g.

<svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="26"
        height="26"
        viewBox="0 0 26 26"
      >

gives

thread '<unnamed>' panicked at 'cannot access a scoped thread local variable without calling `set` first', C:\Users\runneradmin\.cargo\registry\src\github.com-1ecc6299db9ec823\scoped-tls-1.0.0\src\lib.rs:168:9
🚨 Build failed.

@parcel/transformer-js: cannot access a scoped thread local variable without calling `set` first

(Correct syntax would be this)

<svg
        ...
        xmlnsXlink="http://www.w3.org/1999/xlink"
        ...
      >

I assume there's an equivalent babel error similar to spreading children that also isn't getting through, perhaps already fixed by #8032, but just mentioning for posterity.