Mittchel Comments - Answer Overflow

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "**/*.ts",
    "**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "**/*.ts",
    "**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}

nuxt.config.ts

export default defineNuxtConfig({
  typescript: {
    typeCheck: true,
    strict: true,
    shim: false,
  },
});

export default defineNuxtConfig({
  typescript: {
    typeCheck: true,
    strict: true,
    shim: false,
  },
});

package.json

{
  "scripts": {
    "build": "nuxt build"
  },
  "dependencies": {
    "nuxt": "^3.15.4",
    "typescript": "^5.0.0"
  }
}

{
  "scripts": {
    "build": "nuxt build"
  },
  "dependencies": {
    "nuxt": "^3.15.4",
    "typescript": "^5.0.0"
  }
}

20 replies

NNuxt

•Created by Alexandre Nédélec on 2/11/2025 in #❓・help

Build failing with typescript error in [email protected]

The error you're encountering (TS5042: Option 'project' cannot be mixed with source files on a command line) is related to how TypeScript is being invoked during the build process. This issue often arises when there's a misconfiguration in how TypeScript is being used in your Nuxt project.

npm run build --verbose

npm list typescript

npm dedupe

npm install nuxt@latest
npm install typescript@latest

npm run build --verbose

npm list typescript

npm dedupe

npm install nuxt@latest
npm install typescript@latest

20 replies

NNuxt

•Created by szobi on 2/11/2025 in #❓・help

refresh page after back to tap on mobile

const disconnectWallet = async () => {
  const { disconnect } = useDisconnect();
  await disconnect();
  localStorage.removeItem('isConnecting');
  localStorage.removeItem('modalState');
};

const disconnectWallet = async () => {
  const { disconnect } = useDisconnect();
  await disconnect();
  localStorage.removeItem('isConnecting');
  localStorage.removeItem('modalState');
};

10 replies

NNuxt

•Created by szobi on 2/11/2025 in #❓・help

refresh page after back to tap on mobile

onMounted(() => {
  const isConnecting = localStorage.getItem('isConnecting');
  if (isConnecting === 'true') {
    openModal();
    // Attempt to reconnect the wallet
    connectWallet();
  }
});

const connectWallet = async () => {
  localStorage.setItem('isConnecting', 'true');
  try {
    // Use wagmi to connect the wallet
    const { connector } = useConnect();
    await connector.connect();
  } catch (error) {
    console.error('Connection failed:', error);
  } finally {
    localStorage.removeItem('isConnecting');
  }
};

onMounted(() => {
  const isConnecting = localStorage.getItem('isConnecting');
  if (isConnecting === 'true') {
    openModal();
    // Attempt to reconnect the wallet
    connectWallet();
  }
});

const connectWallet = async () => {
  localStorage.setItem('isConnecting', 'true');
  try {
    // Use wagmi to connect the wallet
    const { connector } = useConnect();
    await connector.connect();
  } catch (error) {
    console.error('Connection failed:', error);
  } finally {
    localStorage.removeItem('isConnecting');
  }
};

10 replies

NNuxt

•Created by szobi on 2/11/2025 in #❓・help

refresh page after back to tap on mobile

import { createConfig, configureChains, mainnet } from '@wagmi/core';
import { publicProvider } from '@wagmi/core/providers/public';
import { MetaMaskConnector } from '@wagmi/core/connectors/metaMask';
import { localStorage } from '@wagmi/core/storage';

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()]
);

const config = createConfig({
  autoConnect: true, // Automatically reconnect on page load
  connectors: [
    new MetaMaskConnector({ chains }),
  ],
  publicClient,
  webSocketPublicClient,
  storage: localStorage, // Persist connection state in localStorage
});

import { createConfig, configureChains, mainnet } from '@wagmi/core';
import { publicProvider } from '@wagmi/core/providers/public';
import { MetaMaskConnector } from '@wagmi/core/connectors/metaMask';
import { localStorage } from '@wagmi/core/storage';

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()]
);

const config = createConfig({
  autoConnect: true, // Automatically reconnect on page load
  connectors: [
    new MetaMaskConnector({ chains }),
  ],
  publicClient,
  webSocketPublicClient,
  storage: localStorage, // Persist connection state in localStorage
});

10 replies

NNuxt

•Created by szobi on 2/11/2025 in #❓・help

refresh page after back to tap on mobile

<template>
  <div>
    <button @click="openModal">Connect Wallet</button>
    <Modal v-if="isModalOpen" @close="closeModal">
      <!-- Your wallet connection UI -->
    </Modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// Check localStorage for modal state
const isModalOpen = ref(false);

const openModal = () => {
  isModalOpen.value = true;
  localStorage.setItem('modalState', 'open');
};

const closeModal = () => {
  isModalOpen.value = false;
  localStorage.removeItem('modalState');
};

// On component mount, check if the modal should be open
onMounted(() => {
  const modalState = localStorage.getItem('modalState');
  if (modalState === 'open') {
    isModalOpen.value = true;
  }
});
</script>

<template>
  <div>
    <button @click="openModal">Connect Wallet</button>
    <Modal v-if="isModalOpen" @close="closeModal">
      <!-- Your wallet connection UI -->
    </Modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// Check localStorage for modal state
const isModalOpen = ref(false);

const openModal = () => {
  isModalOpen.value = true;
  localStorage.setItem('modalState', 'open');
};

const closeModal = () => {
  isModalOpen.value = false;
  localStorage.removeItem('modalState');
};

// On component mount, check if the modal should be open
onMounted(() => {
  const modalState = localStorage.getItem('modalState');
  if (modalState === 'open') {
    isModalOpen.value = true;
  }
});
</script>

10 replies

NNuxt

•Created by Eric on 2/11/2025 in #❓・help

read stream from event twice

    // Example: Send fields to Directus
    const directusFieldsResponse = await $fetch('https://your-directus-server/items/your-collection', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id, userId }),
    });

    console.log('Directus fields response:', directusFieldsResponse);

    // Example: Upload image to Directus
    const formData = new FormData();
    formData.append('file', new Blob([imageFile.data]), imageFile.filename);

    const directusFileResponse = await $fetch('https://your-directus-server/files', {
        method: 'POST',
        body: formData,
    });

    console.log('Directus file response:', directusFileResponse);

    return {
        ok: true,
        status: 200,
        statusText: 'Form data processed successfully',
        fields,
        files: Object.keys(files), // Return filenames for reference
    };
});

    // Example: Send fields to Directus
    const directusFieldsResponse = await $fetch('https://your-directus-server/items/your-collection', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id, userId }),
    });

    console.log('Directus fields response:', directusFieldsResponse);

    // Example: Upload image to Directus
    const formData = new FormData();
    formData.append('file', new Blob([imageFile.data]), imageFile.filename);

    const directusFileResponse = await $fetch('https://your-directus-server/files', {
        method: 'POST',
        body: formData,
    });

    console.log('Directus file response:', directusFileResponse);

    return {
        ok: true,
        status: 200,
        statusText: 'Form data processed successfully',
        fields,
        files: Object.keys(files), // Return filenames for reference
    };
});

18 replies

NNuxt

•Created by Eric on 2/11/2025 in #❓・help

read stream from event twice

Multipart Form Data with Nitro and h3

import { defineEventHandler, readMultipartFormData } from 'h3';

export default defineEventHandler(async (event) => {
    const MAX_SIZE = 10 * 1024 * 1024; // 10MB limit
    let totalSize = 0;

    // Read and parse the multipart form data
    const parts = await readMultipartFormData(event);

    if (!parts) {
        return {
            ok: false,
            status: 400,
            statusText: 'No form data found',
        };
    }

    const fields: Record<string, string> = {};
    const files: Record<string, { filename: string; data: Buffer }> = {};

    for (const part of parts) {
        // Check if the part is a field (non-file)
        if (!part.filename) {
            fields[part.name] = part.data.toString('utf-8'); // Convert buffer to string
        } else {
            // Handle file parts
            totalSize += part.data.length;

            if (totalSize > MAX_SIZE) {
                return {
                    ok: false,
                    status: 413,
                    statusText: 'Request too large',
                };
            }

            files[part.name] = {
                filename: part.filename,
                data: part.data,
            };
        }
    }

    // Now you have the fields and files
    const { id, userId } = fields;
    const imageFile = files.image; // Assuming the file input field is named 'image'

import { defineEventHandler, readMultipartFormData } from 'h3';

export default defineEventHandler(async (event) => {
    const MAX_SIZE = 10 * 1024 * 1024; // 10MB limit
    let totalSize = 0;

    // Read and parse the multipart form data
    const parts = await readMultipartFormData(event);

    if (!parts) {
        return {
            ok: false,
            status: 400,
            statusText: 'No form data found',
        };
    }

    const fields: Record<string, string> = {};
    const files: Record<string, { filename: string; data: Buffer }> = {};

    for (const part of parts) {
        // Check if the part is a field (non-file)
        if (!part.filename) {
            fields[part.name] = part.data.toString('utf-8'); // Convert buffer to string
        } else {
            // Handle file parts
            totalSize += part.data.length;

            if (totalSize > MAX_SIZE) {
                return {
                    ok: false,
                    status: 413,
                    statusText: 'Request too large',
                };
            }

            files[part.name] = {
                filename: part.filename,
                data: part.data,
            };
        }
    }

    // Now you have the fields and files
    const { id, userId } = fields;
    const imageFile = files.image; // Assuming the file input field is named 'image'

18 replies

NNuxt

•Created by Eric on 2/11/2025 in #❓・help

read stream from event twice

// Handle the end of the form
busboy.on('finish', () => {
    // Now you have the fields and files
    const { id, userId } = fields;
    const imageFile = files.image; // Assuming the file input field is named 'image'

    // Make your requests to Directus here
    // Example: send fields to Directus
    fetch('https://your-directus-server/items/your-collection', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id, userId }),
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });

    // Example: upload image to Directus
    const formData = new FormData();
    formData.append('file', new Blob([imageFile.data]), imageFile.filename);

    fetch('https://your-directus-server/files', {
        method: 'POST',
        body: formData,
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });
});

// Write the buffer to busboy for parsing
busboy.end(buffer);

// Handle the end of the form
busboy.on('finish', () => {
    // Now you have the fields and files
    const { id, userId } = fields;
    const imageFile = files.image; // Assuming the file input field is named 'image'

    // Make your requests to Directus here
    // Example: send fields to Directus
    fetch('https://your-directus-server/items/your-collection', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id, userId }),
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });

    // Example: upload image to Directus
    const formData = new FormData();
    formData.append('file', new Blob([imageFile.data]), imageFile.filename);

    fetch('https://your-directus-server/files', {
        method: 'POST',
        body: formData,
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });
});

// Write the buffer to busboy for parsing
busboy.end(buffer);

18 replies

NNuxt

•Created by Eric on 2/11/2025 in #❓・help

read stream from event twice

With bussboy

import Busboy from 'busboy';

const MAX_SIZE = 10 * 1024 * 1024; // 10MB limit
let totalSize = 0;
let chunks: Buffer[] = [];

const reader = event.node.req;

for await (const chunk of reader) {
    totalSize += chunk.length;

    if (totalSize > MAX_SIZE) {
        console.error('Request too large');
        return {
            ok: false,
            status: 413,
            statusText: 'Request too large',
        };
    }

    chunks.push(chunk); // Store chunk in memory for later processing
}

// Concatenate all chunks into a single Buffer
const buffer = Buffer.concat(chunks);

// Create a Busboy instance to parse the form data
const busboy = Busboy({ headers: event.node.req.headers });

const fields: Record<string, string> = {};
const files: Record<string, { filename: string; data: Buffer }> = {};

// Handle field events (non-file fields)
busboy.on('field', (fieldname, value) => {
    fields[fieldname] = value;
});

// Handle file events
busboy.on('file', (fieldname, file, filename) => {
    const chunks: Buffer[] = [];
    file.on('data', (chunk) => {
        chunks.push(chunk);
    });
    file.on('end', () => {
        files[fieldname] = {
            filename,
            data: Buffer.concat(chunks),
        };
    });
});

import Busboy from 'busboy';

const MAX_SIZE = 10 * 1024 * 1024; // 10MB limit
let totalSize = 0;
let chunks: Buffer[] = [];

const reader = event.node.req;

for await (const chunk of reader) {
    totalSize += chunk.length;

    if (totalSize > MAX_SIZE) {
        console.error('Request too large');
        return {
            ok: false,
            status: 413,
            statusText: 'Request too large',
        };
    }

    chunks.push(chunk); // Store chunk in memory for later processing
}

// Concatenate all chunks into a single Buffer
const buffer = Buffer.concat(chunks);

// Create a Busboy instance to parse the form data
const busboy = Busboy({ headers: event.node.req.headers });

const fields: Record<string, string> = {};
const files: Record<string, { filename: string; data: Buffer }> = {};

// Handle field events (non-file fields)
busboy.on('field', (fieldname, value) => {
    fields[fieldname] = value;
});

// Handle file events
busboy.on('file', (fieldname, file, filename) => {
    const chunks: Buffer[] = [];
    file.on('data', (chunk) => {
        chunks.push(chunk);
    });
    file.on('end', () => {
        files[fieldname] = {
            filename,
            data: Buffer.concat(chunks),
        };
    });
});

18 replies

NNuxt

•Created by Eric on 2/11/2025 in #❓・help

read stream from event twice

    // Now you have the fields and files
    const { id, userId } = fields;
    const imageFile = files.image; // Assuming the file input field is named 'image'

    // Make your requests to Directus here
    // Example: send fields to Directus
    fetch('https://your-directus-server/items/your-collection', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id, userId }),
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });

    // Example: upload image to Directus
    const formData = new FormData();
    formData.append('file', imageFile);

    fetch('https://your-directus-server/files', {
        method: 'POST',
        body: formData,
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });
});

    // Now you have the fields and files
    const { id, userId } = fields;
    const imageFile = files.image; // Assuming the file input field is named 'image'

    // Make your requests to Directus here
    // Example: send fields to Directus
    fetch('https://your-directus-server/items/your-collection', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id, userId }),
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });

    // Example: upload image to Directus
    const formData = new FormData();
    formData.append('file', imageFile);

    fetch('https://your-directus-server/files', {
        method: 'POST',
        body: formData,
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });
});

18 replies

NNuxt

•Created by Eric on 2/11/2025 in #❓・help

read stream from event twice

To handle the chunks after reading them, you need to concatenate them into a single Buffer and then parse the data. Since the incoming data is formData, you can use a library like formidable or busboy to parse the multipart form data. Here's how you can do it:

import { IncomingForm } from 'formidable';

const MAX_SIZE = 10 * 1024 * 1024; // 10MB limit
let totalSize = 0;
let chunks: Buffer[] = [];

const reader = event.node.req;

for await (const chunk of reader) {
    totalSize += chunk.length;

    if (totalSize > MAX_SIZE) {
        console.error('Request too large');
        return {
            ok: false,
            status: 413,
            statusText: 'Request too large',
        };
    }

    chunks.push(chunk); // Store chunk in memory for later processing
}

// Concatenate all chunks into a single Buffer
const buffer = Buffer.concat(chunks);

// Parse the form data
const form = new IncomingForm();

form.parse(buffer, (err, fields, files) => {
    if (err) {
        console.error('Error parsing form data:', err);
        return {
            ok: false,
            status: 500,
            statusText: 'Internal Server Error',
        };
    }

import { IncomingForm } from 'formidable';

const MAX_SIZE = 10 * 1024 * 1024; // 10MB limit
let totalSize = 0;
let chunks: Buffer[] = [];

const reader = event.node.req;

for await (const chunk of reader) {
    totalSize += chunk.length;

    if (totalSize > MAX_SIZE) {
        console.error('Request too large');
        return {
            ok: false,
            status: 413,
            statusText: 'Request too large',
        };
    }

    chunks.push(chunk); // Store chunk in memory for later processing
}

// Concatenate all chunks into a single Buffer
const buffer = Buffer.concat(chunks);

// Parse the form data
const form = new IncomingForm();

form.parse(buffer, (err, fields, files) => {
    if (err) {
        console.error('Error parsing form data:', err);
        return {
            ok: false,
            status: 500,
            statusText: 'Internal Server Error',
        };
    }