While building a React application using react-scripts
, you might encounter a warning like this during the npm run build
process:
Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
More info: https://sass-lang.com/d/legacy-js-api
This is not an error that stops your build, but it warns you that some part of your toolchain is using an outdated Sass API that will be removed in the future.
Let’s go over what this warning means, why it happens, and how to solve it step by step.
âś… What Is the Legacy JS API Warning?
Dart Sass (the primary implementation of Sass going forward) is phasing out its legacy JavaScript API. This means older packages or tools using this outdated API will eventually stop working with newer versions of Dart Sass.
🔍 What Causes This Warning?
You are likely using one or more of the following:
- A package that depends on the outdated
node-sass
(which is now deprecated). - An older Sass plugin or loader (e.g.,
sass-loader
in webpack). - A dependency that hasn’t been updated to use the newer Dart Sass API.
đź§© Solution: Update to Dart Sass and Clean Up Your Dependencies
Here’s how to resolve the warning:
1. Uninstall node-sass
(if present)
npm uninstall node-sass
2. Install the latest version of sass
(Dart Sass)
npm install sass@latest
This switches your project to the officially supported Dart Sass implementation.
3. Clean npm cache and reinstall dependencies (optional but helpful)
rm -rf node_modules package-lock.json
npm cache clean --force
npm install
4. Rebuild the project
npm run build
If all goes well, the warning should disappear or be silenced as dependencies now use the correct API.
🔄 Additional Tip: Check for Deprecated Dependencies
Use this command to check outdated packages:
npm outdated
Also, use this to update all packages:
npm update
âś… Final Thoughts
While the warning doesn’t break your build for now, ignoring it will eventually lead to errors once Dart Sass 2.0 is released. It’s good practice to keep your dependencies up-to-date to maintain compatibility and reduce tech debt.