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

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

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

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.

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