fix(build): Address @carbon/react resolution errors and update webpack config

Author: Subham-KRLX

gatsby-config.js

@@ -73,16 +73,5 @@ module.exports = {
         directory: path.resolve(__dirname, './src/data/chart-index'),
       },
     },
-    // Fix for Sass legacy JS API deprecation warnings:
-    {
-      resolve: 'gatsby-plugin-sass',
-      options: {
-        implementation: require('sass'), // Use Dart Sass explicitly
-        sassOptions: {
-          // No need for 'api' here as Dart Sass is default now, but you can silence warnings:
-          quietDeps: true,
-        },
-      },
-    },
   ],
-};
+};

gatsby-node.js

@@ -1,7 +1,6 @@
 const path = require('path');
 
 exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
-  // Allows importing html files for component code examples
   actions.setWebpackConfig({
     module: {
       rules: [
@@ -19,15 +18,25 @@ exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
       ],
     },
     resolve: {
+      // Ensure node_modules are in the path for resolution
       modules: [path.resolve(__dirname, 'src'), 'node_modules'],
       alias: {
-        // light-weight fork of buble compiler from react-live team
         buble: path.resolve(__dirname, 'node_modules', '@philpl/buble'),
+        // Explicitly resolve @carbon packages to their node_modules path
+        '@carbon/react': path.resolve(__dirname, 'node_modules/@carbon/react'),
+        '@carbon/icons-react': path.resolve(__dirname, 'node_modules/@carbon/icons-react'),
+        '@carbon/styles': path.resolve(__dirname, 'node_modules/@carbon/styles'), // Keep for Sass if needed
       },
+      // Fallback for older module resolution patterns
+      fallback: {
+        'crypto': false, // Example of adding fallbacks if needed for older modules
+        'stream': false,
+        'path': require.resolve('path-browserify'), // Ensure path resolves correctly
+        // You might need more if other 'cannot resolve' errors appear for node built-ins
+      }
     },
   });
 
-  // Disable sourcemaps in production
   if (getConfig().mode === 'production') {
     actions.setWebpackConfig({
       devtool: false,
@@ -38,7 +47,6 @@ exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
 exports.createPages = ({ actions }) => {
   const { createRedirect } = actions;
 
-  // Community index
   createRedirect({
     fromPath: '/community/components',
     toPath: '/community/component-index',
@@ -50,7 +58,6 @@ exports.createPages = ({ actions }) => {
     isPermanent: true,
   });
 
-  // Developing
   createRedirect({
     fromPath: '/resources',
     toPath: '/developing/developer-resources',
@@ -97,7 +104,6 @@ exports.createPages = ({ actions }) => {
     isPermanent: true,
   });
 
-  // Case studies
   createRedirect({
     fromPath: ' /case-studies/overview',
     toPath: '/all-about-carbon/who-uses-carbon/',
@@ -114,7 +120,6 @@ exports.createPages = ({ actions }) => {
     isPermanent: true,
   });
 
-  // Data-visualization
   createRedirect({
     fromPath: '/data-visualization/basic-charts',
     toPath: '/data-visualization/simple-charts',
@@ -126,7 +131,6 @@ exports.createPages = ({ actions }) => {
     isPermanent: true,
   });
 
-  // Elements L0 - 2022/02
   createRedirect({
     fromPath: '/guidelines/2x-grid/overview',
     toPath: '/elements/2x-grid/overview',
@@ -247,4 +251,4 @@ exports.createPages = ({ actions }) => {
     toPath: '/elements/typography/code',
     isPermanent: true,
   });
-};
+};

package.json

@@ -51,6 +51,7 @@
     "gatsby-plugin-sharp": "^5.13.1",
     "gatsby-theme-carbon": "^4.3.6",
     "markdown-it": "^14.1.0",
+    "path-browserify": "^1.0.1",
     "prettier-config-carbon": "^0.11.0",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",

src/gatsby-theme-carbon/components/ArticleCard/index.js

@@ -1,3 +1,3 @@
 import ArticleCard from './ArticleCard';
 
-export default ArticleCard;
+export default ArticleCard;

yarn.lock

@@ -8764,6 +8764,7 @@ __metadata:
     markdown-it: "npm:^14.1.0"
     markdown-loader: "npm:^8.0.0"
     netlify-cli: "npm:^18.1.0"
+    path-browserify: "npm:^1.0.1"
     prettier: "npm:^2.0.2"
     prettier-config-carbon: "npm:^0.11.0"
     react: "npm:^18.2.0"
@@ -22054,6 +22055,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-browserify@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "path-browserify@npm:1.0.1"
+  checksum: 10c0/8b8c3fd5c66bd340272180590ae4ff139769e9ab79522e2eb82e3d571a89b8117c04147f65ad066dccfb42fcad902e5b7d794b3d35e0fd840491a8ddbedf8c66
+  languageName: node
+  linkType: hard
+
 "path-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "path-case@npm:3.0.4"