web-1  | yarn run v1.22.19
web-1  | $ vite
web-1  | /app/node_modules/rollup/dist/native.js:59
web-1  | throw new Error(
web-1  |       ^
web-1  | 
web-1  | Error: Cannot find module @rollup/rollup-linux-x64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.
web-1  |     at requireWithFriendlyError (/app/node_modules/rollup/dist/native.js:59:9)
web-1  |     at Object.<anonymous> (/app/node_modules/rollup/dist/native.js:68:76)
web-1  |     ... 3 lines matching cause stack trace ...
web-1  |     at Module._load (node:internal/modules/cjs/loader:1081:12)
web-1  |     at cjsLoader (node:internal/modules/esm/translators:344:17)
web-1  |     at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:284:7)
web-1  |     at ModuleJob.run (node:internal/modules/esm/module_job:235:25)
web-1  |     at async ModuleLoader.import (node:internal/modules/esm/loader:461:24) {
web-1  |   [cause]: Error: Cannot find module '@rollup/rollup-linux-x64-gnu'
web-1  |   Require stack:
web-1  |   - /app/node_modules/rollup/dist/native.js
web-1  |       at Module._resolveFilename (node:internal/modules/cjs/loader:1202:15)
web-1  |       at Module._load (node:internal/modules/cjs/loader:1027:27)
web-1  |       at Module.require (node:internal/modules/cjs/loader:1290:19)
web-1  |       at require (node:internal/modules/helpers:188:18)
web-1  |       at requireWithFriendlyError (/app/node_modules/rollup/dist/native.js:41:10)
web-1  |       at Object.<anonymous> (/app/node_modules/rollup/dist/native.js:68:76)
web-1  |       at Module._compile (node:internal/modules/cjs/loader:1455:14)
web-1  |       at Module._extensions..js (node:internal/modules/cjs/loader:1534:10)
web-1  |       at Module.load (node:internal/modules/cjs/loader:1265:32)
web-1  |       at Module._load (node:internal/modules/cjs/loader:1081:12) {
web-1  |     code: 'MODULE_NOT_FOUND',
web-1  |     requireStack: [ '/app/node_modules/rollup/dist/native.js' ]
web-1  |   }
web-1  | }
web-1  | 
web-1  | Node.js v22.0.0`your text`
web-1  | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
web-1  | error Command failed with exit code 1.

so this the error i tried all i can find online but nothing work. i did try to add npm i or yarn add in my docker file but it didn’t change anything i keep getting the same problem

I have a backend server written with elysiajs, and I have integrated it with sveltekit app.
The problem is that the rest routes work as expected but the ws ones don’t because sveltekit do not support ws nativly, how could I intercept the ws request coming to the sveltekit app and pass them to elysia?

I have tried to write a vite plug in to transform the request, but that didn’t work

I’m currently trying frida and using https://github.com/httptoolkit/frida-interception-and-unpinning/ as a tutorial, but unfortunately frida isn’t working. Im using a Samsung Galaxy S9 (https://www.devicespecifications.com/de/model-cpu/066948b6) so a rooted physical device.

frida version: 16.2.1, I have also tried frida 15.2.2, client and server of course.

C:Users###Downloadsplatform-tools-latest-windowsplatform-tools>frida --debug -U -f tech.httptoolkit.pinning_demo -l frida_multiple_unpinning.js
     ____
    / _  |   Frida 16.2.1 - A world-class dynamic instrumentation toolkit
   | (_| |
    > _  |   Commands:
   /_/ |_|       help      -> Displays the help system
   . . . .       object?   -> Display information about 'object'
   . . . .       exit/quit -> Exit
   . . . .
   . . . .   More info at https://frida.re/docs/home/
   . . . .
   . . . .   Connected to SM G960F (id=2252a1780a037ece)
Spawning `tech.httptoolkit.pinning_demo`...

also Objection is an tool for injecting code but also no response:

C:Users###>objection --gadget tech.httptoolkit.pinning_demo explore
Using USB device SM G960F

I am working on a reactjs web project where I am using react-router-dom version 5 and 6 and I wanted to show a confirmation dialog to user when user tries to navigate to other page using Link or navigate of react-router

<Link></Link>
const navigate=useNavigate()
navigate('/some-route')

1. The beforeUnload only works if user tries to reload the page or
   close the tab or browser.
2. useBlocker hook works only in react-router
   version 6.
3. usePrompt hook works only in react-router version 5.

Please suggest a generic way that can be used for both react-router version 5 and 6.

This is my API request body (Array of numbers):

{
        "userIds": [10,11,12, 20]
}

Where the usersIds in DB is a number type and it’s not the primary or secondary keys.
I need to query DynamoDB and get the details of these users in NodeJs please.

I tried:

const keys: { userIds: number }[] = userIds.map(id => ({ userID: id }))
        const params: BatchGetCommandInput = {
           RequestItems: {
            [this.tableName]: {
                Keys: keys,
                ProjectionExpression: projectionExpression
            }
           }
        };
return ResultAsync.fromPromise(this.dynamoDocumentClient.batchGet(params),

I think that batchGet needs the keys to be passed so doesn’t work in this case!

So I am generating GIF images by taking imageData stored in an array, undoStack[], and using gif.js to compile them into a gif. I found out that the images are coming out quite large in comparison to what I would like them to be…. See the two attached files. Large.gif being the one that I am generating and small.gif being the one that I am putting into freeconvert.com to compress the file….. There is a 92% reduction. I’ve tried messing with the options in gif.js to optimize the gif generation, but I’ve been unsuccessful. Does anyone have any suggestions to decrease the size of my gifs without losing too much quality? Not sure if I need to somehow optimize the imageData before gif generation, or if there is something I can do after the gif is created to reduce the size like Freeconvert is doing…

THank you in advance!

Here is the function in my web application:

async function saveGIF() {
    return new Promise((resolve, reject) => {
        const gif = new GIF({
            workers: 5,
            quality: 10,
            width: 1000,
            height: 1000,
            dither: false,
        });

        // Calculate total duration and frame interval
        const maxDuration = 5000; // Maximum duration in milliseconds (5 seconds)
        const targetFPS = 30;
        const maxDelayTime = 10;

        // Ensure that there are at least two frames
        const minFrames = 2;

        // Calculate the maximum number of frames based on the duration and target FPS
        const maxFrames = Math.floor((maxDuration / 1000) * targetFPS);

        // Calculate the delay time for each frame
        let delayTime = Math.ceil(maxDuration / Math.min(undoStack.length, maxFrames));
        if (delayTime > maxDelayTime) {
            delayTime = maxDelayTime;
        }
        let gifLoad = 0;

        // Keep track of the last frame added to the GIF
        let lastFrameAdded = null;

        for (let i = 0; i < Math.min(undoStack.length, maxFrames); i++) {
            const index = undoStack.length > maxFrames ? Math.round((undoStack.length - 1) * i / (maxFrames - 1)) : i;
            const imageData = undoStack[index];

            // Compare with the last frame added
            if (i === 0 || hasEnoughDifference(imageData, lastFrameAdded)) {
                gif.addFrame(imageData, { copy: true, delay: delayTime });
                lastFrameAdded = imageData; // Update lastFrameAdded
            }
        }

        // Add an additional second with just the last frame
        gif.addFrame(lastFrameAdded, { copy: true, delay: 1000 });

        gif.on('finished', function (blob) {
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');

            if (submitStatus === false){
                link.href = url;
                link.download = 'doodle.gif';
                link.click();
            }
            
            URL.revokeObjectURL(url);

            // Resolve the Promise with both the GIF blob and its URL
            resolve({ blob, url });
        });

        gif.on('error', function (errMsg) {
            console.error('GIF rendering error:', errMsg);

            // Reject the Promise with the error message
            reject(errMsg);
        });

        gif.render();
    });
}

My GIF 1.9mb

Same GIF after put into Freeconvert.com

I’ve tried changing the Quality and dithering settings in Gif.js options but that has made little difference. I’ve tried using other libraries such as compressorjs which actually seemed to make my images even larger.

No such file or directory

I want to make payload
Please my friends help to I corrected this error I tried a lot to get past this error, but I could not find the solution. Thank you to everyone who helped me I hope to find a solution to this problem

I have a .cjs file that, when run with node, returns all urls it is crawling(that part works fine) but has a few errors I need to fix.

Here are two errors of the same kind:

    Error generating and outputting text: TypeError: messageList.map is not a function                                                                             
        at /home/legomyego/scraping/openai/node_modules/@langchain/core/dist/language_models/                                chat_models.cjs:243:72                                                
    at Array.map (<anonymous>)                                                                                                                                 
    at ChatOpenAI.generate (/home/legomyego/scraping/openai/node_modules/@langchain/core/dist/        language_models/chat_models.cjs:243:39)                          
    at generateAndOutputText (/home/legomyego/scraping/openai/aiScrape6.cjs:60:41)                                                                             
    at crawl (/home/legomyego/scraping/openai/aiScrape6.cjs:37:15)                                                                                             
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)                                                                              
    at async /home/legomyego/scraping/openai/aiScrape6.cjs:85:9                                                                                                                                                                                                                                                         
    Error generating and outputting text: TypeError: messageList.map is not a function                                                                             
    at /home/legomyego/scraping/openai/node_modules/@langchain/core/dist/language_models/    chat_models.cjs:243:72                                                
    at Array.map (<anonymous>)                                                                                                                                 
    at ChatOpenAI.generate (/home/legomyego/scraping/openai/node_modules/@langchain/core/dist/     language_models/chat_models.cjs:243:39)                          
    at generateAndOutputText (/home/legomyego/scraping/openai/aiScrape6.cjs:60:41)                                                                             
    at CsvParserStream.<anonymous> (/home/legomyego/scraping/openai/aiScrape6.cjs:95:23)                                                                       
    at CsvParserStream.emit (node:events:514:28)                                                                                                               
    at CsvParserStream.emit (/home/legomyego/scraping/openai/node_modules/@fast-csv/parse/build/                               src/CsvParserStream.js:50:23)                                  
    at endReadableNT (node:internal/streams/readable:1376:12)                                                                                                  
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)   

I think that this function below is the reason for the error. This is because “messages” is of type “object” and not an array before sent to ‘const generatedText’. However changing it to an array did not work.
Here is the function:

     async function generateAndOutputText(userPrompt, context) {
    try {
        const messages = [
            { role: "system", content: "You are a helpful assistant." },
            { role: "user", content: userPrompt },
            { role: "assistant", content: context },
        ];
    console.log(typeof messages);
        const generatedText = await llm.generate(messages);

        console.log(generatedText);

        // Save generated text to a CSV file
        fs.writeFile('generated_text.csv', generatedText, (err) => {
            if (err) {
                console.error('Error saving generated text to file:', err);
            } else {
                console.log('Generated text saved to generated_text.csv');
            }
        });
    } catch (error) {
        console.error('Error generating and outputting text:', error);
    }
    }

Finally here is a pastebin of the full code: pastebin(.)com/RGDhqLdW

For the below code in safari version 17 getting the output has “CHF 123 456,79” but for version safari version 16 it is giving the output “123 456,79 CHF”
, in chrome browser it is giving the output”123 456,79 CHF” dose anyone know why

console.log(
  new Intl.NumberFormat('fr-ch', { style: 'currency', currency: 'CHF' }).format(
    number,
  ),
);

I’m working on a Laravel Jetstream project with Alpine.js and Livewire. I’m encountering an error in my console indicating that paginationData is not defined, despite having imported it correctly into my app.js file and having declared it in a separate module.

Here’s my current setup:

1. Import in app.js:

import Alpine from 'alpinejs';
import paginationData from './alpine/pagination-stepper.js';

Alpine.data('paginationData', () => paginationData);
Alpine.start();
console.log('Alpine started');

2. Definition of paginationData in pagination-stepper.js:

const paginationData = {
    currentPage: 1,
    perPage: 5,
    totalCount: 10,
    get paginatedData() {
        const start = (this.currentPage - 1) * this.perPage;
        const end = start + this.perPage;
        return Array.from({ length: this.totalCount }, (_, i) => i + 1).slice(start, end);
    },
    nextPage() {
        if (this.currentPage < Math.ceil(this.totalCount / this.perPage)) {
            this.currentPage++;
        }
    },
    prevPage() {
        if (this.currentPage > 1) {
            this.currentPage--;
        }
    }
};

export default paginationData;

3. Usage in welcome.blade.php:

<section x-data="paginationData">
    <div>
        Current Page: <span x-text="totalCount"></span>
    </div>
</section>

It does show the current page number

4. Error in Console:

Despite showing the page number, indicating that the code gets loaded successfully, I still get an error.

I’ve tried the following troubleshooting steps:

• Verified that the import is correct and that paginationData is properly defined.
• Cleared the Laravel cache with php artisan view:clear and php artisan cache:clear.
• Restarted the development server.
• Checked for conflicts with Livewire.

Despite these attempts, the error persists. What could be causing this issue, and what should I check or adjust to resolve it? Any insights or suggestions from the Alpine.js community would be greatly appreciated.

I’m working on app that requires the user’s permission to read/write his clipboard. I want to block the entrance to a part of my website if they haven’t granted those permissions. Also, if they haven’t granted permission display a button that when clicking it shows the small pop up at the top left corner of the browser to grant the permission. I already tried using this but it doesn’t work:

async function checkClipboardPermissionAndRequest() {
  try {
    const result = await navigator.permissions.query({ name: 'clipboard-read' });
    
    if (result.state !== 'granted') {
      const permissionRequest = await navigator.permissions.request({ name: 'clipboard-read' });
      if (permissionRequest.state === 'granted') {
        console.log('Clipboard read permission granted.');
      } else {
        console.log('Clipboard read permission denied.');
      }
    } else {
      console.log('Clipboard read permission already granted.');
    }
  } catch (error) {
    console.error('Error checking clipboard permission:', error);
  }
}

// Call the function to check clipboard permissions and request if necessary
checkClipboardPermissionAndRequest();

This was just for web console testing, but I want to implement it in my Next.js app.

I have a React code that lets you add image files, preview, delete on click and add more. I’m happy with the functionality but I noticed some performance issues.

function App() {
  const [selectedFiles, setSelectedFiles] = React.useState([])

  function GenerateGuid() {
    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c => {
      const randomValue = crypto.getRandomValues(new Uint8Array(1))[0];
      const shiftedValue = (randomValue & 15) >> (+c / 4);
      return shiftedValue.toString(16);
    });
  }

  const handleImageDelete = (id) => {
    const updatedFiles = selectedFiles.filter((file) => file.id !== id);
    setSelectedFiles(updatedFiles);
  };

  const handleChange = (e) => {
    const files = Array.from(e.target.files)
    const filesObject = files.map(file => {
      return (
        { id: GenerateGuid(), fileObject: file }
      )
    })
    setSelectedFiles([...selectedFiles, ...filesObject])
  }

  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input type="file" onChange={handleChange} multiple />
      {selectedFiles.map(
        (file, index) => {
          return (
            <img
              key={file.id}
              onClick={() => handleImageDelete(file.id)}
              style={{ height: "5rem", backgroundColor: "black" }}
              src={URL.createObjectURL(file.fileObject)}
              alt={"training spot"}
            />
          )
        }
      )}
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Works fine in small file amounts, but let’s review the following scenario.

• Add 10 images each ~2MB size, so we’ve uploaded ~20MB of data
• Click on one image to delete it
• 9 images re-render and network tab shows 9 images reloaded again, so 19 requests in total to complete this operation.

Is there a clever way to prevent remaining images from reloading?

So far just testing in the sandbox and looking for solution.

Good day

I’m using this autocomplejs library so intead of loading existing data I’m getting data from an endpint and I pass a query to get a specific data, Everything works but I can’t seem to query on input change and when I check the documentation it has an example but don’t get it or its not complete.

I’m passing a search query on that endpoint
like below

<div wire:ignore x-data="{ value: @entangle($attributes->wire('model')) }" x-init="new autoComplete({
    selector: '#{{ $id }}',
    placeHolder: '{{ $attributes->has('placeholder') ? $attributes->get('placeholder') : 'Please enter your address...' }}',
    data: {
         // I don't know how to call this query on input change so I tried getting the input value like  
        
        src: async (query) => {
            try {
                // const query = document.querySelector('#{{ $id }}').value; and removed the quiry param but its not working still
                const source = await fetch(`/places/autocomplete/${query}`);
                const data = await source.json();
                console.log(JSON.stringify(data));
                return data;
            } catch (error) {
                console.log(JSON.stringify(error));
                return error;
            }
        },
        keys: ['description'],
        cache: true,
    },
    searchEngine: '{{ $attributes->has('searchEngine') ? $attributes->get('searchEngine') : 'loose' }}',
});" x-on:selection="value = $event.target.value"
    class="!w-full relative">
    <input type="search" {{ $attributes->whereDoesntStartWith('wire:model') }} id="{{ $id }}"
        x-bind:value="value"
        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block !w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
        autocomplete="off" tabindex="1">
</div>

@once
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/css/autoComplete.01.min.css">

    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/10.2.7/autoComplete.min.js?id=<?= rand(0, 1000 - 1) ?>"
        data-navigate-track></script>

    <script>
        let autocompletInput = document.getElementById("autoComplete");
        autocompletInput.addEventListener("selection", function(event) {
            const feedback = event.detail;
            const selection = feedback.selection.value[feedback.selection.key];
            autocompletInput.value = selection;
        });
    </script>
@endonce

I saw this from the documentation
The documentation is not explaining further this

but I don’t know how I can pass the query.

I need help with passing that query.

I tried this but the input value is not updating

I also tried listing to change event but no luck

 src: async () => {
            try {
                const query = document.querySelector('#{{ $id }}').value;
                const source = await fetch(`/places/autocomplete/${query}`);
                const data = await source.json();
                console.log(JSON.stringify(data));
                return data;
            } catch (error) {
                console.log(JSON.stringify(error));
                return error;
            }
        },

This is for google places autocomplete.

Thanks in advance.

I’m am working on implementation of a multi step form with react-hook-form but I can’t do that input fields do get initialized with the form data when I return to the previous page.

I want the fields I filled out in that step to be saved when I go back to the previous step.

//EstudianteForm.jsx
function EstudianteForm() {
    const { register, handleSubmit, reset } = useForm();
    const [carrerasDisponibles, setCarrerasDisponibles] = useState([]);
    const { formData, nextStep, prevStep, updateEstudianteData } = useFormContext();

    useEffect(() => {
        const fetchCarreras = async () => {
            try {
                const response = await fetch('http://localhost:8000/carreras');
                if (!response.ok) {
                    throw new Error('Error al obtener las carreras');
                }
                const data = await response.json();
                setCarrerasDisponibles(data);
            } catch (error) {
                console.error('Error:', error);
            }
        };

        fetchCarreras();
    }, []);

    const onSubmit = handleSubmit(async (data) => {
        const estudianteData = {
            nombreEstudiante: data["nombreEstudiante"],
            telefono: data["telefono"],
            correo: data["email"],
            curso: data["curso"],
            carreraInteres: data["carreraInteres"],
            idEquipo: formData.EquipoData.idEquipo,
        };
        await updateEstudianteData(estudianteData);
        nextStep();
        reset();
    });


    return (
        <form onSubmit={onSubmit}>
            <div className='estudiante-form-container'>
                <label> Nombre del estudiante: </label>
                <input type="text" {...register("nombreEstudiante")} />
            </div>

            <div className='estudiante-form-container'>
                <label> Teléfono: </label>
                <input type="text" {...register("telefono")} />
            </div>

            <div className='estudiante-form-container'>
                <label> Correo electrónico: </label>
                <input type="email" {...register("email")} />
            </div>

            <div className='estudiante-form-container'>
                <label> Curso: </label>
                <select className="custom-select" {...register('curso')}>
                    <option value="">Seleccionar</option>
                    <option value="5">5to secundaria</option>
                    <option value="6">6to secundaria</option>
                </select>
            </div>

            <div className='estudiante-form-container'>
                <label> Carreras de interés: </label>
                <select multiple className="custom-select" {...register('carreraInteres')}>
                    <option value="">Seleccionar</option>
                    {carrerasDisponibles.map(carrera => (
                        <option key={carrera.idCarrera} value={carrera.idCarrera}>{carrera.nombre}</option>
                    ))}
                </select>
            </div>
            <div className='next-previouse-buttons'>
                <button type="button" className='previouse' onClick={prevStep}>Anterior</button>
                <button type="submit" >Siguiente</button>
            </div>
        </form>
    );
}

export default EstudianteForm;

import React, { createContext, useContext, useState } from "react";

const FormContext = createContext();

const useFormContext = () => useContext(FormContext);

const FormProvider = ({ children }) => {

    const [currentStep, setCurrentStep] = useState(0);
    const [formData, setFormData] = useState({
        EquipoData: {},
        EstudianteData: [],
    });

    const nextStep = () => setCurrentStep(currentStep + 1);
    const prevStep = () => setCurrentStep(currentStep - 1);

    const updateEquipoData = (data) => {
        setFormData({ ...formData, EquipoData: data });
    };
    const updateEstudianteData = (data) => {
        setFormData({ ...formData, EstudianteData: [...formData.EstudianteData, data] });
    };


    return (
        <FormContext.Provider value={{
            formData,
            updateEstudianteData,
            updateEquipoData,
            currentStep,
            nextStep,
            prevStep,
        }}>
            {children}
        </FormContext.Provider>
    );
};

export { FormProvider, useFormContext };    

I want the fields I filled out in that step to be saved when I go back to the previous step.

I’ve spent a good week trying to figure this out and feel like I’m hitting my head against a wall.

I’m using Turbo as a monorepo and have simply used the create-turbo@latest command, detailed here.

The default ui/package works fine, but I don’t want to manually export everything in the package.json as below (source code here):

{
  "name": "@repo/ui",
  "version": "0.0.0",
  "private": true,
  "exports": {
    "./button": "./src/button.tsx",
    "./card": "./src/card.tsx",
    "./code": "./src/code.tsx"
  },
  "scripts": {
    "lint": "eslint . --max-warnings 0",
    "generate:component": "turbo gen react-component"
  },
  "devDependencies": {
    "@repo/eslint-config": "workspace:*",
    "@repo/typescript-config": "workspace:*",
    "@turbo/gen": "^1.12.4",
    "@types/node": "^20.11.24",
    "@types/eslint": "^8.56.5",
    "@types/react": "^18.2.61",
    "@types/react-dom": "^18.2.19",
    "eslint": "^8.57.0",
    "react": "^18.2.0",
    "typescript": "^5.3.3"
  }
}

I’ve checked Steven Tey’s rather amazing Dub.co and wanted to attempt to use TSUP to compile my UI library. I configured everything exactly the same way he did, right down to the tsconfig, but this keeps giving me errors in my web app of the UI library not being found (although it works fine and uses the UI elements). Further to this, it is also totally breaking on some of my UI components. I know they’re all OK as I’ve used them across other projects for years without issue, it’s only in the monorepo do some now break.

I’ve also tried changing my ui library package.json to simply push the entry point to “src/index.tsx” which houses all of my exports/imports. That src/index.tsx looks like this:

import "./globals.css"

export * from "./tw-indicator"

// Shad components
export * from "./ui"

// Folders
export * from "./forms"
export * from "./layouts"
export * from "./typography"
export * from "./icons"

This however gives me errors such as the below:

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
This error happened while generating the page. Any console logs will be displayed in the terminal window.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
....node_modules.pnpm@[email protected]_@[email protected][email protected][email protected] (4:82)
(rsc)/../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@radix-ui/react-direction/dist/index.mjs
file:/C:/Code/Test%20Project/testproject/apps/web/.next/server/vendor-chunks/@[email protected]_@[email protected][email protected] (30:1)

It seems that no matter how I configure the package.json of the ui library, tsconfigs, tsup, I always end up with a litany of errors.

Any way I attempt to bundle the UI library just doesn’t work. Has anyone had any success doing this without receiving errors?