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

Explanation of the problem

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

import myModule from './myModule';

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

import { myNamedExport } from './myModule';

Other popular problems with Create React App

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')

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

// 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');
});