• 23-Jan-2023
Lightrun Team
Author Lightrun Team
Share
This article is about fixing Can't import the named export 'XXX' from non EcmaScript module (only default export is available) in Facebook Create React App

Can’t import the named export ‘XXX’ from non EcmaScript module (only default export is available) in Facebook Create React App

Lightrun Team
Lightrun Team
23-Jan-2023

Explanation of the problem

Problem When using a package with a module that has the ‘.mjs’ file extension, Create React App (CRA) fails to load the module. This issue seems to be specific to CRA, as ‘.mjs’ is one of the default extensions for ES6 modules in webpack. Changing the extension of the module allows the dependencies to work, but this may cause issues with other tools in the future that have different requirements for file extensions.

Steps to Reproduce

  1. Create a new CRA project
  2. Install a package that has a dependency with a ‘.mjs’ file extension, such as xspattern or fontoxpath.
  3. Import the package in your project.
  4. Run npm start

Expected Behavior The project should run without any errors, and the package should be imported successfully.

Actual Behavior The project crashes with the error “Can’t import the named export ‘compileVM’ from non EcmaScript module (only default export is available)”.

Reproducible Demo A reproducible demo of the issue can be found at https://github.com/DrRataplan/cra-mjs-repro

Environment:

  • create-react-app version: 4.0.1
  • OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
  • CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  • Node: 14.8.0
  • npm: 6.14.11
  • React: 17.0.1
  • React-dom: 17.0.1
  • React-scripts: 4.0.1

Additional Information The maintainer of the package is aware of the issue and has tried searching the user guide for solutions, but was unable to find any. The issue has been reported in other related issues such as https://github.com/reactioncommerce/reaction-component-library/issues/399 and https://github.com/formatjs/formatjs/issues/1395, but the solution proposed in these issues is to use ‘create-react-app-rewired’ to fix the problem. The maintainer wants to provide a solution that does not involve workarounds for users who want to use the library in CRA.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Can’t import the named export ‘XXX’ from non EcmaScript module (only default export is available) in Facebook Create React App

This error message is indicating that you are trying to import a named export (‘XXX’) from a module that does not have any named exports, only a default export. To fix this issue, you should change your import statement to import the default export instead, or check that the module you are importing from has the named export you are trying to use.

Here is an example of how you would import the default export:

import myModule from './myModule';

And an example of how you would import a named export:

import { myNamedExport } from './myModule';

It’s also possible that the module you’re trying to import has not been properly set up to have named exports, in which case you will have to update that module.

Other popular problems with Create React App

Problem: Missing dependency

One of the most common problems with using Create React App is missing dependencies. This can happen when a user tries to use a package or library that is not listed as a dependency in the project’s package.json file. For example, if a user tries to use the “lodash” library but it is not listed as a dependency, the following error will be thrown: “Uncaught Error: Cannot find module ‘lodash'”.

Solution:

To fix this issue, the user needs to add the missing dependency to the project’s package.json file. This can be done by running the following command in the command line:

npm install lodash --save

Problem: Routing issues

Another common problem with Create React App is routing issues. This can happen when a user tries to set up routing in their application using the React Router library. For example, if a user tries to use the “Switch” component from the React Router library but it is not properly configured, the following error will be thrown: “Uncaught TypeError: Cannot read property ‘path’ of undefined”.

Solution:

To fix this issue, the user needs to properly configure the React Router library in their application. This can be done by setting up the “Router” component and properly nested “Route” components. Here is an example of how to set up routing in a Create React App:

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

Problem: CORS issue

Cross-origin resource sharing (CORS) is a security feature implemented by web browsers that blocks web pages from making requests to a different domain than the one that served the web page. This can be a problem with Create React App when making API calls to a server. For example, if a user tries to make an API call to a server that does not have CORS enabled, the following error will be thrown: “Failed to load resource: the server responded with a status of 403 (Forbidden)”.

Solution:

To fix this issue, the user needs to configure the server to allow CORS. This can be done by adding the following headers to the server’s response:

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, PUT, DELETE

Alternatively, user can also use a CORS proxy like https://cors-anywhere.herokuapp.com to make the request.

fetch('https://cors-anywhere.herokuapp.com/https://example.com/my-api')

It’s important to note that the first solution, by adding the headers, is not recommended for production, as it allows any origin to access the resources, and it’s better to limit the access to certain origin(s) only.

A brief introduction to Create React App

Facebook Create React App (CRA) is a popular command line interface tool that allows developers to easily set up and configure a new React project. CRA abstracts away many of the complexities of setting up a new React project, including configuring webpack, babel, and other dependencies. It also provides a set of default scripts and configuration that can be used to quickly develop, test, and deploy a React application. CRA is especially useful for developers who are new to React, as it makes it easy to get started with a new project without having to spend a lot of time configuring the development environment.

One of the main advantages of using Create React App is that it provides a consistent development environment across different projects. It also makes it easy to test the code in different environments and to deploy the application to different platforms. CRA also provides a development server that automatically reloads the application when changes are made to the code. This makes development faster and more efficient, as developers can see the changes they make immediately. Additionally, Create React App is easy to use and understand, and it is well-documented, making it easy for developers to learn and understand how it works.

Most popular use cases for Create React App

  1. Building web applications: One of the main uses of Facebook Create React App is to build web applications using React. It provides a set of scripts and configuration that are optimized for building web applications with React, making it easy to get started with a new project and to develop, test, and deploy the application. Additionally, Create React App supports hot-reloading, which means that the application will automatically reload when changes are made to the code, making development faster and more efficient.
  2. Building Progressive Web App (PWA): Facebook Create React App can also be used to build Progressive Web App (PWA). A Progressive Web App is a web application that can be installed on the user’s device, and it can work offline. PWA is built using web technologies like HTML, CSS, and JavaScript. CRA provides a set of default scripts and configuration that can be used to quickly develop, test and deploy PWA.
  3. Building Server-side rendered (SSR) Application: Create React App can also be used to build Server-side rendered (SSR) applications. SSR is a technique in which the application is rendered on the server and then sent to the browser, rather than being rendered on the client. This technique can improve the performance of the application and also can improve the SEO of the application. Here is an example of how to set up a server-side rendered application using Create React App:
// server.js
const express = require('express');
const path = require('path');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./src/App').default;

const app = express();

app.use(express.static(path.resolve(__dirname, 'build')));

app.get('*', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>My App</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="bundle.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});
Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications. It’s a registration form away.

Get Lightrun

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.