[FIXED] Crbug/1173575, non-js module files deprecated Error

As web technologies evolve, certain features and practices become deprecated or discouraged to maintain compatibility and security.

One such error is the “Crbug/1173575: Non-JS Module Files Deprecated” error, which indicates that the use of non-JavaScript module files has been deprecated.

It presents something like this:

It also may present like this in other cases:

In this article, we will explore several solutions to help you address this error and ensure your web application remains up-to-date and compatible with modern standards.

Solution 1: Ensure your Chrome Network settings are not set to Offline

I encountered a similar issue and found that none of the provided solutions resolved my problem.

However, I discovered a relatively simple fix that worked for me.

By following the steps below, you can ensure that the connection in the Chrome Developer Console’s Network tab is set to “No throttling” instead of “Offline”:

1. Open your web application in Google Chrome.
2. Launch the Chrome Developer Console by right-clicking anywhere on the page and selecting “Inspect” or by pressing Ctrl+Shift+I (or Cmd+Option+I on macOS).
3. In the Developer Console, navigate to the “Network” tab. This tab displays network requests made by your web application.
4. Locate the network throttling options in the Network tab. This section allows you to simulate various network conditions like slow 3G, fast 3G, or offline mode.
5. Ensure that the network throttling is set to “No throttling” to ensure an active connection. If it is set to “Offline,” click on the dropdown menu and select “No throttling” from the available options.
6. After selecting “No throttling,” reload your web application to apply the changes.

This is how it looks:

Remember that these steps are specific to Google Chrome and the Chrome Developer Console. If you are using a different browser or development environment, the steps may vary slightly.

Solution 2: Ensure your launch.json settings are correct

Encountering a misleading error message during debugging can be frustrating, especially when it seems unrelated to the actual issue.

Let’s address a specific error message that occurs when establishing connectivity during debugging in Visual Studio Code (VS Code).

Although the error is often misinterpreted as a deprecated functionality problem, it can have various root causes related to connectivity. We will examine a scenario encountered while following a React tutorial in VS Code and provide a solution to resolve the error.

Identifying the Root Cause and Fixing the Connectivity Error:

The error message you encountered seemingly unrelated to Chrome or deprecated functionality can be caused by multiple factors.

Let’s explore the scenario in the React tutorial and provide a step-by-step solution:

1. Create a React template using npx and run it with npm start:
   In the React tutorial, you start by creating a template using npx and then running it with npm start. The tutorial suggests that the application should be accessible via http://localhost:3000.
2. Modifying the code and configuring breakpoints for debugging:
   When you made changes to the code as instructed in the tutorial and set a breakpoint to debug, you encountered the error message mentioned earlier. This error occurred in both Chrome and Edge browsers. Visual Studio Code generated a default launch.json file for debugging and populated it with default values.
3. Manually update the launch.json file:
   To resolve the error, you need to manually update the launch.json file in Visual Studio Code. Open the launch.json file and locate the configuration related to the URL.

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome against localhost",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}"
}

4. Change the URL port to match the correct port:
   In your case, the React application is running on port 3000, not 8080 as specified in the default configuration. Modify the “url” value to match the correct port:

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome against localhost",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

5. Configure breakpoints to catch exceptions:
   To ensure you can catch exceptions during debugging, make sure to configure the breakpoints properly. In Visual Studio Code, select the Debug icon in the far-left icon menu. With the Debug icon selected, you can configure the breakpoints to catch exceptions as described by the original poster (OP).
6. Verify the error and the connectivity:
   Upon running the application in debug mode again, you might still encounter the misleading “deprecated” error message. However, if you dig a little deeper, you will find a “the site can’t be reached” message that indicates a connectivity problem. This message provides better insight into the actual issue.

Solution 3: Convert non-JS module files to JavaScript modules:

To resolve the “Crbug/1173575: Non-JS Module Files Deprecated” error, the recommended approach is to convert any non-JavaScript module files to JavaScript modules.

This involves rewriting the code in the non-JS module files using JavaScript and following the module syntax.

For example, if you have an HTML file containing a non-JavaScript module script tag like this:

<script type="module" src="main.css"></script>

Convert it to a JavaScript module by modifying the script tag as follows:

<script type="module" src="main.js"></script>

Then, create a separate JavaScript file (e.g., main.js) and rewrite the code from the original non-JS module file using JavaScript module syntax.

Solution 4: Consolidate code into a single JavaScript module file:

If your web application includes multiple non-JavaScript module files, you can consider consolidating them into a single JavaScript module file.

This approach helps centralize the code and eliminates the need for multiple module script tags in your HTML.

To implement this solution, create a new JavaScript file (e.g., app.js) and import the code from the original non-JS module files into it.

Then, update the script tag in your HTML to reference the new JavaScript module file:

<script type="module" src="app.js"></script>

Ensure that you maintain the proper module syntax in the consolidated JavaScript module file.

Solution 5: Migrate to a modern JavaScript module bundler:

If your project consists of numerous non-JavaScript module files or requires complex module management, migrating to a modern JavaScript module bundler can streamline your workflow and address the deprecation issue.

Tools like Webpack, Rollup, or Parcel offer advanced module bundling capabilities and can bundle your JavaScript modules into a single file while resolving dependencies.

To migrate your project to a module bundler, follow the respective tool’s documentation and configure it according to your project’s requirements.

This approach provides more flexibility and simplifies the management of modules in your web application.

Solution 6: Check for external dependencies and updates:

In some cases, the “Crbug/1173575: Non-JS Module Files Deprecated” error may be caused by external dependencies that haven’t been updated to comply with modern module standards.

Ensure that all external libraries or frameworks used in your project are up to date.

Check their documentation or official websites for any updates or migration guides related to module support.

If an external dependency is causing the error and an update is not available, consider searching for alternative libraries or solutions that are compatible with JavaScript modules.

Winding up:

The “Crbug/1173575: Non-JS Module Files Deprecated” error signals the deprecation of non-JavaScript module files in web applications.

By adopting JavaScript modules, consolidating code, migrating to module bundlers, and ensuring external dependencies are up to date, you can overcome this error and ensure your web application follows modern best practices.

Keeping your codebase up to date helps maintain compatibility, enhances security, and ensures a smooth user experience.