fix: react hooks null reference error in demo #209
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit fixes the "Cannot read properties of null (reading 'useState')" error that occurred when using the local package in the Next.js demo app. Changes: 1. Added transpilePackages configuration to next.config.js - Next.js 14+ requires explicit transpilation of local packages - This ensures React imports are properly resolved during build 2. Removed duplicate react-lite-youtube-embed dependency - package.json had both scoped (@ibrahimcesar/) and unscoped versions - Removed old public package to avoid conflicts Root Cause: Next.js doesn't transpile node_modules by default. When using a local package via "file:..", Next.js needs to be told to transpile it. Without this, React imports in the package weren't properly resolved, resulting in null/undefined values for the React namespace. Solution: The transpilePackages option tells Next.js to run the package through its build pipeline, ensuring all imports (including React) are correctly handled. Tested: - ✅ Dev server starts without errors - ✅ Component loads correctly in development mode
Fixed "Cannot read properties of undefined (reading 'includes')" error during static site generation (SSG) build. Issue: The code was trying to access packageInfo.dependencies['react-lite-youtube-embed'] but this dependency was removed in the previous commit. The package is now only available as '@ibrahimcesar/react-lite-youtube-embed'. Changes: 1. Updated dependency key from 'react-lite-youtube-embed' to '@ibrahimcesar/react-lite-youtube-embed' 2. Added optional chaining (?.) for defensive coding in case dependency is missing Tested: - ✅ SSG build completes successfully - ✅ Static pages generated without errors - ✅ Dev server works correctly
ibrahimcesar
changed the title
…67irSUdrEk7 Resolved conflict in demo/package.json by keeping our version without the duplicate 'react-lite-youtube-embed' dependency, which was correctly removed in our earlier commits.
Contributor
size-limit report 📦
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This commit fixes the "Cannot read properties of null (reading 'useState')" error that occurred when using the local package in the Next.js demo app.
Changes:
Added transpilePackages configuration to next.config.js
Removed duplicate react-lite-youtube-embed dependency
Root Cause:
Next.js doesn't transpile node_modules by default. When using a local package via "file:..", Next.js needs to be told to transpile it. Without this, React imports in the package weren't properly resolved, resulting in null/undefined values for the React namespace.
Solution:
The transpilePackages option tells Next.js to run the package through its build pipeline, ensuring all imports (including React) are correctly handled.
Tested: