React' refers to a UMD global, but the current file is a module

React’ refers to a UMD global, but the current file is a module

If you’ve encountered the error message “React’ refers to a UMD global, but the current file is a module” while working with React, don’t worry, you’re not alone. This error occurs when you’re trying to import React as a module, but it is being treated as a global variable instead. In this blog post, we’ll explore two solutions to fix this issue.

Solution 1: Using a bundler like Webpack or Parcel

If you’re using a bundler like Webpack or Parcel, you can configure it to handle React as a module. This way, you won’t encounter the “React’ refers to a UMD global” error. Here’s how you can do it:

// Install React and React DOM
npm install react react-dom

// Configure your bundler (e.g., Webpack)
module.exports = {
  // ...
  resolve: {
    alias: {
      'react': require.resolve('react'),
      'react-dom': require.resolve('react-dom')
    }
  }
  // ...
}

By configuring your bundler to resolve the React and React DOM modules, you can import them without any issues.

Solution 2: Using a CDN

If you’re not using a bundler or prefer to use a CDN, you can include React and React DOM directly in your HTML file. Here’s an example:

By including React and React DOM scripts from a CDN, you can use them as global variables in your JavaScript file without any issues.

Conclusion

The “React’ refers to a UMD global, but the current file is a module” error can be fixed by either configuring your bundler to handle React as a module or by including React and React DOM directly from a CDN. Choose the solution that best fits your project’s needs and get back to building awesome React applications!

React’ refers to a UMD global, but the current file is a module