@parcel/transformer-js "cannot access a scoped thread local variable without..." 处的构建错误

Question

我有一个使用 Parcel 和 Preact 的项目（用于实现 Algolia 自动完成搜索），npx parcel build theme/app-home.tsx --log-level verbose.

时突然出现错误

它以前工作过，我正在使用 git，但我找不到破坏构建的更改。

错误：

 Building app-home.tsx...
thread '<unnamed>' panicked at 'cannot access a scoped thread local variable without calling `set` first', /Users/runner/.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

  Error: cannot access a scoped thread local variable without calling `set` first
  at Object.transform (/Users/cozarkd/Documents/GitHub/projectX/node_modules/@parcel/transformer-js/lib/JSTransformer.js:365:31)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async Transformation.runTransformer (/Users/cozarkd/Documents/GitHub/projectX/node_modules/@parcel/core/lib/Transformation.js:617:5)
  at async Transformation.runPipeline (/Users/cozarkd/Documents/GitHub/projectX/node_modules/@parcel/core/lib/Transformation.js:366:36)
  at async Transformation.runPipelines (/Users/cozarkd/Documents/GitHub/projectX/node_modules/@parcel/core/lib/Transformation.js:244:40)
  at async Transformation.run (/Users/cozarkd/Documents/GitHub/projectX/node_modules/@parcel/core/lib/Transformation.js:170:19)
  at async Child.handleRequest (/Users/cozarkd/Documents/GitHub/projectX/node_modules/@parcel/workers/lib/child.js:217:9)

tsx 文件：

/** @jsx h */
import {
  autocomplete,
  AutocompleteComponents,
  getAlgoliaResults,
} from '@algolia/autocomplete-js';

import algoliasearch from 'algoliasearch';
import { h, Fragment } from 'preact';



const appId = 'theappid';
const apiKey = 'theapikey';
const searchClient = algoliasearch(appId, apiKey);


/* const querySuggestionsPlugin = createQuerySuggestionsPlugin({
  searchClient,
  indexName: 'database_query_suggestions',
  getSearchParams() {
    return {
      hitsPerPage: 5,
    };
  },
  
}); */



autocomplete({
  // debug: true,
  container: '#autocomplete',
  placeholder: 'Escribe aquí, sin miedo',
  openOnFocus: false,
  defaultActiveItemId: 0,
  autoFocus: true,
  getSources({ query }) {

    return [
      {
        sourceId: 'plantag',
        getItemUrl({ item }) {
          return item.url;
        },
        getItems() {
          return getAlgoliaResults({
            searchClient,
            queries: [
              {
                indexName: 'database',
                query,
                params: {
                  hitsPerPage: 10,
                  clickAnalytics: true,
                  attributesToSnippet: [
                    'name:10',
                    'nombre'
                  ],
                  snippetEllipsisText: '…',
                },
              },
            ],
          });
        },
        templates: {
          item({ item, components }) {
            return <ProductItem hit={item} components={components} />;
          },
          noResults() {
            return 'No hay plantas coincidentes :(';
          },
        },
      },
    ];
    
  },
    // Default Navigator API implementation
    navigator: {
      navigate({ itemUrl }) {
        window.location.assign(itemUrl);
      },
      navigateNewTab({ itemUrl }) {
        const windowReference = window.open(itemUrl, '_blank', 'noopener');
  
        if (windowReference) {
          windowReference.focus();
        }
      },
      navigateNewWindow({ itemUrl }) {
        window.open(itemUrl, '_blank', 'noopener');
      },
    },

});

function ProductItem({ hit, components }: ProductItemProps) {
  return (
  <div className="c-single-result">
    <a href={hit.url} className="aa-ItemLink">
      <div className="l-flex-container">
        <div className="aa-ItemContent">
          <div className="aa-ItemContentBody">
            <div className="aa-ItemContentTitle">
              <components.Snippet hit={hit} attribute="nombre" />
            </div>
          </div>
          <div className="aa-ItemContentSubtitle">
                <components.Snippet hit={hit} attribute="name" />
          </div>
          <div className="aa-ItemActions">
            <button
              className="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
              type="button"
              title="Select"
              style={{ pointerEvents: 'none' }}
            >
              <svg viewBox="0 0 30 27" width="30" height="27" fill="currentColor">
              <path d="M10.0611 23.8881C10.6469 24.4606 10.6469 25.389 10.0611 25.9615C9.47533 26.5341 8.52558 26.5341 7.9398 25.9615L0.441103 18.632C0.4374 18.6284 0.433715 18.6248 0.430051 18.6211C0.164338 18.3566 0.000457764 17.994 0.000457764 17.594C0.000457764 17.3952 0.0409356 17.2056 0.114276 17.0328C0.187475 16.8598 0.295983 16.6978 0.439798 16.5572L7.9398 9.22642C8.52558 8.65385 9.47533 8.65385 10.0611 9.22642C10.6469 9.79899 10.6469 10.7273 10.0611 11.2999L5.12178 16.1278H13.5005C20.9565 16.1278 27.0005 10.2202 27.0005 2.93233V1.46616C27.0005 0.656424 27.672 -1.90735e-06 28.5005 -1.90735e-06C29.3289 -1.90735e-06 30.0005 0.656424 30.0005 1.46616V2.93233C30.0005 11.8397 22.6134 19.0602 13.5005 19.0602H5.12178L10.0611 23.8881Z"/>
              </svg>
            </button>

          </div>
        </div>


        <div className="aa-ItemIcon aa-ItemIcon--picture aa-ItemIcon--alignTop">
            <img src={hit.image} alt={hit.name} width="40" height="40" />
        </div>
      </div>
    </a>
  </div>
  );

  
}

如果需要，我可以提供更多信息。进行了一些搜索，但我找不到任何与该错误有关的包裹。

Answer 1

我能够重现问题，看起来这可能是与文件顶部的 JSX pragma 相关的 parcel 中的错误（请参阅 github discussion here）。如果删除此行，它应该可以正常编译：

/** @jsx h */ <--delete this line.

Parcel 将根据在 package.json 中找到 preact 作为依赖项（参见 documentation）自动检测要为您的项目使用哪个 JSX pragma。您也可以像这样使用 tsconfig.json 文件手动控制它：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}

（此错误可能仍应修复，但希望这足以帮助您解决它。我提交了 a github issue here）。

@parcel/transformer-js "cannot access a scoped thread local variable without..." 处的构建错误

Building error at @parcel/transformer-js "cannot access a scoped thread local variable without..."

algolia

preact

parceljs