This article is about fixing error in build: Named export. The requested module is a CommonJS module in antfu Vite SSG
  • 29-Jan-2023
Lightrun Team
Author Lightrun Team
Share
This article is about fixing error in build: Named export. The requested module is a CommonJS module in antfu Vite SSG

Error in build: Named export. The requested module is a CommonJS module in antfu Vite SSG

Lightrun Team
Lightrun Team
29-Jan-2023

Explanation of the problem

The issue at hand is that the build process is failing when using the @googlemaps/js-api-loader package in a Vite-SSG project. The code works as expected in development mode, but when building, the following error message is thrown:

[vite-ssg] An internal error occurred. [vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues file:///usr/local/playground/@codermar/monorepo/marynela.com/.vite-ssg-temp/main.mjs:30 import { Loader } from “@googlemaps/js-api-loader”;

SyntaxError: Named export ‘Loader’ not found. The requested module ‘@googlemaps/js-api-loader’ is a CommonJS module, which may not support all module.exports as named exports

The root cause of the issue is that the @googlemaps/js-api-loader package is a CommonJS module, which is not fully supported by the Vite-SSG build process. In particular, the build process is unable to properly handle the named exports from the package, which results in the aforementioned error message.

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 Error in build: Named export. The requested module is a CommonJS module in antfu Vite SSG

The problem at hand is that the build is failing when using the @googlemaps/js-api-loader package. The code works in development mode but not in production. The error message that is displayed is “SyntaxError: Named export ‘Loader’ not found.”. This error is caused by the fact that the requested module, @googlemaps/js-api-loader, is a CommonJS module, which may not support all the module.exports as named exports.

The solution to this issue is to use a bundler such as webpack or rollup that can handle both CommonJS and ES modules, to convert the CommonJS modules to ESM. This can be done by using a plugin such as commonjs-esm-bundler.

Here is an example of how to use the commonjs-esm-bundler plugin in a webpack config file:

const commonjs = require('commonjs-esm-bundler');

module.exports = {
    //...
    module: {
        rules: [
            {
                test: /\.mjs$/,
                use: [
                    {
                        loader: commonjs.bundle
                    }
                ]
            }
        ]
    }
};

Additionally, You can install the es-module-shims package to use the Loader package as an ES6 module, in this case, you can change your imports to

import Loader from '@googlemaps/js-api-loader/dist/es-module/Loader.mjs';

It is also worth noting that it is a best practice to check the documentation of the package you are trying to use to see if it provides an ESM or a CJS module, and if it does not, to check if there is a recommended way to use the package in an ESM environment.

Other popular problems with antfu Vite SSG

 

Problem: Error in Build: Named export ‘Loader’ not found

When using the package @googlemaps/js-api-loader in an antfu Vite SSG project, the build may fail with the error “Named export ‘Loader’ not found”. This issue occurs because the requested module ‘@googlemaps/js-api-loader’ is a CommonJS module, which may not support all module.exports as named exports.

Solution:

To solve this issue, one solution is to convert the CommonJS module to an ES module by adding the following line at the top of the file where the package is imported:

import '@googlemaps/js-api-loader/dist/esm/index.js'

Another solution is to use a tool like es-module-shims to allow the CommonJS module to be used as an ES module.

Problem: Error in Build: SyntaxError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’

When using the antfu Vite SSG template, the build may fail with the error “SyntaxError: ‘import’ and ‘export’ may appear only with ‘sourceType: module'”. This issue occurs because the project is not configured to use ES modules, and the template is trying to use the import and export syntax.

Solution:

To solve this issue, one solution is to update the project’s configuration to use ES modules. This can be done by adding the following to the project’s .babelrc file:

{
  "presets": [
    ["@babel/preset-env", { "modules": false }]
  ]
}

Another solution is to change the import and export statement to commonjs style statement.

Problem: Error in internal: An internal error occurred.

When using the antfu Vite SSG, an internal error may occur. This issue can be caused by a variety of reasons, such as a bug in the Vite SSG package or a problem with the project’s configuration.

Solution:

To solve this issue, one solution is to check the Vite SSG GitHub repository for any known issues and solutions. Another solution is to check the project’s configuration and ensure that it is set up correctly. If the problem persists, it is recommended to report the issue on the Vite SSG GitHub repository for further assistance.

A brief introduction to antfu Vite SSG

antfu Vite SSG is a static site generator built on top of the Vite development server. It allows for the creation of fast, statically generated sites with the convenience of a development server. The Vite SSG uses the Vite development server to provide a development experience with hot-module replacement, which allows for instant updates in the browser without the need for a full page reload. Additionally, it uses the Vite plugin system to enable features such as static site generation and server-side rendering.

One of the key features of antfu Vite SSG is its support for Vue.js. It allows developers to use Vue’s component-based structure and reactivity system to build performant, dynamic websites. The Vite SSG also supports JSX and TypeScript, making it possible to use a variety of modern front-end development tools and languages. Additionally, it is built on top of the Vite development server, which provides a fast and efficient development experience, with features such as hot-module replacement and a lightweight dev server.

Most popular use cases for antfu Vite SSG

  1. Building high performance and lightweight static websites: antfu Vite SSG is a framework that allows developers to build and deploy static websites with lightning fast performance. It uses a native ES modules based development setup, which allows for faster development and build times compared to traditional bundlers.
  2. Serverless deployment: antfu Vite SSG is designed to work seamlessly with serverless platforms, such as Vercel, AWS Lambda, and Firebase, allowing for easy and cost-effective deployment of static websites.
  3. Dynamic content generation: antfu Vite SSG’s support for dynamic imports and dynamic routes enables the generation of dynamic content, such as pages and posts, at build time. This can be achieved by using a code block like this:
import { createSSG } from 'vite-ssg'

const routes = [
  '/about',
  '/blog/:slug'
]

export const generate = createSSG(routes, async ({ route, setData }) => {
  if (route.path === '/about') {
    setData({ title: 'About me' })
  } else if (route.path.startsWith('/blog/')) {
    const post = await getPostBySlug(route.params.slug)
    setData({ title: post.title })
  }
})

This code block shows how to create dynamic routes for the website and setData for the routes. This allows for dynamic content to be generated at build time, which can be useful for building blogs and other dynamic pages.

Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications.

Try Lightrun’s Playground

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 clicking Submit I agree to Lightrun’s Terms of Use.
Processing will be done in accordance to Lightrun’s Privacy Policy.