![[Valid RSS]](images/valid-rss-rogers.png "Valid RSS")
This is a valid RSS feed.
This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.
<url>https://fsiblog.io/wp-content/uploads/2024/09/FSIBLOG-Logo-100x100.web ...
^
line 30, column 0: (11 occurrences) [help]
<site xmlns="com-wordpress:feed-additions:1">241886150</site> <item>
<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:media="http://search.yahoo.com/mrss/" > <channel> <title>FSIBLOG</title> <atom:link href="https://fsiblog.io/feed/" rel="self" type="application/rss+xml" /> <link>https://fsiblog.io</link> <description>Future Stack Innovations Blog</description> <lastBuildDate>Thu, 18 Sep 2025 07:16:09 +0000</lastBuildDate> <language>en-US</language> <sy:updatePeriod> hourly </sy:updatePeriod> <sy:updateFrequency> 1 </sy:updateFrequency> <generator>https://wordpress.org/?v=6.8.2</generator> <image> <url>https://fsiblog.io/wp-content/uploads/2024/09/FSIBLOG-Logo-100x100.webp</url> <title>FSIBLOG</title> <link>https://fsiblog.io</link> <width>32</width> <height>32</height></image> <site xmlns="com-wordpress:feed-additions:1">241886150</site> <item> <title>How Do I Fix ‘Uncaught TypeError: ReactFireMixin’ in React JS</title> <link>https://fsiblog.io/how-do-i-fix-uncaught-typeerror-reactfiremixin-in-react-js/</link> <comments>https://fsiblog.io/how-do-i-fix-uncaught-typeerror-reactfiremixin-in-react-js/#respond</comments> <dc:creator><![CDATA[Asim Sikka]]></dc:creator> <pubDate>Thu, 18 Sep 2025 07:16:06 +0000</pubDate> <category><![CDATA[React JS]]></category> <category><![CDATA[Do I Fix ‘Uncaught TypeError: ReactFireMixin’ in React JS]]></category> <category><![CDATA[How Do I Fix ‘Uncaught TypeError: ReactFireMixin’ in React JS]]></category> <guid isPermaLink="false">https://fsiblog.io/?p=3553</guid> <description><![CDATA[When I first tried wiring up Firebase in a small react js app, I ran head-first into this error: At first glance, it looked like I had messed up my imports or broken something in my build. After some digging, I realized the issue wasn’t just my code it was also about how ReactFireMixin works […]]]></description> <content:encoded><![CDATA[<p>When I first tried wiring up Firebase in a small react js app, I ran head-first into this error:</p> <pre class="wp-block-code"><code>Uncaught TypeError: Cannot set property 'ReactFireMixin' of undefined</code></pre> <p>At first glance, it looked like I had messed up my imports or broken something in my build. After some digging, I realized the issue wasn’t just my code it was also about how <strong>ReactFireMixin</strong> works (or doesn’t work) in modern react js setups. Let me walk you through the problem, the fix, and then I’ll share a simple Firebase-backed todo app that helped me practice.</p> <h2 class="wp-block-heading">My First Attempt</h2> <p>Here’s the first version I wrote:</p> <pre class="wp-block-code"><code>import react from 'react';import {render} from 'react-dom';import reactfire from 'reactfire';import firebase from 'firebase'; class app extends react.component { render() { return <h1> hello bitches! </h1> }}var element = react.createelement(app, {});render(element, document.queryselector('.app'));</code></pre> <p>And here’s my webpack config at that time:</p> <pre class="wp-block-code"><code>module.exports = { entry: "./app/components/Main.js", output: { filename: "public/bundle.js" }, module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules | bower_components)/, loader: 'babel', query: { presets: ['react', 'es2015'] } } ] }}</code></pre> <h2 class="wp-block-heading">Why the Error Happen</h2> <p>The <code>ReactFireMixin</code> error shows up because the version of <code>reactfire</code> I was pulling in expected <code>React.addons</code> to exist. But in modern React, there’s <strong>no addons property</strong> anymore. Mixins were used with the old <code>React.createClass</code>, and I was trying to use ES6 classes (<code>class App extends React.Component</code>). These two approaches don’t play together.</p> <p>So, the reasons boiled down to:</p> <ul class="wp-block-list"><li>The <code>reactfire</code> library was outdated for my setup.</li> <li>Mixins aren’t supported in ES6 class components.</li> <li>I also had multiple <strong>casing typos</strong>:<ul class="wp-block-list"><li><code>react</code> → <code>React</code></li> <li><code>react.component</code> → <code>React.Component</code></li> <li><code>app</code> should be <code>App</code> (class names must be capitalized).</li> <li><code>react.createelement</code> → <code>React.createElement</code>.</li> <li><code>document.queryselector</code> → <code>document.querySelector</code>.</li></ul></li></ul> <p>In short: the modern way to do this is to <strong>ditch ReactFireMixin completely</strong> and talk directly to the Firebase SDK (or use the new <code>reactfire</code> hooks API).</p> <h2 class="wp-block-heading">The Fix Minimal Version</h2> <p>Here’s my working minimal version no mixins, just React and the Firebase SDK:</p> <pre class="wp-block-code"><code>// src/index.jsximport React from "react";import { createRoot } from "react-dom/client"; // Firebase v9+ modular SDKimport { initializeApp } from "firebase/app";import { getDatabase, ref, onValue } from "firebase/database"; // Firebase setup (use your own config values)const firebaseConfig = { apiKey: "YOUR_KEY", authDomain: "YOUR_APP.firebaseapp.com", databaseURL: "https://YOUR_APP.firebaseio.com", projectId: "YOUR_APP", storageBucket: "YOUR_APP.appspot.com", messagingSenderId: "1234567890", appId: "1:1234567890:web:abcdef",};const app = initializeApp(firebaseConfig);const db = getDatabase(app); class App extends React.Component { state = { greeting: "hello there!" }; componentDidMount() { const greetingRef = ref(db, "demo/greeting"); onValue(greetingRef, (snap) => { const value = snap.val(); if (typeof value === "string") this.setState({ greeting: value }); }); } render() { return <h1>{this.state.greeting}</h1>; }} const root = createRoot(document.querySelector(".app"));root.render(<App />);</code></pre> <h3 class="wp-block-heading">Updated Webpack Config</h3> <pre class="wp-block-code"><code>module.exports = { entry: "./src/index.jsx", output: { filename: "public/bundle.js" }, module: { rules: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env", "@babel/preset-react"] } } } ] }, resolve: { extensions: [".js", ".jsx"] }};</code></pre> <h2 class="wp-block-heading">If I Really Want ReactFire</h2> <p>The modern <code>reactfire</code> library doesn’t use mixins either. It uses <strong>providers and hooks</strong>:</p> <pre class="wp-block-code"><code>import React from "react";import { createRoot } from "react-dom/client";import { FirebaseAppProvider } from "reactfire";import { initializeApp } from "firebase/app"; const firebaseConfig = {/* ... */}; function App() { return <h1>Hi from ReactFire hooks</h1>;} const root = createRoot(document.querySelector(".app"));root.render( <FirebaseAppProvider firebaseApp={initializeApp(firebaseConfig)}> <App /> </FirebaseAppProvider>);</code></pre> <p>With that, I can use hooks like <code>useDatabase</code>, <code>useDatabaseObjectData</code>, etc. No <code>ReactFireMixin</code> needed.</p> <h2 class="wp-block-heading">Practice Feature Firebase Todo App</h2> <p>To cement what I learned, I built a tiny todo list that reads/writes to Firebase:</p> <pre class="wp-block-code"><code>import React from "react";import { createRoot } from "react-dom/client";import { initializeApp } from "firebase/app";import { getDatabase, ref, onValue, push, set, update } from "firebase/database"; const firebaseConfig = { apiKey: "YOUR_KEY", authDomain: "YOUR_APP.firebaseapp.com", databaseURL: "https://YOUR_APP.firebaseio.com", projectId: "YOUR_APP", storageBucket: "YOUR_APP.appspot.com", messagingSenderId: "1234567890", appId: "1:1234567890:web:abcdef",};const fbApp = initializeApp(firebaseConfig);const db = getDatabase(fbApp); class App extends React.Component { state = { todos: {}, input: "" }; componentDidMount() { const todosRef = ref(db, "demo/todos"); onValue(todosRef, (snap) => { this.setState({ todos: snap.val() || {} }); }); } addTodo = async (e) => { e.preventDefault(); const text = this.state.input.trim(); if (!text) return; const listRef = ref(db, "demo/todos"); const newRef = push(listRef); await set(newRef, { text, done: false, createdAt: Date.now() }); this.setState({ input: "" }); }; toggleTodo = (id, done) => { const tRef = ref(db, `demo/todos/${id}`); update(tRef, { done: !done }); }; render() { const entries = Object.entries(this.state.todos); return ( <div style={{ fontFamily: "sans-serif", maxWidth: 420, margin: "40px auto" }}> <h1>Firebase Todos</h1> <form onSubmit={this.addTodo} style={{ display: "flex", gap: 8 }}> <input value={this.state.input} onChange={(e) => this.setState({ input: e.target.value })} placeholder="Add a todo" style={{ flex: 1, padding: 8 }} /> <button type="submit">Add</button> </form> <ul style={{ padding: 0, listStyle: "none", marginTop: 16 }}> {entries.length === 0 && <li>No todos yet.</li>} {entries.map(([id, t]) => ( <li key={id} style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 0", borderBottom: "1px solid #eee" }} > <input type="checkbox" checked={!!t.done} onChange={() => this.toggleTodo(id, t.done)} /> <span style={{ textDecoration: t.done ? "line-through" : "none" }}> {t.text} </span> </li> ))} </ul> </div> ); }} const root = createRoot(document.querySelector(".app"));root.render(<App />);</code></pre> <p>Now I can add todos, toggle them, and see live updates straight from Firebase.</p> <h2 class="wp-block-heading">Final Thought</h2> <p>When I saw the <code>ReactFireMixin</code> error, my first instinct was that I mis-configured webpack or react js. The real lesson, though, was that <strong>ReactFireMixin is simply not meant for modern React</strong>. By switching to the Firebase SDK (or the updated <code>reactfire</code> with hooks), everything became cleaner, future proof, and easier to understand. If you hit this error, don’t waste time fighting with <code>ReactFireMixin</code>. Instead, embrace the new patterns. And if you really want to practice, try building something small like the todo app above. It’s the fastest way to learn.</p>]]></content:encoded> <wfw:commentRss>https://fsiblog.io/how-do-i-fix-uncaught-typeerror-reactfiremixin-in-react-js/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <post-id xmlns="com-wordpress:feed-additions:1">3553</post-id> </item> <item> <title>How Do I Fix the ‘babel-preset-es2015’ Error When Using Arrow Functions in React</title> <link>https://fsiblog.io/how-do-i-fix-the-babel-preset-es2015-error-when-using-arrow-functions-in-react/</link> <comments>https://fsiblog.io/how-do-i-fix-the-babel-preset-es2015-error-when-using-arrow-functions-in-react/#respond</comments> <dc:creator><![CDATA[Asim Sikka]]></dc:creator> <pubDate>Thu, 18 Sep 2025 06:56:07 +0000</pubDate> <category><![CDATA[React JS]]></category> <category><![CDATA[Do I Fix the ‘babel-preset-es2015’ Error When Using Arrow Functions in React]]></category> <category><![CDATA[Fix the ‘babel-preset-es2015’ Error When Using Arrow Functions in React]]></category> <guid isPermaLink="false">https://fsiblog.io/?p=3550</guid> <description><![CDATA[When I first started building my React JS project, I was excited to use arrow functions because they’re a clean ES6 syntax. But then, I hit a wall. My build kept failing with a Babel error, and it took some digging to understand what was going on. In this article, I’ll walk you through my […]]]></description> <content:encoded><![CDATA[<p>When I first started building my React JS project, I was excited to use arrow functions because they’re a clean ES6 syntax. But then, I hit a wall. My build kept failing with a Babel error, and it took some digging to understand what was going on. In this article, I’ll walk you through my original setup, the error I faced, why it happens, and how I fixed it. I’ll also share a working example with extra functionality that you can practice with.</p> <h2 class="wp-block-heading">My Original Setup</h2> <p>I was compiling my React project with Webpack. Here’s the <code>webpack.config.js</code> I had:</p> <pre class="wp-block-code"><code>const HTMLWebPackPlugin = require('html-webpack-plugin');const path = require('path'); module.exports = { entry: [ 'babel-polyfill', './src/index.js' ], output: { path: path.resolve(__dirname, "build"), filename: "bundle.js" }, module:{ rules:[ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'], }, { test: /\.scss$/, exclude: /node_modules/, use: ['style-loader', 'css-loader', 'sass-loader'] } ], }, resolve: { extensions: ['*', '.js', '.jsx'], }, plugins: [ new HTMLWebPackPlugin({ template: path.join(__dirname, '/build/index.html') }) ], devServer:{ port:5200 }};</code></pre> <p>Inside my project root, I also had a <code>.babelrc</code> file:</p> <pre class="wp-block-code"><code>{ "presets": [ "es2015", "react", "@babel/preset-env", "@babel/preset-react" ]}</code></pre> <p>And in one of my React class components, I wrote an arrow function like this:</p> <pre class="wp-block-code"><code>addBackDrop = e => { if (this.state.showDatePicker && !ReactDOM.findDOMNode(this).contains(e.target)) { this.showDatePicker(false); }}</code></pre> <h2 class="wp-block-heading">The Error I Saw</h2> <p>When I ran <code>npm run dev</code>, I immediately hit this error:</p> <pre class="wp-block-code"><code>ERROR in ./src/index.jsModule build failed (from ./node_modules/babel-loader/lib/index.js):Error: Plugin/Preset files are not allowed to export objects, only functions.In ...\node_modules\babel-preset-es2015\lib\index.js</code></pre> <p>At first glance, it was confusing. Why would my arrow function cause this?</p> <h2 class="wp-block-heading">What Went Wrong</h2> <p>The issue wasn’t with arrow functions themselves—it was my Babel configuration.</p> <ul class="wp-block-list"><li><code>"es2015"</code> and <code>"react"</code> are <strong>old Babel 6 presets</strong>.</li> <li><code>@babel/preset-env</code> and <code>@babel/preset-react</code> are <strong>Babel 7 presets</strong>.</li></ul> <p>By mixing them, Babel 7 tried to load a Babel 6 preset that exported an <strong>object</strong> instead of a <strong>function</strong>. That’s why it complained with:</p> <p><em>Plugin/Preset files are not allowed to export objects, only functions.</em></p> <p>On top of that, class field arrow functions (<code>addBackDrop = e => {}</code>) require the <strong>class properties plugin</strong> in Babel 7.</p> <h2 class="wp-block-heading">How I Fix It</h2> <p>Here’s what I did step by step:</p> <h3 class="wp-block-heading">Installed the right Babel 7 packages</h3> <pre class="wp-block-code"><code>npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties</code></pre> <h3 class="wp-block-heading">Cleaned up my <code>.babelrc</code></h3> <pre class="wp-block-code"><code>{ "presets": [ ["@babel/preset-env", { "targets": "defaults", "useBuiltIns": "usage", "corejs": 3 }], "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"]}</code></pre> <h3 class="wp-block-heading">Fix my Webpack entry</h3> <p>I dropped <code>babel-polyfill</code> (it’s deprecated) and just pointed to my <code>index.js</code>:</p> <pre class="wp-block-code"><code>entry: "./src/index.js",</code></pre> <p>If I wanted explicit polyfills, I could also add at the top of my <code>index.js</code>:</p> <pre class="wp-block-code"><code>import "core-js/stable";import "regenerator-runtime/runtime";</code></pre> <h3 class="wp-block-heading">Sanity checks</h3> <ul class="wp-block-list"><li>I made sure my <code>babel-loader</code> version was <code>^8.x</code>.</li> <li>I pointed <code>html-webpack-plugin</code> to <code>public/index.html</code> (instead of <code>build/</code>).</li> <li>When issues persisted, I deleted <code>node_modules</code> and reinstalled everything fresh.</li></ul> <h2 class="wp-block-heading">A Working Example With Extra Practice</h2> <p>Once Babel was sorted, arrow functions in class components worked perfectly. To practice, I built a small demo component that:</p> <ul class="wp-block-list"><li>Toggles a date picker open/close.</li> <li>Closes it when you click outside.</li> <li>Lets you filter a list with a controlled input.</li></ul> <p>Here’s the code:</p> <h3 class="wp-block-heading"><code>src/App.jsx</code></h3> <pre class="wp-block-code"><code>import React from "react"; export default class App extends React.Component { state = { showDatePicker: false, query: "", items: ["React", "Babel", "Webpack", "Class Fields", "Arrow Functions"] }; containerRef = React.createRef(); togglePicker = () => { this.setState(s => ({ showDatePicker: !s.showDatePicker })); }; handleBackdrop = (e) => { const el = this.containerRef.current; if (this.state.showDatePicker && el && !el.contains(e.target)) { this.setState({ showDatePicker: false }); } }; handleQueryChange = (e) => { this.setState({ query: e.target.value }); }; componentDidMount() { document.addEventListener("click", this.handleBackdrop); } componentWillUnmount() { document.removeEventListener("click", this.handleBackdrop); } get filteredItems() { const q = this.state.query.toLowerCase(); return this.state.items.filter(i => i.toLowerCase().includes(q)); } render() { const { showDatePicker, query } = this.state; return ( <div style={{ fontFamily: "system-ui, sans-serif", padding: 24 }}> <h1>Arrow Functions + Class Fields (Babel 7)</h1> <section ref={this.containerRef} style={{ display: "grid", gap: 12, maxWidth: 480 }}> <button onClick={this.togglePicker}> {showDatePicker ? "Hide" : "Show"} Date Picker </button> {showDatePicker && ( <div style={{ border: "1px solid #ccc", padding: 12, borderRadius: 8 }}> <p>This is a placeholder “date picker”. Click anywhere outside to close.</p> <input type="date" /> </div> )} <hr /> <label> Filter list:{" "} <input value={query} onChange={this.handleQueryChange} placeholder="type to filter…" /> </label> <ul> {this.filteredItems.map(item => ( <li key={item}>{item}</li> ))} </ul> </section> </div> ); }}</code></pre> <h3 class="wp-block-heading"><code>src/index.js</code></h3> <pre class="wp-block-code"><code>import React from "react";import { createRoot } from "react-dom/client";import App from "./App"; const root = createRoot(document.getElementById("root"));root.render(<App />);</code></pre> <h3 class="wp-block-heading"><code>public/index.html</code></h3> <pre class="wp-block-code"><code><!doctype html><html> <head> <meta charset="utf-8" /> <title>Babel 7 Arrow Functions Demo</title> <meta name="viewport" content="width=device-width,initial-scale=1" /> </head> <body> <div id="root"></div> </body></html></code></pre> <h2 class="wp-block-heading">Bonus Hooks Version</h2> <p>I also practiced rewriting this with React hooks. With <code>useState</code>, <code>useRef</code>, and <code>useEffect</code>, the same functionality becomes much cleaner.</p> <pre class="wp-block-code"><code>import React, { useEffect, useMemo, useRef, useState } from "react"; export default function AppHooks() { const [showDatePicker, setShowDatePicker] = useState(false); const [query, setQuery] = useState(""); const items = ["React", "Babel", "Webpack", "Class Fields", "Arrow Functions"]; const containerRef = useRef(null); const togglePicker = () => setShowDatePicker(v => !v); const handleQueryChange = (e) => setQuery(e.target.value); const handleBackdrop = (e) => { const el = containerRef.current; if (showDatePicker && el && !el.contains(e.target)) { setShowDatePicker(false); } }; useEffect(() => { document.addEventListener("click", handleBackdrop); return () => document.removeEventListener("click", handleBackdrop); }, [showDatePicker]); const filteredItems = useMemo(() => { const q = query.toLowerCase(); return items.filter(i => i.toLowerCase().includes(q)); }, [items, query]); return ( <div style={{ fontFamily: "system-ui, sans-serif", padding: 24 }}> <h1>Arrow Functions + Hooks</h1> <section ref={containerRef} style={{ display: "grid", gap: 12, maxWidth: 480 }}> <button onClick={togglePicker}> {showDatePicker ? "Hide" : "Show"} Date Picker </button> {showDatePicker && ( <div style={{ border: "1px solid #ccc", padding: 12, borderRadius: 8 }}> <p>This is a placeholder “date picker”. Click anywhere outside to close.</p> <input type="date" /> </div> )} <hr /> <label> Filter list:{" "} <input value={query} onChange={handleQueryChange} placeholder="type to filter…" /> </label> <ul> {filteredItems.map(item => <li key={item}>{item}</li>)} </ul> </section> </div> );}</code></pre> <h2 class="wp-block-heading">Final Thought</h2> <p>I learned that sometimes the scariest-looking errors aren’t about my code at all they’re about configuration mismatches. Mixing Babel 6 and Babel 7 presets caused my build to break, but once I cleaned up my <code>.babelrc</code> and installed the right packages, arrow functions worked beautifully.</p> <p>If you run into the dreaded <strong>“Plugin/Preset files are not allowed to export objects, only functions”</strong> error, double check your Babel presets. Stick with Babel 7, add the class properties plugin, and you’ll be back on track in no time.</p>]]></content:encoded> <wfw:commentRss>https://fsiblog.io/how-do-i-fix-the-babel-preset-es2015-error-when-using-arrow-functions-in-react/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <post-id xmlns="com-wordpress:feed-additions:1">3550</post-id> </item> <item> <title>How to Fix Sizeof Misuse Causing malloc() Crashes on Linux</title> <link>https://fsiblog.io/how-to-fix-sizeof-misuse-causing-malloc-crashes-on-linux/</link> <comments>https://fsiblog.io/how-to-fix-sizeof-misuse-causing-malloc-crashes-on-linux/#respond</comments> <dc:creator><![CDATA[Karna Sodari]]></dc:creator> <pubDate>Wed, 17 Sep 2025 05:58:06 +0000</pubDate> <category><![CDATA[Linux]]></category> <category><![CDATA[Fix Sizeof Misuse Causing malloc() Crashes on Linux]]></category> <category><![CDATA[How to Fix Sizeof Misuse Causing malloc() Crashes on Linux]]></category> <guid isPermaLink="false">https://fsiblog.io/?p=3544</guid> <description><![CDATA[When I first wrote a small parser in C to count some metadata operators, it worked perfectly fine on macOS. But as soon as I compiled the same code on Linux, it blew up with a scary error: At first, I thought it was a compiler issue or some subtle platform difference. But after digging […]]]></description> <content:encoded><![CDATA[<p>When I first wrote a small parser in C to count some metadata operators, it worked perfectly fine on macOS. But as soon as I compiled the same code on Linux, it blew up with a scary error:</p> <pre class="wp-block-code"><code>malloc(): memory corruptionAborted (core dumped)</code></pre> <p>At first, I thought it was a compiler issue or some subtle platform difference. But after digging deeper, I realized it was <strong>my mistake</strong> all along. Let me walk you through the journey, what went wrong, and how I fixed it.</p> <h2 class="wp-block-heading">The Original Code</h2> <p>Here’s the function I started with:</p> <pre class="wp-block-code"><code>int meta_counter(FILE *meta_file){ int counter = 0; char *c; char line[1024]; while ((c = fgets(line, sizeof(line), meta_file)) != NULL) { char *first = malloc(sizeof(c)); strcpy(first,c); char *rest = strchr(first, ' '); *rest = 0; if (strcmp(first,"Start") != 0 && strcmp(first,"End") != 0) { //handle typos char *d = remove_white_spaces(c); replace_string(d,';',':'); replace_string(d,'.',':'); char *e = (char*)malloc(sizeof(d) + 1); remove_string(e, d, ' '); // put a ':' at the end of the line if (e[strlen(e)-1] != ':') e[strlen(e)] = ':'; //count operators in line 'e' char *key = ":"; char *ptr = e; while((ptr = strchr(ptr, ':')) != NULL) { counter++; ptr++; } } } rewind(meta_file); return counter;}</code></pre> <p>Looks innocent, right But it hides a very subtle C trap.</p> <h2 class="wp-block-heading">The Real Error: <code>sizeof</code> Misuse</h2> <p>The root bug is here:</p> <pre class="wp-block-code"><code>char *first = malloc(sizeof(c));</code></pre> <ul class="wp-block-list"><li><code>c</code> is a pointer.</li> <li><code>sizeof(c)</code> gives me the size of the pointer (8 bytes on 64-bit Linux).</li> <li>I then <code>strcpy(first, c)</code>, which copies the entire string into an 8-byte buffer. Boom—<strong>heap corruption</strong>.</li></ul> <p>I repeated the same mistake later with:</p> <pre class="wp-block-code"><code>malloc(sizeof(d) + 1);</code></pre> <p>which again only gave me space for a pointer, not for the string.</p> <p>Why didn’t this crash on macOS? Well, macOS’s memory allocator is more forgiving. It sometimes lets buffer overruns slip by until they clobber something critical. Linux/glibc, on the other hand, catches heap corruption faster and aborts the process. Same bug, different behavior.</p> <h2 class="wp-block-heading">Other Hidden Bugs</h2> <p>While debugging, I found a few more issues:</p> <ul class="wp-block-list"><li><code>*rest = 0;</code> without checking if <code>rest</code> is <code>NULL</code>.</li> <li>Appending <code>':'</code> without making space for a <code>'\0'</code>.</li> <li>Memory leaks (<code>first</code>, <code>d</code>, <code>e</code> never freed).</li> <li>Treating the result of <code>fgets</code> as permanent storage (it just points to <code>line</code>).</li></ul> <h2 class="wp-block-heading">The Fix and Safer Version</h2> <p>I rewrote the parser with more safety in mind:</p> <pre class="wp-block-code"><code>#include <stdio.h>#include <stdlib.h>#include <string.h>#include <ctype.h> typedef struct { size_t colon_count; size_t lines_read; size_t lines_skipped; // "Start"/"End" size_t malformed; // lines missing expected pieces} MetaStats; static char *xstrdup(const char *s) { size_t n = strlen(s) + 1; char *p = (char *)malloc(n); if (!p) { perror("malloc"); exit(EXIT_FAILURE); } memcpy(p, s, n); return p;} static void rstrip(char *s) { size_t n = strlen(s); while (n && (unsigned char)s[n-1] <= ' ') s[--n] = '\0';}static char *lstrip_inplace(char *s) { while (*s && (unsigned char)*s <= ' ') s++; return s;} static void replace_chars(char *s, char from, char to) { for (; *s; ++s) if (*s == from) *s = to;} static void remove_char_copy(char *dst, const char *src, char ch) { while (*src) { if (*src != ch) *dst++ = *src; src++; } *dst = '\0';} static size_t count_char(const char *s, char ch) { size_t n = 0; for (; *s; ++s) if (*s == ch) ++n; return n;} MetaStats meta_counter2(FILE *meta_file) { MetaStats stats = {0,0,0,0}; char line[1024]; while (fgets(line, sizeof line, meta_file)) { stats.lines_read++; // normalize line rstrip(line); char *cur = lstrip_inplace(line); if (*cur == '\0') continue; // empty if (*cur == '#') continue; // comment // copy for tokenizing char *first = xstrdup(cur); // isolate first token char *space = strchr(first, ' '); if (space) *space = '\0'; if (strcmp(first, "Start") == 0 || strcmp(first, "End") == 0) { stats.lines_skipped++; free(first); continue; } // typo handling char *d = xstrdup(cur); replace_chars(d, ';', ':'); replace_chars(d, '.', ':'); // remove spaces size_t need = strlen(d) + 2; char *e = (char *)malloc(need); if (!e) { perror("malloc"); exit(EXIT_FAILURE); } remove_char_copy(e, d, ' '); // ensure trailing ':' size_t len = strlen(e); if (len == 0) { stats.malformed++; } else { if (e[len-1] != ':') { e[len] = ':'; e[len+1] = '\0'; } stats.colon_count += count_char(e, ':'); } free(first); free(d); free(e); } rewind(meta_file); return stats;} int main(void) { FILE *fp = fopen("meta.txt", "r"); if (!fp) { perror("meta.txt"); return 1; } MetaStats s = meta_counter2(fp); printf("Colons: %zu\nLines read: %zu\nSkipped: %zu\nMalformed: %zu\n", s.colon_count, s.lines_read, s.lines_skipped, s.malformed); fclose(fp); return 0;}</code></pre> <h2 class="wp-block-heading">Why This Works Better</h2> <ul class="wp-block-list"><li>Allocates <code>strlen(...) + 1</code> for strings (or uses <code>strdup</code>).</li> <li>Always checks pointers before dereferencing.</li> <li>Guarantees NUL-termination after modifications.</li> <li>Frees heap memory at the end of each loop iteration.</li> <li>Adds extra stats (<code>lines_skipped</code>, <code>malformed</code>) for practice.</li></ul> <h2 class="wp-block-heading">Extra Practice Ideas</h2> <p>While fixing this, I added a few more features for fun and learning:</p> <ul class="wp-block-list"><li>Support comments (<code>#</code> at start of line).</li> <li>Count malformed lines.</li> <li>Make “Start”/“End” comparisons case-insensitive.</li> <li>Replace the static buffer with <code>getline</code> for unlimited line size.</li> <li>Run under Valgrind to confirm zero leaks: <code>valgrind --leak-check=full ./meta</code></li></ul> <h2 class="wp-block-heading">Final Thought</h2> <p>In the end, fixing this bug reminded me just how unforgiving C can be when it comes to memory management. A small misuse of <code>sizeof</code> was enough to crash my program on Linux, even though it seemed to “work” on macOS. By switching to <code>strlen(...) + 1</code>, carefully checking pointers, and always freeing what I allocate, I’ve built a safer and more portable parser.</p>]]></content:encoded> <wfw:commentRss>https://fsiblog.io/how-to-fix-sizeof-misuse-causing-malloc-crashes-on-linux/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <post-id xmlns="com-wordpress:feed-additions:1">3544</post-id> </item> <item> <title>How Do I Fix x264 M128/__m128 Undefined Error During Make on Linux</title> <link>https://fsiblog.io/how-do-i-fix-x264-m128-__m128-undefined-error-during-make-on-linux/</link> <comments>https://fsiblog.io/how-do-i-fix-x264-m128-__m128-undefined-error-during-make-on-linux/#respond</comments> <dc:creator><![CDATA[Karna Sodari]]></dc:creator> <pubDate>Wed, 17 Sep 2025 05:48:50 +0000</pubDate> <category><![CDATA[Linux]]></category> <category><![CDATA[Do I Fix x264 M128/__m128 Undefined Error During Make on Linux]]></category> <category><![CDATA[Fix x264 M128/__m128 Undefined Error During Make on Linux]]></category> <guid isPermaLink="false">https://fsiblog.io/?p=3541</guid> <description><![CDATA[I was trying to compile x264 on my Linux machine (x86_64), and everything was going fine until I hit a strange set of compile errors. I had disabled assembly because I didn’t have yasm installed, and that’s when things broke. Here’s the error I saw during make: And here’s the snippet of code that was […]]]></description> <content:encoded><![CDATA[<p>I was trying to compile <strong>x264</strong> on my Linux machine (x86_64), and everything was going fine until I hit a strange set of compile errors. I had disabled assembly because I didn’t have <code>yasm</code> installed, and that’s when things broke.</p> <p>Here’s the error I saw during <code>make</code>:</p> <pre class="wp-block-code"><code>common/rectangle.h:84: error: ‘v4si’ undeclaredcommon/rectangle.h:86: error: ‘__m128’ undeclaredcommon/rectangle.h:86: error: expected ‘;’ before ‘v16’...</code></pre> <p>And here’s the snippet of code that was failing:</p> <pre class="wp-block-code"><code>#if HAVE_VECTOREXT && defined(__SSE__) v4si v16 = {v, v, v, v}; M128(d + s*0 + 0) = (__m128)v16; M128(d + s*1 + 0) = (__m128)v16; if (h == 2) return; M128(d + s*2 + 0) = (__m128)v16; M128(d + s*3 + 0) = (__m128)v16;#else</code></pre> <h2 class="wp-block-heading">What This Error Actually Means</h2> <ul class="wp-block-list"><li><code>__m128</code> is a special data type provided by <strong>SSE intrinsics</strong> (from <code><xmmintrin.h></code> and related headers).</li> <li><code>v4si</code> in x264 is a GCC vector typedef, representing a vector of four integers.</li> <li>The guard <code>#if HAVE_VECTOREXT && defined(__SSE__)</code> tells the compiler, “go ahead, use SSE vector types.”</li></ul> <p>My problem was that my compiler claimed SSE was available (<code>__SSE__</code> was defined), but I had disabled assembly support. That left the build in a broken state where SIMD types like <code>__m128</code> weren’t actually usable.</p> <p>In short: <strong>the build system thought SSE was enabled, but the compiler flags and headers weren’t lining up.</strong></p> <h2 class="wp-block-heading">How I Fix It</h2> <p>I found three different ways to solve this problem, depending on what I wanted:</p> <h3 class="wp-block-heading">The Proper Fix Install Yasm and Rebuild</h3> <p>The cleanest way was to just install <code>yasm</code> (and optionally <code>nasm</code>) and let x264 build with full assembly optimizations:</p> <pre class="wp-block-code"><code># Debian/Ubuntusudo apt-get updatesudo apt-get install yasm nasm build-essential # Fedora/RHELsudo dnf install yasm nasm @development-tools</code></pre> <p>Then I rebuilt from scratch:</p> <pre class="wp-block-code"><code>cd x264make distclean 2>/dev/null || true./configuremake -j$(nproc)</code></pre> <p>This gave me the fastest, most reliable build.</p> <h3 class="wp-block-heading">If I Wanted to Stay Without ASM</h3> <p>I had to force-disable vector code too, otherwise x264 still tried to use <code>__m128</code>:</p> <pre class="wp-block-code"><code>make distclean 2>/dev/null || true./configure --disable-asm --host=x86_64-unknown-linux-gnumake CFLAGS="-O2 -U__SSE__ -UHAVE_VECTOREXT" -j$(nproc)</code></pre> <p>This way, the <code>#if HAVE_VECTOREXT && defined(__SSE__)</code> block in <code>rectangle.h</code> was skipped entirely.</p> <h3 class="wp-block-heading">If I Wanted to Keep Vector Code</h3> <p>I could explicitly tell GCC to enable SSE intrinsics:</p> <pre class="wp-block-code"><code>make distclean 2>/dev/null || true./configure --disable-asm CFLAGS="-msse2 -mfpmath=sse"make -j$(nproc)</code></pre> <p>This worked, but honestly, enabling asm is the better long-term option.</p> <h2 class="wp-block-heading">A Tiny Demo Code to Understand the Error</h2> <p>To make sense of what was happening, I wrote this little file, <code>sse_demo.c</code>:</p> <pre class="wp-block-code"><code>// sse_demo.c// Comment OUT the include to reproduce the error// #include <xmmintrin.h> int main(void) { __m128 x; // 128-bit SSE vector (4 floats) (void)x; return 0;}</code></pre> <p>When I compiled it:</p> <pre class="wp-block-code"><code>gcc -O2 -Wall sse_demo.c -o sse_demo</code></pre> <p>It failed with the exact same <code>‘__m128’ undeclared</code> error. But if I added SSE support:</p> <pre class="wp-block-code"><code>gcc -O2 -Wall sse_demo.c -o sse_demo -msse</code></pre> <p>It worked fine.</p> <p>That confirmed the real issue: <strong>the compiler wasn’t being told to use SSE intrinsics.</strong></p> <h2 class="wp-block-heading">More Practice (Hands On Tasks)</h2> <p><strong>Check which macros your compiler defines</strong></p> <pre class="wp-block-code"><code>echo | gcc -dM -E - | grep -E '__SSE__|__SSE2__|__AVX__'</code></pre> <p>If <code>__SSE__</code> shows up but your build fails, it means your flags/headers aren’t aligned.</p> <p><strong>Try a clean non-SIMD build</strong></p> <pre class="wp-block-preformatted">./configure --disable-asm<br>make CFLAGS="-O2 -U__SSE__ -UHAVE_VECTOREXT"</pre> <p><strong>Do a fully optimized build with Yasm</strong></p> <pre class="wp-block-code"><code>sudo apt-get install yasm nasm./configure --enable-pic --enable-sharedmake -j$(nproc)./x264 --version</code></pre> <p><strong>Write your own guarded SIMD code</strong><br>Here’s <code>guarded_sse.c</code>:</p> <pre class="wp-block-preformatted">#include <stdio.h><br>#if defined(__SSE__)<br># include <xmmintrin.h><br>#endif<br><br>int main(void) {<br>#if defined(__SSE__)<br> __m128 z = _mm_set1_ps(1.0f);<br> float out[4];<br> _mm_storeu_ps(out, z);<br> printf("SSE OK: %f %f %f %f\n", out[0], out[1], out[2], out[3]);<br>#else<br> printf("SSE not enabled, running scalar path.\n");<br>#endif<br> return 0;<br>}</pre> <p>Compile and run both with and without <code>-msse</code> and see the difference.</p> <h2 class="wp-block-heading">Final Thought</h2> <p>This whole experience taught me something: <strong>disabling asm in x264 is usually not worth it.</strong> The assembler code is where most of the speed comes from, and without it, you’ll often end up fighting strange compile-time problems like my <code>__m128</code> error. The best fix is simple install Yasm, rebuild clean, and let x264 detect your CPU features properly. But even if you run into these odd SSE type erors, at least now you know what’s happening and how to work around it.</p>]]></content:encoded> <wfw:commentRss>https://fsiblog.io/how-do-i-fix-x264-m128-__m128-undefined-error-during-make-on-linux/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <post-id xmlns="com-wordpress:feed-additions:1">3541</post-id> </item> <item> <title>How Do I Fix Nuxt.js Webpack Build Error on Heroku When Everything Works Locally</title> <link>https://fsiblog.io/how-do-i-fix-nuxt-js-webpack-build-error-on-heroku-when-everything-works-locally/</link> <comments>https://fsiblog.io/how-do-i-fix-nuxt-js-webpack-build-error-on-heroku-when-everything-works-locally/#respond</comments> <dc:creator><![CDATA[Zhexuan Liu]]></dc:creator> <pubDate>Tue, 16 Sep 2025 06:35:06 +0000</pubDate> <category><![CDATA[Nuxt.js]]></category> <category><![CDATA[Do I Fix Nuxt.js Webpack Build Error on Heroku When Everything Works Locally]]></category> <category><![CDATA[Fix Nuxt.js Webpack Build Error on Heroku When Everything Works Locally]]></category> <guid isPermaLink="false">https://fsiblog.io/?p=3537</guid> <description><![CDATA[I ran into a frustrating problem while deploying my Nuxt.js project to Heroku. Everything ran flawlessly on my local machine, but the Heroku build kept failing with a scary-looking Webpack error. After burying myself in debugging for three days, I finally figured it out. I’m sharing the journey here in case it saves you the […]]]></description> <content:encoded><![CDATA[<p>I ran into a frustrating problem while deploying my Nuxt.js project to Heroku. Everything ran flawlessly on my local machine, but the Heroku build kept failing with a scary-looking Webpack error. After burying myself in debugging for three days, I finally figured it out. I’m sharing the journey here in case it saves you the same headache.</p> <h2 class="wp-block-heading">The Buggy Code I Started With</h2> <p>In my <code>layouts/default.vue</code> file, I had this:</p> <pre class="wp-block-code"><code><template> <div> <Sidebar /> <nuxt/> </div></template> <script>// Buggy import: wrong path casing, brittle relative pathimport Sidebar from '../components/Sidebar/_Sidebar.vue' export default { components: { Sidebar }}</script></code></pre> <p>And this was my repo structure:</p> <pre class="wp-block-code"><code>components/└── sidebar/ └── _Sidebar.vuelayouts/└── default.vue</code></pre> <p>Notice the mismatch? The <strong>folder is <code>sidebar/</code> (lowercase)</strong>, but I imported it as <code>Sidebar/</code> (uppercase). On macOS or Windows, this still works because the filesystem is case-insensitive. But Heroku runs on Linux, which is case-sensitive. That’s why my local build passed but Heroku exploded.</p> <h2 class="wp-block-heading">The Error Explain</h2> <p>Heroku’s build log screamed:</p> <pre class="wp-block-code"><code>Module not found: Error: Can't resolve '../components/Sidebar/_Sidebar.vue'</code></pre> <p>Webpack was telling me the file didn’t exist at that exact path. The truth: it didn’t, at least not with the exact casing I typed. So the fix wasn’t about dependencies or Nuxt itself—it was about being precise with filenames and imports.</p> <h2 class="wp-block-heading">The Fix</h2> <h3 class="wp-block-heading">Use Nuxt’s Alias + Correct Case</h3> <p>Instead of relying on fragile relative paths, I switched to Nuxt’s alias (<code>~</code> or <code>@</code>) and matched the on-disk case exactly.</p> <p>Here’s my updated <code>layouts/default.vue</code>:</p> <pre class="wp-block-code"><code><template> <div> <!-- Sidebar is lazy-loaded --> <Sidebar :links="navLinks"/> <nuxt/> </div></template> <script>// Lazy-load, use alias, match casingconst Sidebar = () => import('~/components/sidebar/_Sidebar.vue') export default { components: { Sidebar }, data () { return { navLinks: [ { text: 'Home', to: '/' }, { text: 'About', to: '/about' } ] } }}</script></code></pre> <h3 class="wp-block-heading">The Sidebar Component</h3> <p>Here’s how I structured the <code>components/sidebar/_Sidebar.vue</code> file:</p> <pre class="wp-block-code"><code><template> <aside class="sidebar"> <nav> <ul> <li v-for="(l, idx) in links" :key="idx"> <nuxt-link :to="l.to">{{ l.text }}</nuxt-link> </li> </ul> </nav> </aside></template> <script>export default { name: 'Sidebar', props: { links: { type: Array, default: () => [] } }}</script> <style scoped>.sidebar { padding: 1rem; border-right: 1px solid #eee; }.sidebar a { text-decoration: none; }</style></code></pre> <p>This gave me a flexible sidebar with typed props and safe defaults.</p> <h3 class="wp-block-heading">Guard Against Case Error at Build Time</h3> <p>To catch this kind of problem locally before pushing to Heroku, I added <code>case-sensitive-paths-webpack-plugin</code>.</p> <pre class="wp-block-code"><code>npm i -D case-sensitive-paths-webpack-plugin</code></pre> <p>And updated my <code>nuxt.config.js</code>:</p> <pre class="wp-block-code"><code>const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin') export default { build: { vendor: ['axios', 'vue-touch'], extend (config, { isClient }) { if (isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } config.plugins = config.plugins || [] config.plugins.push(new CaseSensitivePathsPlugin()) } }, alias: { 'hammerjs$': 'vue-touch/dist/hammer-ssr.js' }, plugins: ['~plugins/vue-touch'], css: [{ src: '~assets/scss/app.scss', lang: 'sass' }]}</code></pre> <h3 class="wp-block-heading">Git Case Sensitivity Fix</h3> <p>On macOS and Windows, Git sometimes ignores case-only renames. To force it, I had to do a two-step rename:</p> <pre class="wp-block-code"><code># Directory renamegit mv components/sidebar components/__tmp_sidebar && git commit -m "temp rename"git mv components/__tmp_sidebar components/sidebar && git commit -m "fix: normalize dir casing" # File renamegit mv components/sidebar/_Sidebar.vue components/sidebar/__tmp.vue && git commit -m "temp file rename"git mv components/sidebar/__tmp.vue components/sidebar/_Sidebar.vue && git commit -m "fix: normalize file casing" git push</code></pre> <h3 class="wp-block-heading">Bonus Heroku SCSS Dependency Tip</h3> <p>Another common Heroku pitfall is missing SCSS dependencies. Since Heroku only installs production dependencies, I moved <code>node-sass</code> and <code>sass-loader</code> into <code>dependencies</code>:</p> <pre class="wp-block-code"><code>"dependencies": { "node-sass": "^4.5.0", "sass-loader": "^6.0.2", "axios": "^0.15.3", "nuxt": "^0.9.9", "vue-touch": "^2.0.0-beta.4"}</code></pre> <h2 class="wp-block-heading">Extra Practice Functionality</h2> <p>Here are a couple of “nice-to-have” improvements I added while fixing the error:</p> <ul class="wp-block-list"><li><strong>Lazy-loading components</strong>: speeds up initial page load.</li> <li><strong>Prop typing with defaults</strong>: avoids runtime surprises.</li> <li><strong>Case-sensitive guard plugin</strong>: fails early instead of failing on Heroku.</li> <li><strong>Unit test for Sidebar</strong> (with AVA):</li></ul> <pre class="wp-block-code"><code>// tests/sidebar.spec.jsimport test from 'ava'import { mount } from '@vue/test-utils'import Sidebar from '@/components/sidebar/_Sidebar.vue' test('renders links', t => { const links = [{ text: 'Home', to: '/' }] const wrapper = mount(Sidebar, { propsData: { links } }) t.true(wrapper.text().includes('Home'))})</code></pre> <h2 class="wp-block-heading">Final Thought</h2> <p>What I learned from this is simple but critical: <strong>case sensitivity matters</strong>. Just because something works locally doesn’t mean it’ll work in production especially when deploying to Linux environments like Heroku. By fixing my imports, using Nuxt’s aliases, and adding safeguards like <code>CaseSensitivePathsPlugin</code>, I now deploy with confidence. If you ever find yourself stuck with a Webpack error on Heroku that doesn’t appear locally, double check your file paths and casing. Nine times out of ten, that’s the culprit.</p>]]></content:encoded> <wfw:commentRss>https://fsiblog.io/how-do-i-fix-nuxt-js-webpack-build-error-on-heroku-when-everything-works-locally/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <post-id xmlns="com-wordpress:feed-additions:1">3537</post-id> </item> <item> <title>How Do I Fix ‘An Error Occurred’ in Nuxt.js with IE11?</title> <link>https://fsiblog.io/how-do-i-fix-an-error-occurred-in-nuxt-js-with-ie11/</link> <comments>https://fsiblog.io/how-do-i-fix-an-error-occurred-in-nuxt-js-with-ie11/#respond</comments> <dc:creator><![CDATA[Zhexuan Liu]]></dc:creator> <pubDate>Tue, 16 Sep 2025 06:21:53 +0000</pubDate> <category><![CDATA[Nuxt.js]]></category> <category><![CDATA[Do I Fix 'An Error Occurred' in Nuxt.js with IE11?]]></category> <category><![CDATA[How Do I Fix 'An Error Occurred' in Nuxt.js with IE11?]]></category> <guid isPermaLink="false">https://fsiblog.io/?p=3534</guid> <description><![CDATA[When I first ran my Nuxt.js project in IE11, I was greeted with a big ugly “An error occurred” message. Everything worked perfectly in Chrome and Firefox, but IE11 just refused to cooperate. After digging into the issue, I realized there were three main reasons why my app broke: Here’s how I fixed all three […]]]></description> <content:encoded><![CDATA[<p>When I first ran my Nuxt.js project in IE11, I was greeted with a big ugly <strong>“An error occurred”</strong> message. Everything worked perfectly in Chrome and Firefox, but IE11 just refused to cooperate.</p> <p>After digging into the issue, I realized there were three main reasons why my app broke:</p> <ol class="wp-block-list"><li><strong>IE11 can’t run modern JavaScript</strong> (things like arrow functions, <code>const</code>, etc.) that sneak through un-transpiled inside <code>node_modules</code>.</li> <li><strong>IE11 needs polyfills</strong> for missing features like <code>Promise</code>, <code>Object.assign</code>, and more.</li> <li><strong>I was creating <code>new Cookies()</code> inside <code>asyncData</code></strong>, which runs on both server and client. Since <code>document.cookie</code> doesn’t exist on the server, this blew up the SSR rendering.</li></ol> <p>Here’s how I fixed all three cleanly.</p> <h2 class="wp-block-heading">Transpile the Right Dependencies and Target IE11</h2> <p>Nuxt only transpiles my own app code by default. Libraries like <strong>Vuetify</strong> and <strong>universal-cookie</strong> ship ES2015+ syntax that IE11 can’t parse, so I had to tell Nuxt to transpile them.</p> <pre class="wp-block-code"><code>// nuxt.config.jsexport default { build: { transpile: [ /^vuetify/, // always transpile Vuetify 'universal-cookie', // universal-cookie ships ES2015+ '@johmun/vue-tags-input' ], babel: { presets({ isServer }) { return [ [ require.resolve('@nuxt/babel-preset-app'), { targets: isServer ? { node: 'current' } : { ie: 11 } } ] ] } }, extractCSS: true, }}</code></pre> <p>Note: <code>vendor: [...]</code> is deprecated in newer Nuxt versions. What matters most for IE11 is making sure you <strong>transpile the right dependencies</strong>.</p> <h2 class="wp-block-heading">Add Polyfills Before the App Code Run</h2> <p>IE11 doesn’t understand Promises, async/await, or even some common functions like <code>Object.assign</code>. To fix this, I created a polyfill plugin.</p> <pre class="wp-block-code"><code>// plugins/polyfills.client.jsimport 'core-js/stable'import 'regenerator-runtime/runtime'import 'whatwg-fetch' // only if I use window.fetch directly</code></pre> <p>Then I registered it:</p> <pre class="wp-block-code"><code>// nuxt.config.jsexport default { plugins: [ { src: '~/plugins/polyfills.client.js', mode: 'client' } ]}</code></pre> <p>If I needed polyfills during SSR too, I could also create a <code>.server.js</code> version, but for me the client-side was enough.</p> <h2 class="wp-block-heading">Don’t Instantiate Cookies on the Server</h2> <p>Here’s where I really shot myself in the foot. I was calling <code>new Cookies()</code> inside <code>asyncData</code>, which runs both on <strong>server (SSR)</strong> and <strong>client</strong>. But the server doesn’t have <code>document.cookie</code>, so it failed.</p> <p>Here’s how I fixed it by checking whether I was on the server or client:</p> <pre class="wp-block-code"><code>// pages/index.vueexport default { async asyncData({ req, store }) { let jwt if (process.server) { const cookieparser = require('cookieparser') const parsed = req && req.headers && req.headers.cookie ? cookieparser.parse(req.headers.cookie) : {} jwt = parsed.jwt } else { const Cookies = require('universal-cookie').default const cookies = new Cookies() jwt = cookies.get('jwt') } if (!jwt) { return {} } const { data } = await axios.get('/api/profile/view', { headers: { Authorization: `Bearer ${jwt}` } }) store.dispatch('setuserData', data) return { data } }}</code></pre> <p>And in <code>login.vue</code>, I adjusted it like this:</p> <pre class="wp-block-code"><code>methods: { async Login(email, password) { await this.$store.dispatch('obtainToken', { email, password }) const Cookies = require('universal-cookie').default const cookies = new Cookies() const jwt = cookies.get('jwt') if (jwt) { this.$router.push(this.$route.query.redirect || '/') } else { this.login_false = true } }}</code></pre> <p>Even better: I later switched to <strong>cookie-universal-nuxt</strong>, which let me use <code>this.$cookies.get('jwt')</code> everywhere without worrying about server vs. client.</p> <pre class="wp-block-code"><code>npm install cookie-universal-nuxt</code></pre> <pre class="wp-block-code"><code>// nuxt.config.jsexport default { modules: ['cookie-universal-nuxt']}</code></pre> <p>And now I can just do:</p> <pre class="wp-block-code"><code>const jwt = app.$cookies.get('jwt')</code></pre> <p>Much cleaner!</p> <h2 class="wp-block-heading">Tidy Up Middleware</h2> <p>Finally, I simplified my <code>auth</code> middleware:</p> <pre class="wp-block-code"><code>// middleware/auth.jsexport default function ({ store, redirect }) { if (!store.state.auth || store.state.error) { return redirect('/login') }}</code></pre> <h2 class="wp-block-heading">Final Thought</h2> <p>Getting Nuxt.js to run smoothly in IE11 took some trial and error, but the fix came down to three things: transpiling the right dependencies, adding polyfills, and handling cookies correctly in SSR. Once I made those adjustments, the dreaded “An error occurred” finally disappeared. Even though IE11 is outdated, knowing how to patch these issues gave me a deeper understanding of how Nuxt works under the hood.<br></p>]]></content:encoded> <wfw:commentRss>https://fsiblog.io/how-do-i-fix-an-error-occurred-in-nuxt-js-with-ie11/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <post-id xmlns="com-wordpress:feed-additions:1">3534</post-id> </item> <item> <title>Why Am I Getting Error When Cross Compiling SystemTap for Embedded Linux Devices?</title> <link>https://fsiblog.io/why-am-i-getting-error-when-cross-compiling-systemtap-for-embedded-linux-devices/</link> <comments>https://fsiblog.io/why-am-i-getting-error-when-cross-compiling-systemtap-for-embedded-linux-devices/#respond</comments> <dc:creator><![CDATA[Karna Sodari]]></dc:creator> <pubDate>Mon, 15 Sep 2025 06:38:21 +0000</pubDate> <category><![CDATA[Linux]]></category> <category><![CDATA[Am I Getting Error When Cross Compiling SystemTap for Embedded Linux Devices]]></category> <category><![CDATA[Getting Error When Cross Compiling SystemTap for Embedded Linux Devices]]></category> <guid isPermaLink="false">https://fsiblog.io/?p=3529</guid> <description><![CDATA[I hit a pair of head-scratchers while cross-compiling SystemTap on Ubuntu 18.04 for aarch64: During ./configure During make (link stage) Below is exactly how I decoded the problem, reproduced it with a tiny “broken on purpose” project, and then fixed it. I’ll also share some practice helpers I now keep around to avoid this class […]]]></description> <content:encoded><![CDATA[<p>I hit a pair of head-scratchers while cross-compiling SystemTap on Ubuntu 18.04 for <strong>aarch64</strong>:</p> <p><strong>During <code>./configure</code></strong></p> <pre class="wp-block-code"><code>configure: error: missing elfutils development headers/libraries</code></pre> <p><strong>During <code>make</code> (link stage)</strong></p> <pre class="wp-block-code"><code>/usr/bin/ld: libstrfloctime.a(...): Relocations in generic ELF (EM: 183)... error adding symbols: File in wrong formatcollect2: error: ld returned 1 exit status</code></pre> <p>Below is exactly how I decoded the problem, reproduced it with a tiny “broken on purpose” project, and then fixed it. I’ll also share some practice helpers I now keep around to avoid this class of issues.</p> <h2 class="wp-block-heading">TL;DR What Was Actually Wrong</h2> <ul class="wp-block-list"><li><strong>Mixed compilers.</strong> <code>configure</code> found a cross <strong>C</strong> compiler (<code>aarch64-linux-gnu-gcc</code>) but <strong>not</strong> a cross <strong>C++</strong> compiler. It fell back to native <code>g++</code>. Later, the x86_64 linker tried to link aarch64 objects → <strong>“wrong format / EM: 183”</strong>.</li> <li><strong>pkg-config & headers.</strong> My <code>pkg-config</code>/<code>CPPFLAGS</code>/<code>LDFLAGS</code> were pointing at <strong>host</strong> elfutils rather than <strong>target</strong> (aarch64) elfutils, so <code>configure</code> insisted elfutils was missing.</li> <li><strong>Over-eager <code>-static</code>.</strong> Full static cross-linking only works if <strong>every</strong> dependency has a target static <code>.a</code>. I made life harder than necessary.</li></ul> <h2 class="wp-block-heading">The Early Red Flag in My <code>configure</code> Log</h2> <p>The log literally said:</p> <pre class="wp-block-code"><code>checking whether we are cross compiling... no...checking for aarch64-linux-gnu-g++... nochecking for g++... g++</code></pre> <p>If I’m cross-compiling, that first line should be <strong>“yes.”</strong> The test binaries ran on my host, which means they were built for <strong>x86_64</strong>, not <strong>aarch64</strong>. Also, with no <code>aarch64-linux-gnu-g++</code>, C++ parts silently used native <code>g++</code>.</p> <p>Later at link time:</p> <pre class="wp-block-code"><code>Relocations in generic ELF (EM: 183)</code></pre> <p><code>EM: 183</code> means <strong>AArch64</strong>. My <strong>native</strong> linker (<code>/usr/bin/ld</code>, invoked by native <code>g++</code>) tried to link <strong>AArch64</strong> objects. Boom.</p> <h1 class="wp-block-heading">A Tiny Project That Reproduces the Error</h1> <p>I like to catch mistakes with a minimal repro. Here’s a one-file C++ program and a <strong>bad</strong> Makefile that uses a cross C compiler but a <strong>native</strong> C++ compiler exactly the pitfall that bit me.</p> <h2 class="wp-block-heading">First (Broken) Code: <code>hello.cpp</code></h2> <pre class="wp-block-code"><code>#include <iostream> int main() { std::cout << "hello from aarch64 C++\n"; return 0;}</code></pre> <h2 class="wp-block-heading">Bad Makefile</h2> <pre class="wp-block-code"><code># Makefile (broken on purpose)HOST ?= aarch64-linux-gnuCC := $(HOST)-gccCXX := g++ # <-- WRONG: falls back to native C++ linkerLD := ldCXXFLAGS := -O2LDFLAGS := all: hello hello: hello.cpp $(CXX) $(CXXFLAGS) hello.cpp -o $@ clean: rm -f hello</code></pre> <h3 class="wp-block-heading">What Happen</h3> <ul class="wp-block-list"><li><code>CXX=g++</code> invokes the <strong>host</strong> linker.</li> <li>The file is C++ only, so you might not see the arch mismatch immediately. To force the mismatch, compile an <strong>AArch64</strong> object first and then try to link it with native <code>g++</code>:</li></ul> <pre class="wp-block-code"><code># Add this (even more wrong) rule to force arch mismatchhello.o: hello.cpp $(HOST)-g++ -c hello.cpp -o hello.o # aarch64 object hello: hello.o $(CXX) hello.o -o $@ # native g++ tries to link aarch64</code></pre> <p><strong>Expected Error</strong>:</p> <pre class="wp-block-code"><code>/usr/bin/ld: hello.o: Relocations in generic ELF (EM: 183)hello.o: error adding symbols: File in wrong formatcollect2: error: ld returned 1 exit status</code></pre> <h3 class="wp-block-heading">The Error Define & Explain</h3> <ul class="wp-block-list"><li><strong>“Relocations in generic ELF (EM: 183)”</strong> = the object file is for <strong>Machine 183 (AArch64)</strong>.</li> <li><strong>Native <code>g++</code></strong> (x86_64) invokes the x86_64 linker, which cannot link AArch64 objects → <strong>“File in wrong format.”</strong></li></ul> <h2 class="wp-block-heading">Fixing The Tiny Project</h2> <p><strong>Correct Makefile:</strong></p> <pre class="wp-block-code"><code># Makefile (fixed)HOST ?= aarch64-linux-gnuCC := $(HOST)-gccCXX := $(HOST)-g++AR := $(HOST)-arLD := $(HOST)-ldCXXFLAGS := -O2LDFLAGS := all: hello hello: hello.cpp $(CXX) $(CXXFLAGS) hello.cpp -o $@ clean: rm -f hello</code></pre> <p>Now:</p> <pre class="wp-block-code"><code>makefile hello# ELF 64-bit LSB executable, ARM aarch64 ...</code></pre> <h1 class="wp-block-heading">Turning Back to SystemTap the Clean fix I Used</h1> <h3 class="wp-block-heading">Install the cross toolchain (both C <strong>and</strong> C++)</h3> <pre class="wp-block-code"><code>sudo apt-get updatesudo apt-get install -y \ gcc-aarch64-linux-gnu g++-aarch64-linux-gnu \ binutils-aarch64-linux-gnu pkg-config file</code></pre> <p>Without <code>aarch64-linux-gnu-g++</code>, <code>configure</code> falls back to native <code>g++</code> and you’ll see EM:183 again.</p> <h3 class="wp-block-heading">Export all Cross Tools Explicitly</h3> <pre class="wp-block-code"><code>export HOST=aarch64-linux-gnuexport BUILD=$(gcc -dumpmachine) # likely x86_64-linux-gnuexport SYSROOT=/usr/$HOST # or your SDK sysroot export CC=$HOST-gccexport CXX=$HOST-g++export LD=$HOST-ldexport AR=$HOST-arexport RANLIB=$HOST-ranlibexport STRIP=$HOST-stripexport PKG_CONFIG=$HOST-pkg-config # if available</code></pre> <p>No <code>$HOST-pkg-config</code>? Use regular <code>pkg-config</code>, but force it toward <strong>target</strong> <code>.pc</code> files:</p> <pre class="wp-block-code"><code>export PKG_CONFIG=pkg-configexport PKG_CONFIG_SYSROOT_DIR=$SYSROOT# your cross-built install prefixes:export PKG_CONFIG_LIBDIR=/home/zhongyi/tools/elfutils-0.188/_install/lib/pkgconfig:\/home/zhongyi/tools/zlib-1.2.13/_install/lib/pkgconfig</code></pre> <h3 class="wp-block-heading">Point to the Cross Built Dependencies</h3> <pre class="wp-block-code"><code>export Z=/home/zhongyi/tools/zlib-1.2.13/_installexport EU=/home/zhongyi/tools/elfutils-0.188/_install export CPPFLAGS="-I$EU/include -I$Z/include"export LDFLAGS="-L$EU/lib -L$Z/lib"export LIBS="-ldw -lelf -lz"</code></pre> <p>I <strong>drop <code>-static</code></strong> initially; I add it back only after the dynamic build works.</p> <h3 class="wp-block-heading">Configure SystemTap Clearly</h3> <pre class="wp-block-code"><code>./configure \ --build="$BUILD" \ --host="$HOST" \ --prefix="$PWD/_install" \ --with-elfutils="$EU" \ --without-rpm \ --without-nss \ --disable-server \ --disable-java \ --disable-docs</code></pre> <ul class="wp-block-list"><li><code>--build</code> = my machine triple (x86_64-linux-gnu).</li> <li><code>--host</code> = the target (aarch64-linux-gnu).</li> <li>I disable extras that drag in more deps on older distros.</li></ul> <h3 class="wp-block-heading">Build & Install</h3> <pre class="wp-block-code"><code>make -j"$(nproc)"make install</code></pre> <p>I then copy <code>_install/</code> into the target rootfs (or onto the device).<br>Reminder: <strong>the SystemTap compiler (<code>stap</code>) runs on the host</strong>, and the <strong>runtime (<code>staprun</code>) runs on the target</strong>.</p> <h2 class="wp-block-heading">Understanding the Elfutils <code>configure</code> Failure</h2> <p><code>configure</code> printed:</p> <pre class="wp-block-code"><code>checking for ebl_strtabinit in -lebl... nochecking for dwfl_module_getsym in -ldw... noconfigure: error: missing elfutils development headers/libraries</code></pre> <p>In my case this meant:</p> <ul class="wp-block-list"><li><code>CPPFLAGS/LDFLAGS</code> pointed at <strong>host</strong> headers/libs, not <strong>target</strong> ones.</li> <li>Or <code>pkg-config</code> was pulling <strong>host</strong> <code>.pc</code> files.</li></ul> <p><strong>How I verified/fixed it:</strong></p> <pre class="wp-block-code"><code>pkg-config --modversion libdwpkg-config --cflags --libs libdw</code></pre> <p>These must resolve under my <strong>target</strong> prefix (<code>$EU</code>), <strong>not</strong> <code>/usr/lib/x86_64-linux-gnu</code>.<br>If not, I fix <code>PKG_CONFIG_SYSROOT_DIR</code> and <code>PKG_CONFIG_LIBDIR</code>.</p> <h1 class="wp-block-heading">More Practice Functionality Sanity Checks I Now Run First</h1> <h3 class="wp-block-heading">Toolchain Guard Fail Fast if Cross C++ is Missing</h3> <pre class="wp-block-code"><code>cat > toolchain-check.sh <<'EOF'#!/usr/bin/env bashset -euo pipefailHOST="${HOST:-aarch64-linux-gnu}"need() { command -v "$1" >/dev/null || { echo "Missing $1" >&2; exit 1; }; }need "$HOST-gcc"need "$HOST-g++"need "$HOST-ar"need "$HOST-ld"echo "[ok] cross C and C++ toolchain found for $HOST"EOFchmod +x toolchain-check.sh</code></pre> <h3 class="wp-block-heading"><code>pkg-config</code> Guard Ensure I’m Not Linking Host Libs</h3> <pre class="wp-block-code"><code>cat > pkgconfig-check.sh <<'EOF'#!/usr/bin/env bashset -euo pipefailfor pc in libdw libelf zlib; do if pkg-config --exists "$pc"; then echo "[$pc] cflags: $(pkg-config --cflags "$pc")" echo "[$pc] libs : $(pkg-config --libs "$pc")" else echo "[$pc] MISSING" fidoneEOFchmod +x pkgconfig-check.sh</code></pre> <h3 class="wp-block-heading">Minimal “first code” to Prove Both C and C++ are aarch64</h3> <p><code>hello.c</code></p> <pre class="wp-block-code"><code>#include <stdio.h>int main(void) { puts("hello from C (aarch64)"); return 0; }</code></pre> <p><code>hello.cpp</code></p> <pre class="wp-block-code"><code>#include <iostream>int main() { std::cout << "hello from C++ (aarch64)\n"; return 0; }</code></pre> <p>Build & verify:</p> <pre class="wp-block-code"><code>$HOST-gcc -o hello_c hello.c$HOST-g++ -o hello_cpp hello.cpp file hello_c hello_cpp# Expect: ELF 64-bit LSB executable, ARM aarch64 ... readelf -h hello_cpp | grep 'Machine'# Expect: Machine: AArch64</code></pre> <p>If <code>file</code> shows x86_64 for either binary, I know I’ve accidentally used the native toolchain somewhere.</p> <h2 class="wp-block-heading">Optional Tightening</h2> <p>libs:</p> <pre class="wp-block-code"><code>export CFLAGS="-O2 -static"export CXXFLAGS="-O2 -static"</code></pre> <p>If it breaks, you’re missing a target <code>.a</code> (libdw/libelf/libz/libstdc++/libgcc…).</p> <p>Strip final binaries:</p> <pre class="wp-block-code"><code>$HOST-strip _install/bin/staprun</code></pre> <p>For SDK/sysroot builds:</p> <pre class="wp-block-preformatted">export SYSROOT=/path/to/sdk/sysroot<br>export CC="$HOST-gcc --sysroot=$SYSROOT"<br>export CXX="$HOST-g++ --sysroot=$SYSROOT"<br>export PKG_CONFIG_SYSROOT_DIR="$SYSROOT"<br>export PKG_CONFIG_LIBDIR="$SYSROOT/usr/lib/pkgconfig:$SYSROOT/usr/share/pkgconfig"<br>export CPPFLAGS="-I$SYSROOT/usr/include $CPPFLAGS"<br>export LDFLAGS="-L$SYSROOT/usr/lib $LDFLAGS"</pre> <h2 class="wp-block-heading">Final Thought</h2> <p>I used to treat cross-compiling failures as mysterious linker voodoo. They aren’t. Every time I see <strong>EM: 183</strong> now, I immediately ask: <em>“Did I mix compilers or leak host libs?”</em> A 60-second check of <code>CXX</code>, <code>LD</code>, and <code>PKG_CONFIG_*</code> has saved me hours of digging. Start with the tiny repro project above, wire your environment cleanly, and SystemTap (and friends) will fall into place.</p>]]></content:encoded> <wfw:commentRss>https://fsiblog.io/why-am-i-getting-error-when-cross-compiling-systemtap-for-embedded-linux-devices/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <post-id xmlns="com-wordpress:feed-additions:1">3529</post-id> </item> <item> <title>How to Fix a Linux Driver Cause a Multiple Definition Error for My Firmware Array?</title> <link>https://fsiblog.io/how-to-fix-a-linux-driver-cause-a-multiple-definition-error-for-my-firmware-array/</link> <comments>https://fsiblog.io/how-to-fix-a-linux-driver-cause-a-multiple-definition-error-for-my-firmware-array/#respond</comments> <dc:creator><![CDATA[Karna Sodari]]></dc:creator> <pubDate>Mon, 15 Sep 2025 06:20:42 +0000</pubDate> <category><![CDATA[Linux]]></category> <category><![CDATA[Fix a Linux Driver Cause a Multiple Definition Error for My Firmware Array]]></category> <category><![CDATA[How to Fix a Linux Driver Cause a Multiple Definition Error]]></category> <guid isPermaLink="false">https://fsiblog.io/?p=3526</guid> <description><![CDATA[When working with Linux drivers, firmware arrays, or system commands, one of the most common problems I’ve run into is multiple definition errors or command misinterpretation. This usually happens because of how the compiler or runtime interprets certain special characters like the pipe symbol (|). Recently, I had to debug this exact issue when I […]]]></description> <content:encoded><![CDATA[<p>When working with Linux drivers, firmware arrays, or system commands, one of the most common problems I’ve run into is <em>multiple definition errors</em> or <em>command misinterpretation</em>. This usually happens because of how the compiler or runtime interprets certain special characters like the pipe symbol (<code>|</code>).</p> <p>Recently, I had to debug this exact issue when I tried running an <strong>ffmpeg</strong> command inside Java. It threw me off at first, but step by step I figured it out. Let me walk you through what happened.</p> <h2 class="wp-block-heading">First Attempt The Problematic Code</h2> <p>I started with this piece of code, thinking it would just work:</p> <pre class="wp-block-code"><code>public class StreamTest { public static void main(String[] args) { String command = "ffmpeg -i rtmp://192.168.1.112/garage/stream26g -f mpegts -acodec libmp3lame " + "-ar 48000 -ab 64000 -s 480x320 -r 30 -vcodec libx264 -b 544k -flags +loop -cmp +chroma " + "-partitions +parti4x4+partp8x8+partb8x8 -subq 5 -trellis 2 -refs 0 -coder 0 -me_range 16 " + "-keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -bt 200k -maxrate 544k -bufsize 544k " + "-rc_eq 'blurCplx^(1-qComp)' -qcomp 0.6 -qmin 10 -qmax 30 -qdiff 4 -level 30 -aspect 480:320 " + "-g 30 -async 2 - | vod - 10 stream/stream26g/sample stream/stream26g/stream.m3u8 " + "http://www.tshizerbia.com//video/ 5"; try { Process p = Runtime.getRuntime().exec(command); } catch (Exception e) { e.printStackTrace(); } }}</code></pre> <h2 class="wp-block-heading">The Error</h2> <p>When I ran it, this was the output:</p> <pre class="wp-block-code"><code>Unable to find a suitable output format for '|'</code></pre> <p>At first, I thought maybe escaping the <code>|</code> would help. So I tried with <code>\\|</code>, but then the error simply changed to:</p> <pre class="wp-block-code"><code>Unable to find a suitable output format for '\|'</code></pre> <p>Clearly, something was off.</p> <h2 class="wp-block-heading">Why Does This Error Happen?</h2> <p>Here’s what I figured out:</p> <ol class="wp-block-list"><li><strong>Java doesn’t automatically invoke a shell.</strong><br>The <code>Runtime.exec()</code> method doesn’t know what pipes (<code>|</code>), redirection (<code>></code>), or backgrounding (<code>&</code>) mean. These aren’t regular arguments they’re <em>shell features</em>.</li> <li><strong><code>ffmpeg</code> is being called directly.</strong><br>Because Java passes the command directly to <code>ffmpeg</code>, the <code>|</code> is treated as a literal string, not a pipe. Since <code>ffmpeg</code> has no idea what <code>|</code> is supposed to do, it fails.</li></ol> <p>In Linux, the <code>|</code> operator is always handled by the <strong>shell</strong> (<code>bash</code> or <code>sh</code>), not by the program itself.</p> <h2 class="wp-block-heading">Fix Use a Shell to Run the Command</h2> <p>The fix was straightforward once I realized what was happening: I needed to explicitly invoke the shell so that it could interpret the pipe.</p> <p>Here’s the corrected version:</p> <pre class="wp-block-code"><code>public class StreamTestFixed { public static void main(String[] args) { String command = "ffmpeg -i rtmp://192.168.1.112/garage/stream26g -f mpegts -acodec libmp3lame " + "-ar 48000 -ab 64000 -s 480x320 -r 30 -vcodec libx264 -b 544k -flags +loop -cmp +chroma " + "-partitions +parti4x4+partp8x8+partb8x8 -subq 5 -trellis 2 -refs 0 -coder 0 -me_range 16 " + "-keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -bt 200k -maxrate 544k -bufsize 544k " + "-rc_eq 'blurCplx^(1-qComp)' -qcomp 0.6 -qmin 10 -qmax 30 -qdiff 4 -level 30 -aspect 480:320 " + "-g 30 -async 2 - | vod - 10 stream/stream26g/sample stream/stream26g/stream.m3u8 " + "http://www.tshizerbia.com//video/ 5"; try { ProcessBuilder builder = new ProcessBuilder("/bin/sh", "-c", command); builder.inheritIO(); // show logs in console Process p = builder.start(); p.waitFor(); } catch (Exception e) { e.printStackTrace(); } }}</code></pre> <p>Now the shell (<code>/bin/sh</code>) runs the command and interprets the <code>|</code> correctly.</p> <h2 class="wp-block-heading">Extra Practice Functionality</h2> <p>Of course, I didn’t stop there. I wanted this to be more useful and flexible. So I added:</p> <ul class="wp-block-list"><li><strong>Capturing standard output and error streams</strong> – so I could debug easily.</li> <li><strong>Exit status checking</strong> – so I’d know if the command succeeded or failed.</li> <li><strong>Dynamic arguments</strong> – so I could pass in a stream URL without editing the code every time.</li></ul> <p>Here’s the improved version:</p> <pre class="wp-block-code"><code>import java.io.*; public class StreamPractice { public static void main(String[] args) { // Dynamic input: use provided argument or fallback String inputStream = (args.length > 0) ? args[0] : "rtmp://192.168.1.112/garage/stream26g"; String command = "ffmpeg -i " + inputStream + " -f mpegts -acodec libmp3lame " + "-ar 48000 -ab 64000 -s 480x320 -r 30 -vcodec libx264 -b 544k -flags +loop -cmp +chroma " + "-partitions +parti4x4+partp8x8+partb8x8 -subq 5 -trellis 2 -refs 0 -coder 0 -me_range 16 " + "-keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -bt 200k -maxrate 544k -bufsize 544k " + "-rc_eq 'blurCplx^(1-qComp)' -qcomp 0.6 -qmin 10 -qmax 30 -qdiff 4 -level 30 -aspect 480:320 " + "-g 30 -async 2 - | vod - 10 stream/stream26g/sample stream/stream26g/stream.m3u8 " + "http://www.tshizerbia.com//video/ 5"; try { ProcessBuilder builder = new ProcessBuilder("/bin/sh", "-c", command); Process process = builder.start(); // Read stdout BufferedReader reader = new BufferedReader(new InputStreamReader(process.getInputStream())); String line; while ((line = reader.readLine()) != null) { System.out.println("[OUTPUT] " + line); } // Read stderr BufferedReader errorReader = new BufferedReader(new InputStreamReader(process.getErrorStream())); while ((line = errorReader.readLine()) != null) { System.err.println("[ERROR] " + line); } int exitCode = process.waitFor(); System.out.println("Process finished with exit code: " + exitCode); } catch (Exception e) { e.printStackTrace(); } }}</code></pre> <h2 class="wp-block-heading">Final Thought</h2> <p>In the end, fixing this issue taught me that many errors aren’t as complicated as they first seem they’re often just about understanding the environment. By letting the shell interpret the command and adding better error handling, I turned a frustrating bug into a learning moment. Now I have a cleaner, more flexible solution I can reuse for future projects.</p>]]></content:encoded> <wfw:commentRss>https://fsiblog.io/how-to-fix-a-linux-driver-cause-a-multiple-definition-error-for-my-firmware-array/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <post-id xmlns="com-wordpress:feed-additions:1">3526</post-id> </item> <item> <title>How Can I Resolve the ‘FC’ Type Error in a React Component?</title> <link>https://fsiblog.io/how-can-i-resolve-the-fc-type-error-in-a-react-component/</link> <comments>https://fsiblog.io/how-can-i-resolve-the-fc-type-error-in-a-react-component/#respond</comments> <dc:creator><![CDATA[Asim Sikka]]></dc:creator> <pubDate>Sat, 13 Sep 2025 07:22:27 +0000</pubDate> <category><![CDATA[React JS]]></category> <category><![CDATA[Can I Resolve the ‘FC’ Type Error in a React Component?]]></category> <category><![CDATA[How Can I Resolve the ‘FC’ Type Error in a React Component?]]></category> <guid isPermaLink="false">https://fsiblog.io/?p=3522</guid> <description><![CDATA[When I first ran into this error, it completely broke my React + TypeScript build. The compiler screamed at me with the following: It looked scary, but once I broke it down, the fix turned out to be straightforward. Let me walk you through the problem, the cause, and then the step-by-step solution including a […]]]></description> <content:encoded><![CDATA[<p>When I first ran into this error, it completely broke my React + TypeScript build. The compiler screamed at me with the following:</p> <pre class="wp-block-code"><code>Type '({ onPickWinner, canPick, timeToPick, hasWinner, revealMode }: PropsWithChildren<IPickWinnerProps>) => void'is not assignable to type 'FC<IPickWinnerProps>'. Type 'void' is not assignable to type 'ReactElement<...> | null'. TS2322</code></pre> <p>It looked scary, but once I broke it down, the fix turned out to be straightforward. Let me walk you through the problem, the cause, and then the step-by-step solution including a practice version of the component with extra functionality.</p> <h2 class="wp-block-heading">The Original Code</h2> <p>Here’s the code I wrote initially:</p> <pre class="wp-block-code"><code>// GamePlayBlack.tsx export interface IPickWinnerProps { children?: undefined; canPick: boolean; timeToPick: boolean; revealMode: boolean; hasWinner: boolean;} export const PickWinnerIdle: React.FC<IPickWinnerProps> = ( { onPickWinner, canPick, timeToPick, hasWinner, revealMode }) => { const gameData = useDataStore(GameDataStore); const userData = useDataStore(UserDataStore); const [pickWinnerLoading, setPickWinnerLoading] = useState(false); setPickWinnerLoading(true);}</code></pre> <h2 class="wp-block-heading">Why This Error Happen</h2> <p>Looking closely, I found <strong>four separate issues</strong> here:</p> <ol class="wp-block-list"><li><strong>A React.FC must return JSX (or null).</strong><br>My component body ended right after calling <code>setPickWinnerLoading(true)</code>. That means my function returned <code>void</code>, not a <code>ReactElement</code>.</li> <li><strong>I destructured a prop that didn’t exist.</strong><br>I tried to use <code>onPickWinner</code>, but my interface <code>IPickWinnerProps</code> didn’t define it. TypeScript saw the mismatch right away.</li> <li><strong>The <code>children</code> type conflicted.</strong><br>I forced <code>children?: undefined</code>, but <code>React.FC</code> automatically injects <code>children?: ReactNode</code>. That caused a contract violation.</li> <li><strong>I was calling <code>setState</code> during render.</strong><br><code>setPickWinnerLoading(true)</code> runs unconditionally inside the render function. That creates an infinite re-render loop. State updates should be done inside <code>useEffect</code> or event handlers.</li></ol> <h2 class="wp-block-heading">The Minimal Fix</h2> <p>Here’s the corrected component that TypeScript is happy with:</p> <pre class="wp-block-code"><code>import React, { useEffect, useState } from "react"; export interface IPickWinnerProps { onPickWinner: () => void | Promise<void>; canPick: boolean; timeToPick: boolean; revealMode: boolean; hasWinner: boolean; children?: React.ReactNode;} export const PickWinnerIdle: React.FC<IPickWinnerProps> = ({ onPickWinner, canPick, timeToPick, hasWinner, revealMode, children,}) => { const [pickWinnerLoading, setPickWinnerLoading] = useState(false); useEffect(() => { // Control loading state properly setPickWinnerLoading(timeToPick && canPick && !hasWinner); }, [timeToPick, canPick, hasWinner]); return ( <div> <p> {revealMode ? "Reveal mode is ON." : "Waiting for the round to finish…"} </p> <button disabled={!canPick || hasWinner || pickWinnerLoading} onClick={onPickWinner} > {pickWinnerLoading ? "Picking…" : "Pick Winner"} </button> {children} </div> );};</code></pre> <p><strong>Now the component returns JSX, includes the right props, and updates state safely.</strong></p> <h2 class="wp-block-heading">The “Practice” Version With Extra Feature</h2> <p>Once I had the fix working, I built a practice version with a few extras:</p> <ul class="wp-block-list"><li>A <strong>countdown timer</strong> when <code>timeToPick</code> is true.</li> <li>A <strong>fake async handler</strong> for <code>onPickWinner</code>.</li> <li>A <strong>status banner</strong> that shows current state.</li> <li>A <strong>Reset button</strong> to test state changes.</li></ul> <p>Here’s the full practice component:</p> <pre class="wp-block-code"><code>import React, { useEffect, useMemo, useState } from "react"; export interface IPickWinnerProps { onPickWinner?: () => Promise<void> | void; canPick: boolean; timeToPick: boolean; revealMode: boolean; hasWinner: boolean; initialCountdown?: number; children?: React.ReactNode;} export const PickWinnerIdle: React.FC<IPickWinnerProps> = ({ onPickWinner, canPick, timeToPick, hasWinner, revealMode, initialCountdown = 10, children,}) => { const [isLoading, setIsLoading] = useState(false); const [countdown, setCountdown] = useState(initialCountdown); const [error, setError] = useState<string | null>(null); const [winnerPicked, setWinnerPicked] = useState(false); const status = useMemo(() => { if (revealMode) return "Reveal mode"; if (hasWinner || winnerPicked) return "Winner picked"; if (!canPick) return "You cannot pick yet"; if (timeToPick) return "Time to pick!"; return "Waiting…"; }, [revealMode, hasWinner, winnerPicked, canPick, timeToPick]); useEffect(() => { if (timeToPick && canPick && !hasWinner && !winnerPicked) { setCountdown(initialCountdown); } }, [timeToPick, canPick, hasWinner, winnerPicked, initialCountdown]); useEffect(() => { if (!(timeToPick && canPick) || hasWinner || winnerPicked) return; const id = setInterval(() => { setCountdown((s) => (s > 0 ? s - 1 : 0)); }, 1000); return () => clearInterval(id); }, [timeToPick, canPick, hasWinner, winnerPicked]); const handlePickWinner = async () => { if (!canPick || hasWinner || winnerPicked) return; setError(null); setIsLoading(true); try { if (onPickWinner) { await onPickWinner(); } else { await new Promise((res) => setTimeout(res, 900)); // fake API } setWinnerPicked(true); } catch (e) { setError(e instanceof Error ? e.message : "Failed to pick winner."); } finally { setIsLoading(false); } }; const handleResetPractice = () => { setError(null); setIsLoading(false); setWinnerPicked(false); setCountdown(initialCountdown); }; const canClickButton = canPick && !hasWinner && !winnerPicked && !isLoading && (!timeToPick || countdown > 0); return ( <div style={{ padding: 16, border: "1px solid #ddd", borderRadius: 8 }}> <h3 style={{ marginTop: 0 }}>Pick Winner</h3> <div style={{ marginBottom: 8 }}> <strong>Status:</strong> {status} </div> {timeToPick && !hasWinner && !winnerPicked && ( <div style={{ marginBottom: 8 }}> <strong>Countdown:</strong> {countdown}s </div> )} <div style={{ display: "flex", gap: 8, marginBottom: 8 }}> <button onClick={handlePickWinner} disabled={!canClickButton}> {isLoading ? "Picking…" : "Pick Winner"} </button> <button onClick={handleResetPractice} type="button"> Reset (Practice) </button> </div> {error && ( <div style={{ color: "red", marginBottom: 8 }}> Error: {error} </div> )} <div>{children}</div> </div> );};</code></pre> <h2 class="wp-block-heading">Final Thought</h2> <p>When I first saw the error <em>“Type ‘void’ is not assignable to type ‘FC<…>’”</em>, I thought TypeScript was just being overly picky, but it was actually pointing out real flaws in my component. I wasn’t returning JSX, I destructured props that weren’t even defined, I forced <code>children</code> incorrectly, and I called <code>setState</code> during render. Once I fixed these mistakes, the error disappeared and the component worked as expected. Building the “practice” version also helped me get more comfortable with timers, async handlers, and safer state management in React.</p>]]></content:encoded> <wfw:commentRss>https://fsiblog.io/how-can-i-resolve-the-fc-type-error-in-a-react-component/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <post-id xmlns="com-wordpress:feed-additions:1">3522</post-id> </item> <item> <title>How to Resolve 401 Error in React JS Using Redux?</title> <link>https://fsiblog.io/how-to-resolve-401-error-in-react-js-using-redux/</link> <comments>https://fsiblog.io/how-to-resolve-401-error-in-react-js-using-redux/#respond</comments> <dc:creator><![CDATA[Asim Sikka]]></dc:creator> <pubDate>Sat, 13 Sep 2025 07:11:33 +0000</pubDate> <category><![CDATA[React JS]]></category> <category><![CDATA[How to Resolve 401 Error in React JS Using Redux?]]></category> <category><![CDATA[Resolve 401 Error in React JS Using Redux?]]></category> <guid isPermaLink="false">https://fsiblog.io/?p=3519</guid> <description><![CDATA[When I first started wiring up API calls with Redux in my React JS project, I kept running into a 401 Unauthorized error. If you’ve seen that dreaded number, you know how frustrating it can be. A 401 usually means the server didn’t receive a valid authentication header. In my case, I thought I was […]]]></description> <content:encoded><![CDATA[<p>When I first started wiring up API calls with Redux in my React JS project, I kept running into a <strong>401 Unauthorized</strong> error. If you’ve seen that dreaded number, you know how frustrating it can be. A 401 usually means the server didn’t receive a valid authentication header. In my case, I thought I was sending everything correctly: phone number in the body and access token in the header. But it still failed.</p> <p>After breaking it down, I realized there were a few common pitfalls in my code.</p> <h2 class="wp-block-heading">Where I Went Wrong</h2> <ol class="wp-block-list"><li><strong>Headers object was wrong</strong><br>I passed my token like this: <code>axios.post(url, body, { Authorization: `Bearer ${userdata.auth}` })</code> But Axios expects headers to be nested inside a <code>headers</code> key: <code>axios.post(url, body, { headers: { Authorization: `Bearer ${token}` } })</code></li> <li><strong>I forgot <code>await</code></strong><br>Without awaiting the promise, <code>response</code> was just a pending promise and <code>response.data</code> was <code>undefined</code>.</li> <li><strong>Axios instance confusion</strong><br>I created <code>new Axios()</code> but then called <code>axios.post(...)</code> directly. It’s better to stick with a single <code>axios.create()</code> client.</li> <li><strong>Body format wasn’t consistent</strong><br>The API wanted raw JSON. Axios handles JSON automatically if I set <code>Content-Type: application/json</code>.</li> <li><strong>Phone number format</strong><br>Many verification APIs require phone numbers in <strong>E.164 format</strong> (<code>+<country><number></code>). I wasn’t adding the <code>+</code> prefix.</li></ol> <h2 class="wp-block-heading">Clean, Working Project Setup</h2> <p>Here’s how I fixed my Redux project step by step.</p> <h3 class="wp-block-heading">Axios Client</h3> <pre class="wp-block-code"><code>// api/client.jsimport axios from "axios"; export const api = axios.create({ baseURL: "https://theappsouk.com/api", headers: { "Content-Type": "application/json", },});</code></pre> <h3 class="wp-block-heading">Action Types</h3> <pre class="wp-block-code"><code>// actions/types.jsexport const VERIFY_PHONE_NUMBER_REQUEST = "VERIFY_PHONE_NUMBER_REQUEST";export const VERIFY_PHONE_NUMBER_SUCCESS = "VERIFY_PHONE_NUMBER_SUCCESS";export const VERIFY_PHONE_NUMBER_FAILURE = "VERIFY_PHONE_NUMBER_FAILURE";</code></pre> <h3 class="wp-block-heading">Action Creator</h3> <pre class="wp-block-code"><code>// actions/auth.jsimport { api } from "../api/client";import { VERIFY_PHONE_NUMBER_REQUEST, VERIFY_PHONE_NUMBER_SUCCESS, VERIFY_PHONE_NUMBER_FAILURE,} from "./types"; export const verifyPhoneNumber = ({ pnumber, auth }) => { return async (dispatch) => { dispatch({ type: VERIFY_PHONE_NUMBER_REQUEST }); try { // Ensure + prefix for E.164 format const phone_number = pnumber.startsWith("+") ? pnumber : `+${pnumber}`; const response = await api.post( "/Profile/SendVerificationSmsCode", { phone_number }, { headers: { Authorization: `Bearer ${auth}`, }, } ); const { data } = response; dispatch({ type: VERIFY_PHONE_NUMBER_SUCCESS, payload: data }); return data; } catch (err) { const status = err?.response?.status; const message = status === 401 ? "Unauthorized: your session may have expired or the token is invalid." : err?.response?.data?.message || err.message || "Request failed"; dispatch({ type: VERIFY_PHONE_NUMBER_FAILURE, error: { status, message }, }); } };};</code></pre> <h3 class="wp-block-heading">Reducer</h3> <pre class="wp-block-code"><code>// reducers/auth.jsimport { VERIFY_PHONE_NUMBER_REQUEST, VERIFY_PHONE_NUMBER_SUCCESS, VERIFY_PHONE_NUMBER_FAILURE,} from "../actions/types"; const initialState = { verifyPhoneNumber: null, loading: false, error: null,}; export default function authReducer(state = initialState, action) { switch (action.type) { case VERIFY_PHONE_NUMBER_REQUEST: return { ...state, loading: true, error: null }; case VERIFY_PHONE_NUMBER_SUCCESS: return { ...state, loading: false, verifyPhoneNumber: action.payload, error: null, }; case VERIFY_PHONE_NUMBER_FAILURE: return { ...state, loading: false, error: action.error }; default: return state; }}</code></pre> <h3 class="wp-block-heading">React Component with Extra Functionality</h3> <p>I also added:</p> <ul class="wp-block-list"><li>Client-side validation</li> <li>Loading feedback</li> <li>Error messages</li> <li>A “resend code” button with a 30-second cooldown</li></ul> <pre class="wp-block-code"><code>// Comp.jsximport React, { Component } from "react";import { connect } from "react-redux";import { verifyPhoneNumber } from "../actions/auth"; class Comp extends Component { constructor(props) { super(props); this.state = { number: "", error: "", cooldown: 0, timerId: null, }; } componentWillUnmount() { if (this.state.timerId) clearInterval(this.state.timerId); } startCooldown = (seconds = 30) => { if (this.state.timerId) clearInterval(this.state.timerId); this.setState({ cooldown: seconds }); const timerId = setInterval(() => { this.setState((s) => { if (s.cooldown <= 1) { clearInterval(timerId); return { cooldown: 0, timerId: null }; } return { cooldown: s.cooldown - 1 }; }); }, 1000); this.setState({ timerId }); }; handleChange = (e) => this.setState({ number: e.target.value, error: "" }); submitPhoneNumber = async () => { const { number } = this.state; const code = this.props.user?.data?.user?.country_code || ""; const token = this.props.user?.data?.user?.access_token || ""; if (!number) { this.setState({ error: "Phone Number is required" }); return; } if (!/^\d{6,15}$/.test(number)) { this.setState({ error: "Enter a valid phone number (6–15 digits)" }); return; } if (!token) { this.setState({ error: "Missing access token. Please log in again." }); return; } const pnumber = `${code}${number}`; const result = await this.props.verifyPhoneNumber({ pnumber, auth: token }); if (result?.status) { this.startCooldown(30); } }; render() { const { loading, error: serverError } = this.props.auth || {}; const { number, error, cooldown } = this.state; const countryCode = this.props.user?.data?.user?.country_code || "DK"; return ( <form className="form bg-white p-3 mb-3"> <div className="row"> <div className="col-4 mr-0"> <label>Country code</label> <select className="custom-select" disabled> <option>{countryCode}</option> </select> </div> <div className="col-8 ml-0 pl-0"> <label>Mobile number</label> <input type="text" className="form-control" placeholder="Mobilnummer" value={number} onChange={this.handleChange} disabled={loading} /> </div> </div> <small className="text-danger my-0 py-0"> {error || serverError?.message} </small> <div className="form-group mb-0 text-right mt-3"> <button className="btn btn-default" type="button" onClick={this.submitPhoneNumber} disabled={loading || cooldown > 0} title={cooldown > 0 ? `Resend available in ${cooldown}s` : ""} > {loading ? "Sending..." : cooldown > 0 ? `Resend in ${cooldown}s` : "Send Code"} </button> </div> </form> ); }} const mapState = (state) => ({ user: state.user, auth: state.auth,}); export default connect(mapState, { verifyPhoneNumber })(Comp);</code></pre> <h2 class="wp-block-heading">Final Thought</h2> <p>For me, the 401 error wasn’t really about authorization it was about the way I was structuring my Axios call. By fixing the headers, awaiting properly, and validating the phone format, the issue disappeared. I also learned that adding small “practice features” like retries, cooldowns, and validation made my app more user-friendly and reliable. If you’re struggling with a 401 error in React + Redux, double check your headers and response handling first it’s usually something small but critical.</p>]]></content:encoded> <wfw:commentRss>https://fsiblog.io/how-to-resolve-401-error-in-react-js-using-redux/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <post-id xmlns="com-wordpress:feed-additions:1">3519</post-id> </item> </channel></rss> If you would like to create a banner that links to this page (i.e. this validation result), do the following:
Download the "valid RSS" banner.
Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)
Add this HTML to your page (change the image src attribute if necessary):
If you would like to create a text link instead, here is the URL you can use:
http://www.feedvalidator.org/check.cgi?url=https%3A//fsiblog.io/feed/
