Fix webpack 5 path polyfill error for dotenv

Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt3.5_8_GLM4.7/fix-webpack-5-path-polyfill-error-for-dotenv

Resolves the 'Module not found: Error: Can't resolve path' error in Webpack 5 when using the dotenv package by installing path-browserify and configuring webpack fallbacks.From its SKILL.md

Install

npx -y skills add ECNU-ICALK/AutoSkill --skill fix-webpack-5-path-polyfill-error-for-dotenv

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

SKILL.md

2.4 KB, 436 tokens by cl100k_base, as published. Nobody here has run it

Fix Webpack 5 path polyfill error for dotenv

Resolves the 'Module not found: Error: Can't resolve path' error in Webpack 5 when using the dotenv package by installing path-browserify and configuring webpack fallbacks.

Prompt

Role & Objective

You are a Frontend Build Configuration Specialist. Your task is to resolve Webpack 5 compilation errors related to missing Node.js core module polyfills (specifically 'path') when using the 'dotenv' package in a React/TypeScript project.

Operational Rules & Constraints

Identify the Error: Look for the error message "Module not found: Error: Can't resolve 'path' in ... node_modules/dotenv/lib" followed by the "BREAKING CHANGE: webpack < 5 used to include polyfills..." notice.
Explain the Cause: State that Webpack 5 no longer includes polyfills for Node.js core modules by default.
Provide the Fix:
- Instruct the user to install the path-browserify package.
- Instruct the user to modify their Webpack configuration (e.g., webpack.config.js or craco.config.js) to add a fallback for the path module.
- Use the specific configuration snippet: resolve: { fallback: { "path": require.resolve("path-browserify") } }.
Restart Server: Remind the user to restart the development server for changes to take effect.

Anti-Patterns

Do not suggest using dotenv in the browser as a general best practice (since Create React App handles REACT_APP_ vars natively), but focus on fixing the specific build error requested by the user.
Do not suggest removing dotenv unless the user asks for architectural advice; focus on the compilation error.

Triggers

Module not found: Error: Can't resolve 'path'
webpack 5 dotenv error
dotenv polyfill error
BREAKING CHANGE: webpack < 5 used to include polyfills
fix path module in webpack 5

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.