this is the Import.jsx code:

import React, { useEffect, useState, useContext } from 'react';
import { toChecksumAddress } from 'ethereum-checksum-address';
import fetch from 'node-fetch';
import { ImportContext } from '../code/ImportContext';
import './import.css';

const Import = () => {
  const [inputValue, setInputValue] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
  const { setCodeOrFiles } = useContext(ImportContext);
  const [worker, setWorker] = useState(null);

  useEffect(() => {
    if (window.Worker) {
      const myWorker = new Worker('./solcWorker.js');
      setWorker(myWorker);
    }
  }, []);

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  async function fetchContractMetadata(contractAddress) {
    const url = `https://api-sepolia.etherscan.io/api?module=contract&action=getsourcecode&address=${contractAddress}&apikey=VU7YAQVMHXX926MUCU7AE6C25RCFBPBIZF`;
    const response = await fetch(url);
    const data = await response.json();
    return data;
  }

  const handleImport = async () => {
    setIsLoading(true);
    setErrorMessage('');
    try {
      const metadata = await fetchContractMetadata(toChecksumAddress(inputValue));
      if (metadata.result && metadata.result.length > 0) {
        let sourceCodeString = metadata.result[0].SourceCode;
        sourceCodeString = sourceCodeString.slice(1, -1);
        let sourceCodeObject = JSON.parse(sourceCodeString);
        if (sourceCodeObject.sources && typeof sourceCodeObject.sources === 'object') {
          const sourceFiles = Object.keys(sourceCodeObject.sources);
          sourceFiles.forEach(async (file) => {
            let code = sourceCodeObject.sources[file].content;
            const input = {
              language: 'Solidity',
              sources: {
                file: {
                  content: code,
                },
              },
              settings: {
                outputSelection: {
                  '*': {
                    '*': ['*'],
                  },
                },
              },
            };
            worker.postMessage(input);
          });
          worker.onmessage = function (e) {
            const compiledCode = JSON.parse(e.data);
            const { bytecode } = compiledCode.contracts['contract.sol']['<stdin>'];
            setCodeOrFiles({ code: bytecode, address: inputValue });
          };
        } else {
          console.log('Sources not found in the source code object.');
        }
      } else {
        console.log('Contract metadata not found.');
      }
    } catch (error) {
      setErrorMessage('Error importing:', error.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className='import'>
      <input className='import_input' type="text" placeholder="Enter GitHub repository or smart contract address" value={inputValue} onChange={handleInputChange} />
      <button className='import_button' onClick={handleImport} disabled={isLoading}>
        {isLoading ? '' : 'Import'}
      </button>
    </div>
  );
};

export default Import;

in which i will import the opcode and the source code of a smart contract
2- this is the solcWorker.js :

self.importScripts('../../public/solc.js');

self.onmessage = function (event) {
  const { code } = event.data;
  const input = {
    language: 'Solidity',
    sources: {
      'contract.sol': {
        content: code,
      },
    },
    settings: {
      outputSelection: {
        '*': {
          '*': ['*'],
        },
      },
    },
  };
  const output = JSON.stringify(solc.compile(input));
  self.postMessage(output);
};

in which i’ll compile the smart contract
and this is solc.js which is in the public directory :

// Define the regular expression pattern
const solcRegex = /soljson-vd+.d+.d++commit.[a-f0-9]+.js/;

and this error appears in the browser console(in the picture)
what is the issue!

1- i think the solc.js need more content but i don’t know what to add!