Local Pyodide Packages Tutorial: Failed to load packaging, micropip

[feincrafts]

Checklist

• I added a descriptive title
• I searched for other issues and couldn't find a solution or duplication
• I already searched in Google and didn't find any good information or help

What happened?

I'm following along with the following Pyscript "Use Offline" guide (pasted below) and was following along issue-free until I got to the "Local Pyodide packages" section. The previous demo code works, so then I tried to copy the pandas html code in my index.html. This throws a stream of errors in the console and nothing loads on the page.

I have also changed the first few default script lines to see if this fixes the error, and it only gives one error message but it is still not fixed.

Pasted a bunch of hopefully relevant information below. I tried to look into this but am pretty new to PyScript so please forgive me if there's been a similar issue solved that I missed in my search. Thank you so much for any help!

Context: Using MacOS, pyodide 0.25.1 , tried in both Firefox and Chrome. Happy to provide additional information if needed. Followed tutorial exactly up until this point.

Guide: Use Offline

What browsers are you seeing the problem on? (if applicable)

Firefox, Chrome

Console info

Stream of Console Errors (removed my IP):
Failed to load packaging, micropip [pyodide.asm.js:9:95309]
The following error occurred while loading packaging: [pyodide.asm.js:9:95351]
NetworkError when attempting to fetch resource. [pyodide.asm.js:9:95404]
The following error occurred while loading micropip: [pyodide.asm.js:9:95351]
NetworkError when attempting to fetch resource. [pyodide.asm.js:9:95404]
Uncaught (in promise) PythonError: Traceback (most recent call last):
  File "/lib/python311.zip/importlib/__init__.py", line 126, in import_module
    return _bootstrap._gcd_import(name[level:], package, level)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "<frozen importlib._bootstrap>", line 1209, in _gcd_import
  File "<frozen importlib._bootstrap>", line 1181, in _find_and_load
  File "<frozen importlib._bootstrap>", line 1145, in _find_and_load_unlocked
ModuleNotFoundError: The module 'micropip' is included in the Pyodide distribution, but it is not installed.
You can install it by calling:
  await micropip.install("micropip") in Python, or
  await pyodide.loadPackage("micropip") in JavaScript
See https://pyodide.org/en/stable/usage/loading-packages.html for more details.
    M pyodide.asm.js:9
    new_error pyodide.asm.js:9
    _pythonexc2js pyodide.asm.js:9
    callPyObjectKwargs pyodide.asm.js:9
    callPyObject pyodide.asm.js:9
    apply pyodide.asm.js:9
    apply pyodide.asm.js:9
    pyimport pyodide.asm.js:9
    Qt pyodide.js:124
[pyodide.asm.js:9:86981]

Tried to Debug With:
 
# ... code continues
<script type="py" async>
    await micropip.install("micropip")
    micropip.install("pandas")
    import pandas as pd 
   # ... code continues


Error on page that appears after:
Traceback (most recent call last):
  File "/lib/python311.zip/_pyodide/_base.py", line 573, in eval_code_async
    await CodeRunner(
  File "/lib/python311.zip/_pyodide/_base.py", line 395, in run_async
    await coroutine
  File "<exec>", line 1, in <module>
NameError: name 'micropip' is not defined

Error in console that appears after:
PythonError: Traceback (most recent call last):
  File "/lib/python311.zip/_pyodide/_base.py", line 573, in eval_code_async
    await CodeRunner(
  File "/lib/python311.zip/_pyodide/_base.py", line 395, in run_async
    await coroutine
  File "<exec>", line 1, in <module>
NameError: name 'micropip' is not defined
    M pyodide.asm.js:9
    new_error pyodide.asm.js:9
    _PyEM_TrampolineCall_JS pyodide.asm.js:9
    callPyObjectKwargs pyodide.asm.js:9
    callPyObject pyodide.asm.js:9
    wrapper pyodide.asm.js:9
    setTimeout handler*JsvFunction_CallBound pyodide.asm.js:9
    _PyEM_TrampolineCall_JS pyodide.asm.js:9
    callPyObjectKwargs pyodide.asm.js:9
    callPyObject pyodide.asm.js:9
    wrapper pyodide.asm.js:9
    setTimeout handler*JsvFunction_CallBound pyodide.asm.js:9
    _PyEM_TrampolineCall_JS pyodide.asm.js:9
    _ensure_future pyodide.asm.js:9
    callPyObjectKwargs pyodide.asm.js:9
    callKwargs pyodide.asm.js:9
    runPythonAsync pyodide.asm.js:9
    Ht _python.js:38
    Vt pyodide.js:15
    ht/e[t]< utils.js:73
    async*xn/e[i]< hooks.js:54
    runAsync utils.js:54
    onReady core.js:220
    queue custom.js:165
    promise callback*zn custom.js:162
    define custom.js:252
    <anonymous> core.js:294
    promise callback* core.js:167

Additional Context

Screenshot of Error on Page With Debugging

Screenshot of Error in Console With Debugging

Screenshot of Errors in Console No Debugging (Hash Redacted)

[WebReflection]

@feincrafts all demos in here have been tested locally and successfully so ... I wonder if you read until the last paragraph which is mandatory to have pyodide packages working: https://docs.pyscript.net/2024.5.2/user-guide/offline/#local-pyodide-packages

[feincrafts]

@WebReflection Thank you for your response. I forgot to mention in my original post I did copy the contents of the pyodide package into my public/pyodide folder, although perhaps I messed something up with the path. I'll play around with fixing it on my end. The file structure of pyodide 0.25.1 doesn't contain a pyodide subfolder, which might have been the source of my confusion.