Error encountered while creating SvelteKit: The module 'intl-messageformat' that was requested is in CommonJS format

Encountering an error during production build. Here's the output of npm run build executed on Node v16.20.1

npm run build

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7a6c6a317a757278796e5c2c322c322d">[email protected]</a> build
> vite build
vite v4.4.9 building SSR bundle for production...
✓ 123 modules transformed.

node:internal/event_target:1011
  process.nextTick(() => { throw err; });
                           ^
file:///Users/luca/Projects/personal/fpv-finder/.svelte-kit/output/server/chunks/runtime.esm.js:3
import { IntlMessageFormat } from "intl-messageformat";
         ^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'IntlMessageFormat' not found. The requested module 'intl-messageformat' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'intl-messageformat';
const { IntlMessageFormat } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async analyse (file:///Users/luca/Projects/personal/fpv-finder/node_modules/@sveltejs/kit/src/core/postbuild/analyse.js:60:16)
    at async MessagePort.<anonymous> (file:///Users/luca/Projects/personal/fpv-finder/node_modules/@sveltejs/kit/src/utils/fork.js:22:16)
Emitted 'error' event on Worker instance at:
    at Worker.[kOnErrorMessage] (node:internal/worker:298:10)
    at Worker.[kOnMessage] (node:internal/worker:309:37)
    at MessagePort.<anonymous> (node:internal/worker:205:57)
    at MessagePort.[nodejs.internal.kHybridDispatch] (node:internal/event_target:736:20)
    at MessagePort.exports.emitMessage (node:internal/per_context/messageport:23:28)

The issue stems from this generated code.

import { d as derived, w as writable } from "./index.js";
import deepmerge from "deepmerge";
import { IntlMessageFormat } from "intl-messageformat"; // <- This is the issue
function delve(obj, fullKey) {
  if (fullKey == null)
    return void 0;
  if (fullKey in obj) {
    return obj[fullKey];
  }
// [...]  Other code here

Is there a way to resolve this error?

Here's the package.json file content:

{
    "name": "fpv-finder",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        ...
    },
    "devDependencies": {
        ...
    },
    "type": "module",
    "dependencies": {
        "svelte-i18n": "^3.7.4"
    }
}

Steps followed include executing npm run build with the expectation of successful project compilation.

Answer №1

If you are encountering an issue with module resolution in svelte-i18n when using certain Kit adapters, a potential solution is to update to a more recent release of intl-messageformat.

Alternatively, you can opt to downgrade your version of svelte-i18n.

Answer №2

After some troubleshooting, I managed to figure out a solution for this issue. The first thing I did was check the version of intl-messageformat by running

npm ls intl-messageformat
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e3f5f3a8e3ecebe1e0f7c5b5abb5abb4">[email protected]</a> /Users/luca/Projects/personal/fpv-finder
└─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25565340495140084c141d4b65160b">[email protected]</a>
  └── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3aaadb7afeeaea6b0b0a2a4a6a5acb1aeda83faedf2f0edaecdfcfefe">[email protected]</a>

Upon discovering that the version of intl-messageformat was not up-to-date, I added the necessary dependency in the package.json file.

Next, I executed npm install followed by npm run build, which successfully resolved the problem.

In essence, my approach aligned with the recommendations provided in the comments section.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My AJAX request seems to be redirecting to my PHP file instead of simply returning the response text. What could be causing this issue?

I am currently working on a project for my Web Engineering course and I am incorporating jQuery to execute an AJAX request to my PHP file using the POST method. The task specifies that "each time the [submit] button is pressed, the form data should be disp ...

Authenticate yourself as a user or an organization on mongodb

I am currently developing an application that requires user registration and login, as well as organization registration and login. I have implemented the use of Node.js Passport with a local strategy for authentication. While I have successfully created t ...

Updating the model does not reflect changes made to AGM polygons' binding

<div *ngFor="let p of polys"> <agm-polygon #cmp [paths]="$any(p.getPath()).i" [fillColor]="'blue'" [draggable]="true" [editable]="true" [polyDraggable]="true" (p ...

Creating a jquery DataTable from HTML generated by angular $sce can be done by following these steps

I have created an Angular controller that takes data and generates an HTML table from it. The generated table is being displayed on the page. Now, I want to apply jQuery data tables using that scope variable. The variable contains the HTML code of the tabl ...

The AngularJS function invoked itself within the structure

When working with my form, I encountered a problem involving custom input directives and text fields. In addition to these elements, there are buttons: one for adding a new input to the form which is linked to the function $scope.AddNewItem() in the contro ...

Incorporating JavaScript and CSS files into a content page of a master page in ASP.NET: Steps to follow

I am facing an issue with adding javascript files and css to a content page of a master page in asp.net. I attempted to include a datetime picker on my ContentPage, but it only works on the masterpage. When I try to add the same code to my contentpage, i ...

Mobile page sliding mechanism

My website contains a div that is mostly off the page, but on hover it translates onto the main page. You can check out my website. However, this method doesn't work well on mobile devices. Hovering is not effective and I often have to click multipl ...

Having issues with running npm install from the repository without it executing the `prepare` script

Having an npm package for common components stored on an internal git server, I encountered an issue when running npm install in another project to use it as the prepare hook was not executed. This caused a problem because the npm package requires a /dist ...

Customizing Drop Down Button in React Material-UI with Conditions

Trying to figure out how to dynamically populate the second MUI dropdown based on the selection from the first dropdown. Currently, I have both dropdown lists hardcoded. const [queryType, setqueryType] = React.useState(''); const [subCategory, se ...

The replace method for strings in JavaScript does not function properly on mobile devices

I encountered an issue with the string replace method I implemented on my website. Upon checking the page using the web browser on my Android phone, I noticed that it was not functioning as intended. Here's a snippet of the code: /*The function is ...

When decoding a JWT, it may return the value of "[object Object]"

Having some trouble decoding a JSON web token that's being sent to my REST API server. I can't seem to access the _id property within the web token. Below is the code I'm currently using: jwt.verify(token, process.env.TOKEN_SECRET, { comp ...

GlobalThis in Cordova throws an undefined error following the update to version 10.0.0

Hello, I recently developed a Cordova app using version 8.1.0, but encountered an issue when trying to upload it to the Play Store. The error stated that my app targets API LEVEL 28, and I needed to target API level 29 at least. In response, I updated Co ...

Slider with Dual Images: A Visual Comparison

I'm currently working on a webpage that features before and after images using a slider based on mouse movement to display both pictures. I am trying to incorporate multiple sliders on the same page but have been facing difficulties in getting them to ...

Is it possible for a single PHP query to manage multiple AJAX requests from various pages simultaneously?

My PHP page is called update_details.php?id=xyz. This page has a query that gets user details and updates their login time. Each user has a unique profile page named profile.php?id=xyz. So, the profile pages are different for each user such as profile.php ...

What is the best way to activate a function within an npm package in a Vue application?

I'm just starting out with Vuejs and I've recently installed the vue-countup-v2 npm package. I successfully imported it into my Vue component and noticed that it works perfectly when the page loads. However, I am interested in triggering the Coun ...

How can we integrate Cordova plugins into Vue-Cordova framework?

Looking to integrate Vue-Cordova with Cordova-plugin-file-opener2 to open PDF files within iOS/Android applications. In the Vue-Cordova setup, plugins related to the device are defined on the data property of the App vue instance: data: function () { ...

What is the distinction between declaring a variable as var $a=$() versus var a?

In some cases, in JQuery we assign a variable like var $a=$(), resembling the declaration of a function. I am curious to know if there is any difference if we simply define the variable as var a? ...

Having trouble retrieving req.session variables in Express/NodeJS?

I have come across various versions of this particular question, however, none of them seem to address my issue directly. My current objective is to establish a Node.js server using Express. Below is my existing server configuration: var express = require ...

Submitting form data including file uploads using AJAX

Currently, the file is being sent via AJAX using the following code: var fd = new FormData(); //additional actions to include files var xhr = new XMLHttpRequest(); xhr.open('POST', '/Upload/' + ID); xhr.send(fd); In ...

Issue with React-Native FlatList's scrolling functionality

Struggling with implementing a scrolling FlatList in React Native. Despite trying various solutions found on Stack Overflow, such as adjusting flex properties and wrapping elements in views, the list still refuses to scroll. Snippet of code (issue is with ...