-
Notifications
You must be signed in to change notification settings - Fork 2
migrate to vite #21
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: next
Are you sure you want to change the base?
migrate to vite #21
Conversation
WalkthroughThe Changes
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (16)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/@itseasy21/react-elastic-carousel/components/Carousel.jsx (1)
1-1082:⚠️ Potential issueResolve
react/jsx-runtimemodule issue.The GitHub Actions pipeline has reported:
Rollup failed to resolve import "react/jsx-runtime".
This issue typically occurs when the build system expects the new JSX runtime (introduced in React 17+) but cannot find it. Please verify that your
reactandreact-domversions are 17 or later and ensure that Vite’s configuration (or its plugins) properly handles thereact/jsx-runtimeimport. If necessary, add an alias or externalize the module via the Vite configuration (for example, invite.config.js, underresolve.aliasorbuild.rollupOptions.external).🧰 Tools
🪛 Biome (1.9.4)
[error] 645-645: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 655-655: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 861-861: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
🪛 GitHub Actions: Pull Request Checks
[error] 1-1: [vite]: Rollup failed to resolve import "react/jsx-runtime". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to
build.rollupOptions.external.
🧹 Nitpick comments (6)
src/react-app-env.d.ts (1)
1-1: Reference to react-scripts types added.The addition of
/// <reference types="react-scripts" />helps TypeScript pick up the type definitions from thereact-scriptspackage. Please verify that your dependency onreact-scriptsis still needed in your Vite-based setup. If your project is fully migrated away from Create React App patterns, you might consider removing this reference in the future.tsconfig.json (1)
1-30: TypeScript configuration review.The new
tsconfig.jsonfile defines modern TypeScript options and appropriately excludesnode_modulesanddist. A couple of suggestions for consideration given the migration to Vite:
- Since Vite targets modern browsers and does not support legacy ones like IE11, you might consider updating the
"target"from"es5"to a more modern option such as"esnext"or"es2015".- If you are leveraging React 17+’s automatic JSX runtime, updating
"jsx"from"preserve"to"react-jsx"could simplify your setup.Feel free to adjust these settings as they impact the development experience and bundle output.
vite.config.js (3)
1-64: Adopt consistent code style to align with Prettier/ESLint requirements.
Multiple lines use single quotes or trailing commas in a manner flagged by Prettier. Consider running a local formatter or using the recommended ESLint/Prettier setup to address these style issues in one go.🧰 Tools
🪛 ESLint
[error] 1-1: Replace
'path'with"path"(prettier/prettier)
[error] 2-2: Replace
'vite'with"vite"(prettier/prettier)
[error] 3-3: Replace
'@vitejs/plugin-react'with"@vitejs/plugin-react"(prettier/prettier)
[error] 4-4: Replace
'vite-plugin-dts'with"vite-plugin-dts"(prettier/prettier)
[error] 5-5: Replace
'fs'with"fs"(prettier/prettier)
[error] 8-8: Replace
'./package.json',·'utf8'with"./package.json",·"utf8"(prettier/prettier)
[error] 17-17: Replace
'babel-plugin-styled-components'],with"babel-plugin-styled-components"](prettier/prettier)
[error] 18-18: Delete
,(prettier/prettier)
[error] 26-26: Replace
'dist'with"dist"(prettier/prettier)
[error] 28-28: Replace
'index.d.ts'with"index.d.ts"(prettier/prettier)
[error] 29-29: Delete
,(prettier/prettier)
[error] 33-33: Replace
'es2015'with"es2015"(prettier/prettier)
[error] 36-36: Replace
'ReactElasticCarousel'with"ReactElasticCarousel"(prettier/prettier)
[error] 37-37: Replace
'es',·'cjs'with"es",·"cjs"(prettier/prettier)
[error] 39-39: Replace
(format)withformat(prettier/prettier)
[error] 40-40: Replace
'es')·return·'index.es.js'with"es")·return·"index.es.js"(prettier/prettier)
[error] 41-41: Replace
'cjs')·return·'index.js'with"cjs")·return·"index.js"(prettier/prettier)
[error] 43-43: Delete
,(prettier/prettier)
[error] 51-51: Replace
'React'with"React"(prettier/prettier)
[error] 52-52: Replace
'react-dom':·'ReactDOM'with"react-dom":·"ReactDOM"(prettier/prettier)
[error] 53-53: Replace
'styled-components':·'styled'with"styled-components":·"styled"(prettier/prettier)
[error] 54-54: Replace
'prop-types':·'PropTypes',with"prop-types":·"PropTypes"(prettier/prettier)
[error] 57-57: Replace
'named',with"named"(prettier/prettier)
[error] 58-58: Delete
,(prettier/prettier)
[error] 62-62: Delete
,(prettier/prettier)
[error] 63-63: Delete
,(prettier/prettier)
[error] 64-64: Insert
⏎(prettier/prettier)
15-20: Check for duplicate React plugin usage.
You invoke thereact()plugin twice (first with a custom Babel config for styled-components, and then again without options). Confirm whether both calls are intended. If not, consider combining the Babel plugin options into a singlereact()call:react({ babel: { plugins: ['babel-plugin-styled-components'] } }), -react(),🧰 Tools
🪛 ESLint
[error] 17-17: Replace
'babel-plugin-styled-components'],with"babel-plugin-styled-components"](prettier/prettier)
[error] 18-18: Delete
,(prettier/prettier)
20-20: Confirm or remove the comment referencingbabel.config.cjs.
This file may no longer exist in the project. Update or remove the comment referencing it to avoid confusion.package.json (1)
3-3: Confirm semver and update changelog accordingly.
You’ve incremented the package version to1.0.3. Ensure you’ve updated any release notes or changelog entries if you maintain one, so consumers can track changes.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (10)
babel.config.cjs(0 hunks)package.json(5 hunks)rollup.config.demo.js(0 hunks)rollup.config.js(0 hunks)src/@itseasy21/react-elastic-carousel/components/Carousel.jsx(1 hunks)src/@itseasy21/react-elastic-carousel/components/__tests__/Carousel.test.js(1 hunks)src/@itseasy21/react-elastic-carousel/index.js(1 hunks)src/react-app-env.d.ts(1 hunks)tsconfig.json(1 hunks)vite.config.js(1 hunks)
💤 Files with no reviewable changes (3)
- babel.config.cjs
- rollup.config.js
- rollup.config.demo.js
🧰 Additional context used
🪛 GitHub Actions: Pull Request Checks
src/@itseasy21/react-elastic-carousel/components/Carousel.jsx
[error] 1-1: [vite]: Rollup failed to resolve import "react/jsx-runtime". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to build.rollupOptions.external.
🪛 ESLint
vite.config.js
[error] 1-1: Replace 'path' with "path"
(prettier/prettier)
[error] 2-2: Replace 'vite' with "vite"
(prettier/prettier)
[error] 3-3: Replace '@vitejs/plugin-react' with "@vitejs/plugin-react"
(prettier/prettier)
[error] 4-4: Replace 'vite-plugin-dts' with "vite-plugin-dts"
(prettier/prettier)
[error] 5-5: Replace 'fs' with "fs"
(prettier/prettier)
[error] 8-8: Replace './package.json',·'utf8' with "./package.json",·"utf8"
(prettier/prettier)
[error] 17-17: Replace 'babel-plugin-styled-components'], with "babel-plugin-styled-components"]
(prettier/prettier)
[error] 18-18: Delete ,
(prettier/prettier)
[error] 26-26: Replace 'dist' with "dist"
(prettier/prettier)
[error] 28-28: Replace 'index.d.ts' with "index.d.ts"
(prettier/prettier)
[error] 29-29: Delete ,
(prettier/prettier)
[error] 33-33: Replace 'es2015' with "es2015"
(prettier/prettier)
[error] 36-36: Replace 'ReactElasticCarousel' with "ReactElasticCarousel"
(prettier/prettier)
[error] 37-37: Replace 'es',·'cjs' with "es",·"cjs"
(prettier/prettier)
[error] 39-39: Replace (format) with format
(prettier/prettier)
[error] 40-40: Replace 'es')·return·'index.es.js' with "es")·return·"index.es.js"
(prettier/prettier)
[error] 41-41: Replace 'cjs')·return·'index.js' with "cjs")·return·"index.js"
(prettier/prettier)
[error] 43-43: Delete ,
(prettier/prettier)
[error] 51-51: Replace 'React' with "React"
(prettier/prettier)
[error] 52-52: Replace 'react-dom':·'ReactDOM' with "react-dom":·"ReactDOM"
(prettier/prettier)
[error] 53-53: Replace 'styled-components':·'styled' with "styled-components":·"styled"
(prettier/prettier)
[error] 54-54: Replace 'prop-types':·'PropTypes', with "prop-types":·"PropTypes"
(prettier/prettier)
[error] 57-57: Replace 'named', with "named"
(prettier/prettier)
[error] 58-58: Delete ,
(prettier/prettier)
[error] 62-62: Delete ,
(prettier/prettier)
[error] 63-63: Delete ,
(prettier/prettier)
[error] 64-64: Insert ⏎
(prettier/prettier)
🔇 Additional comments (6)
src/@itseasy21/react-elastic-carousel/components/__tests__/Carousel.test.js (1)
1-73: Updated import path for Carousel component is consistent.The test file now imports the
Carouselcomponent using the explicit.jsxextension (import Carousel from "../Carousel.jsx";). This change aligns with the updated file naming conventions throughout the project and should ensure consistency during module resolution in Vite.src/@itseasy21/react-elastic-carousel/index.js (1)
1-2: Default export updated to reflect new file extension.Exporting the
Carouselcomponent from./components/Carousel.jsxensures that the file references are consistent with the rest of the project changes.src/@itseasy21/react-elastic-carousel/components/Carousel.jsx (1)
4-5: Updated import extensions for child components.Changing the import statements for
TrackandArrowto include the.jsxextension improves consistency across the codebase.package.json (3)
45-45: Build process migration looks good.
Switching to Vite is consistent with your new configuration file. The shorter build script is simpler.
91-123:Details
❓ Verification inconclusive
Validate new devDependencies and consider pinning critical dependencies.
You added or updated dependencies with open or less restrictive version specs (e.g.,"typescript": "latest"). Confirm they’re compatible with your code. If you want predictable builds and minimal breakage, consider pinning versions to specific stable releases.
🏁 Script executed:
#!/bin/bash # 1. Check if the newly added dependencies are present in your lock file # 2. Pin or confirm versions for stability yarn list --pattern "@types/babel__core|@types/node|@vitejs/plugin-react|babel-plugin-styled-components|typescript|vite|vite-plugin-dts"Length of output: 608
Critical Dependency Version Verification Needed
It appears the yarn check command failed due to an environment mismatch (your project requires Yarn 3.2.1 via Corepack, but the global Yarn version is 1.22.22). This prevents automatic verification of the dependency versions. Please enable Corepack by runningcorepack enablein your terminal and then manually verify that the versions (especially for entries like"typescript": "latest") are locked to stable releases if that’s desirable for predictable builds.
- File: package.json (Lines: 91–123)
- Action:
- Enable Corepack with
corepack enable.- Re-run the dependency check to confirm if critical dependencies are using pinned versions.
- Consider updating versions from open-ended (e.g.,
"latest") to specific stable releases if compatibility is confirmed.
22-24:Details
✅ Verification successful
Ensure the updated “exports” structure meets your intended Node module resolution.
You are specifying “types,” “import,” and “require” fields differently than before. Verify that consumers can still import both the JS code and TypeScript definitions.
🏁 Script executed:
#!/bin/bash # Verify that consumers can import your package as intended and get correct types. # We search for import statements and references in your codebase or example files. rg -A 5 "@itseasy21/react-elastic-carousel"Length of output: 14064
Module Resolution and Type Definition Exports Verified
The documentation examples clearly show that consumers continue to import the package as intended using:
import Carousel from '@itseasy21/react-elastic-carousel';The updated configuration in your
package.json—with:
"types": "./dist/index.d.ts""import": "./dist/index.es.js""require": "./dist/index.js"—appears to correctly expose both the JavaScript code (via ESM and CJS consumers) and the TypeScript definitions. Please ensure that a sample TypeScript consumer project compiles using these definitions if you haven’t already.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
🧹 Nitpick comments (3)
.github/workflows/ci.yml (1)
61-61: Ensure Proper YAML FormattingA static analysis hint indicates that there is no newline character at the end of the file. Please add a newline to conform with YAML best practices.
🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 61-61: no new line character at the end of file
(new-line-at-end-of-file)
vite.config.js (2)
1-5: Fix code style inconsistenciesThere are inconsistent code styles throughout the file, particularly with quote styles (mixing single and double quotes) and trailing commas. Consider using a consistent style or running Prettier to automatically format the file.
The ESLint analysis shows multiple instances where single quotes should be replaced with double quotes to maintain consistency.
🧰 Tools
🪛 ESLint
[error] 1-1: Replace
'path'with"path"(prettier/prettier)
[error] 2-2: Replace
'vite'with"vite"(prettier/prettier)
[error] 3-3: Replace
'@vitejs/plugin-react'with"@vitejs/plugin-react"(prettier/prettier)
[error] 4-4: Replace
'vite-plugin-dts'with"vite-plugin-dts"(prettier/prettier)
[error] 5-5: Replace
'fs'with"fs"(prettier/prettier)
7-10: Consider more robust package.json handlingReading package.json directly with synchronous file operations creates tight coupling. While it works for build configuration, consider using a more robust approach if this pattern is used elsewhere in the codebase.
// Read package.json directly to get peerDependencies - const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8')); + // Import package.json directly (Vite/Node supports this) + import pkg from './package.json';🧰 Tools
🪛 ESLint
[error] 8-8: Replace
'./package.json',·'utf8'with"./package.json",·"utf8"(prettier/prettier)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (7)
.changeset/README.md(1 hunks).changeset/config.json(1 hunks).changeset/spotty-deer-move.md(1 hunks).github/workflows/ci.yml(1 hunks).github/workflows/pr-checks.yml(2 hunks)package.json(6 hunks)vite.config.js(1 hunks)
✅ Files skipped from review due to trivial changes (3)
- .changeset/spotty-deer-move.md
- .changeset/README.md
- .changeset/config.json
🚧 Files skipped from review as they are similar to previous changes (1)
- package.json
🧰 Additional context used
🪛 ESLint
vite.config.js
[error] 1-1: Replace 'path' with "path"
(prettier/prettier)
[error] 2-2: Replace 'vite' with "vite"
(prettier/prettier)
[error] 3-3: Replace '@vitejs/plugin-react' with "@vitejs/plugin-react"
(prettier/prettier)
[error] 4-4: Replace 'vite-plugin-dts' with "vite-plugin-dts"
(prettier/prettier)
[error] 5-5: Replace 'fs' with "fs"
(prettier/prettier)
[error] 8-8: Replace './package.json',·'utf8' with "./package.json",·"utf8"
(prettier/prettier)
[error] 17-17: Replace 'babel-plugin-styled-components'], with "babel-plugin-styled-components"]
(prettier/prettier)
[error] 18-18: Delete ,
(prettier/prettier)
[error] 26-26: Replace 'dist' with "dist"
(prettier/prettier)
[error] 28-28: Replace 'index.d.ts' with "index.d.ts"
(prettier/prettier)
[error] 29-29: Delete ,
(prettier/prettier)
[error] 33-33: Replace 'es2015' with "es2015"
(prettier/prettier)
[error] 36-36: Replace 'ReactElasticCarousel' with "ReactElasticCarousel"
(prettier/prettier)
[error] 37-37: Replace 'es',·'cjs' with "es",·"cjs"
(prettier/prettier)
[error] 39-39: Replace (format) with format
(prettier/prettier)
[error] 40-40: Replace 'es')·return·'index.es.js' with "es")·return·"index.es.js"
(prettier/prettier)
[error] 41-41: Replace 'cjs')·return·'index.js' with "cjs")·return·"index.js"
(prettier/prettier)
[error] 43-43: Delete ,
(prettier/prettier)
[error] 47-47: Replace ...Object.keys(pkg.peerDependencies·||·{}),·'react/jsx-runtime' with ⏎········...Object.keys(pkg.peerDependencies·||·{}),⏎········"react/jsx-runtime"⏎······
(prettier/prettier)
[error] 51-51: Replace 'React' with "React"
(prettier/prettier)
[error] 52-52: Replace 'react-dom':·'ReactDOM' with "react-dom":·"ReactDOM"
(prettier/prettier)
[error] 53-53: Replace 'styled-components':·'styled' with "styled-components":·"styled"
(prettier/prettier)
[error] 54-54: Replace 'prop-types':·'PropTypes', with "prop-types":·"PropTypes"
(prettier/prettier)
[error] 57-57: Replace 'named', with "named"
(prettier/prettier)
[error] 58-58: Delete ,
(prettier/prettier)
[error] 62-62: Delete ,
(prettier/prettier)
[error] 63-63: Delete ,
(prettier/prettier)
[error] 64-64: Insert ⏎
(prettier/prettier)
🪛 YAMLlint (1.35.1)
.github/workflows/ci.yml
[error] 61-61: no new line character at the end of file
(new-line-at-end-of-file)
🔇 Additional comments (4)
.github/workflows/pr-checks.yml (2)
14-14: Update Node.js Versions in Validate JobThe matrix now lists only Node.js versions [18, 20, 22], which aligns with the updated package engines requirement. This ensures consistency across the build and testing environments.
59-59: Update Node.js Versions in Compatibility JobSimilar to the validate job, the compatibility job’s matrix now restricts Node.js versions to [18, 20, 22]. This change is consistent with the project's minimum Node requirement and improves testing focus on supported versions.
vite.config.js (2)
31-63: Well-structured library build configurationThe library build configuration is well structured with appropriate settings for:
- Modern JavaScript compatibility (es2015)
- Multiple output formats (ES modules and CommonJS)
- Custom file naming to match package.json exports
- Proper externalization of peer dependencies
- Source maps for debugging
- Clean output directory
🧰 Tools
🪛 ESLint
[error] 33-33: Replace
'es2015'with"es2015"(prettier/prettier)
[error] 36-36: Replace
'ReactElasticCarousel'with"ReactElasticCarousel"(prettier/prettier)
[error] 37-37: Replace
'es',·'cjs'with"es",·"cjs"(prettier/prettier)
[error] 39-39: Replace
(format)withformat(prettier/prettier)
[error] 40-40: Replace
'es')·return·'index.es.js'with"es")·return·"index.es.js"(prettier/prettier)
[error] 41-41: Replace
'cjs')·return·'index.js'with"cjs")·return·"index.js"(prettier/prettier)
[error] 43-43: Delete
,(prettier/prettier)
[error] 47-47: Replace
...Object.keys(pkg.peerDependencies·||·{}),·'react/jsx-runtime'with⏎········...Object.keys(pkg.peerDependencies·||·{}),⏎········"react/jsx-runtime"⏎······(prettier/prettier)
[error] 51-51: Replace
'React'with"React"(prettier/prettier)
[error] 52-52: Replace
'react-dom':·'ReactDOM'with"react-dom":·"ReactDOM"(prettier/prettier)
[error] 53-53: Replace
'styled-components':·'styled'with"styled-components":·"styled"(prettier/prettier)
[error] 54-54: Replace
'prop-types':·'PropTypes',with"prop-types":·"PropTypes"(prettier/prettier)
[error] 57-57: Replace
'named',with"named"(prettier/prettier)
[error] 58-58: Delete
,(prettier/prettier)
[error] 62-62: Delete
,(prettier/prettier)
[error] 63-63: Delete
,(prettier/prettier)
23-28:Details
✅ Verification successful
Ensure TypeScript declaration paths match package.json configuration
Verify that the TypeScript declaration output settings align with the paths specified in your package.json's
typesfield.
🏁 Script executed:
#!/bin/bash # Check if the package.json types field matches the DTS output configuration grep -E '"types"|"typings"' package.jsonLength of output: 110
Configuration Verified: TypeScript Declaration Paths Match Package.json
The DTS settings in
vite.config.js(lines 23-28) correctly generate the output file atdist/index.d.ts, which aligns with the"types": "./dist/index.d.ts"field in yourpackage.json.🧰 Tools
🪛 ESLint
[error] 26-26: Replace
'dist'with"dist"(prettier/prettier)
[error] 28-28: Replace
'index.d.ts'with"index.d.ts"(prettier/prettier)
.github/workflows/ci.yml
Outdated
| - name: Create Release and Publish to npm | ||
| id: changesets | ||
| uses: changesets/action@v1 | ||
| with: | ||
| token: ${{ secrets.NPM_TOKEN }} | ||
| access: public | ||
| # This expects you to have a script called `release` in your package.json | ||
| # that runs `yarn build && changeset publish`. We added this earlier. | ||
| publish: yarn release | ||
| env: | ||
| GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} | ||
| NPM_TOKEN: ${{ secrets.NPM_TOKEN }} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Consolidate Release and Publish Actions Using Changesets
The new "Create Release and Publish to npm" step effectively consolidates multiple legacy release steps into a single action using changesets/action@v1. This simplifies the workflow and aligns with the migration to Vite. Please ensure that the release script in your package.json correctly runs yarn build && changeset publish as expected, and update the documentation if necessary.
🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 61-61: no new line character at the end of file
(new-line-at-end-of-file)
vite.config.js
Outdated
| plugins: [ | ||
| // Explicitly configure react plugin to use babel with styled-components | ||
| react({ | ||
| babel: { | ||
| plugins: ['babel-plugin-styled-components'], | ||
| }, | ||
| }), | ||
| react(), // Uses babel.config.cjs automatically |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove duplicate React plugin
There appears to be duplicate React plugin usage. You're including the React plugin twice - once with explicit babel configuration for styled-components and once without any configuration. This duplication might cause unexpected behavior or confusion.
plugins: [
// Explicitly configure react plugin to use babel with styled-components
react({
babel: {
plugins: ['babel-plugin-styled-components'],
},
}),
- react(), // Uses babel.config.cjs automatically
dts({
// ...📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| plugins: [ | |
| // Explicitly configure react plugin to use babel with styled-components | |
| react({ | |
| babel: { | |
| plugins: ['babel-plugin-styled-components'], | |
| }, | |
| }), | |
| react(), // Uses babel.config.cjs automatically | |
| plugins: [ | |
| // Explicitly configure react plugin to use babel with styled-components | |
| react({ | |
| babel: { | |
| plugins: ['babel-plugin-styled-components'], | |
| }, | |
| }), | |
| dts({ | |
| // ... | |
| }) | |
| ], |
🧰 Tools
🪛 ESLint
[error] 17-17: Replace 'babel-plugin-styled-components'], with "babel-plugin-styled-components"]
(prettier/prettier)
[error] 18-18: Delete ,
(prettier/prettier)
bb696ad to
45d17d8
Compare
Summary by CodeRabbit