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

Issues with APIs surfaced following the transition from DataGridPro to DataGridPremium

In my current project, we initially implemented the MUI X DataGrid but later switched to DataGridPro due to business requirements. Recently, we upgraded our plan from Pro to Premium which has caused some unexpected issues in our existing code. I am using " ...

Encountering a CORS issue while trying to make requests to the Facebook Graph

I utilized the facebook live comments API to fetch real-time video comments. I was able to accomplish this successfully in my local environment. However, when I deployed the project with a domain name, I encountered a CORS error. Any suggestions on how to ...

Check if a rotated rectangle lies within the circular boundary of the canvas

I have a rectangular shape that has been rotated using the ctx.rotate method, and there is also an arc on the canvas. My goal is to determine if any part of the rectangle lies within the boundaries of the arc. See the example below: https://i.sstatic.net/ ...

Turn off base64 encoding for background URLs in the Minify package

When I use the minify tool to compress my js and css files, I noticed that the files containing background:url(...) statements actually increased in size. This happened because the urls were encoded to base64. I tried to disable this base64 encoding featu ...

Error encountered when attempting to retrieve posts using Axios: Unexpected symbol detected, expected a comma (25:4)

I've been working on implementing an axios getPosts function, but I keep encountering a syntax error that I can't seem to locate in my code. getPosts = async () => { let data = await api.get('/').then(({ data }) => data); ...

Embedding links in v-bind:href

I inserted a dynamic link inside the <header></header> section using the method mentioned here: Vue JS and appending a variable to end of a URL Below are the relevant codes: <tr class="notice-row" v-for="(myCase, id) in case ...

Angular mistakenly uses the incorrect router-outlet

Encountering an issue with Angular routing. The main app has its own routing module, and there is a sub module with its own routing module and router-outlet. However, the routes defined in the submodule are being displayed using the root router outlet inst ...

Instead of constantly updating my stateful component, I prefer to create a new paragraph for each new state

Each time the Create Sales Order Button is clicked, an API call is made and the response is printed as a Stateful Component. Rather than updating the existing component, I want to generate a new paragraph for each response received so that if the user clic ...

What is the best way to swap out an icon based on the chosen option?

Here is my code: $('#mySelect').on('change', function() { var value = $(this).val(); $(".title").html(value); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href=" ...

Issue encountered while attempting to retrieve data from a local json file due to Cross-Origin Resource Sharing

I'm attempting to fetch and display the contents of a JSON file on a webpage, but I'm encountering this error message: Access to XMLHttpRequest at 'file:///C:/Users/bobal/Documents/htmlTry/myData.json' from origin 'null' has ...

Create interfaces for a TypeScript library that is available on npm for export

I have a project in TypeScript that I am packaging as a library to be used by both JavaScript and TypeScript projects. After compiling, I upload the .js and .d.ts files to npm. The main.ts file exports the following: interface MyInterface{ // ... } clas ...

Adjusting the size of the provided image into three variations prior to storing it in the S3 Bucket

I am currently utilizing the Skipper S3 npm module in conjunction with Sails JS to save images into an S3 Bucket. The code I am using to save images into the S3 bucket through Skipper is shown below: req.file('imageName').upload({ saveA ...

No definition found for state

Currently, I am facing an issue while trying to fetch data from an API, set it on my State, and display that state in a table. The problem arises because the render method is called first, causing my state to be undefined which leads to this specific issue ...

What is the best way to choose an item from a dropdown menu using JavaScript?

Is there a way to set the dropdown value from the client side? Currently, I am loading countries and states using a countries.js file on grid row selection for updating. However, because it is loaded from the client side, I am unable to load country and st ...

The dialog box is not taking up the full width of the browser window

I'm facing an issue with a dialog box that only occupies a portion of the browser width, despite having a width set to 100%. The backdrop, however, extends across the entire width. //App.js import React from "react"; import ConfirmationDial ...

When onSubmit is triggered, FormData is accessible. But when trying to pass it to the server action, it sometimes ends up as null

I am currently utilizing NextJS version 14 along with Supabase. Within my codebase, I have a reusable component that I frequently utilize: import { useState } from 'react'; interface MyInputProps { label: string; name: string; value: stri ...

Babel is failing to transpile the Modal component from material-ui-next to ES5

Issue with Babel transpiling Modal component from material-ui-next Here is my .babelrc configuration: { "presets": ["es2015", "react", "stage-1", "stage-2", "stage-3"] } This is the webpack-config.js setup: var webpack = require('webpack'); ...

Mastering the art of constantly monitoring data changes in a Firebase real-time database using Vue.js

I am currently utilizing vue.js version 2 in CDN mode. I have designed 2 vue components - one that pushes data to a database and another that displays it. Here is the code snippet: firebase.database().ref().on('value', function (data) { c ...

Is it possible to create an <h1> heading that can be clicked like a button and actually do something when clicked?

I am currently designing a web page that includes <div class="cane-wrap"> <h1 class="mc">christmas tic tac toe</h1> </div> located at the top center of the webpage, with autoplay running in the backgroun ...

Utilize the href attribute on an image, whether it be through a class

I work as a designer and I'm looking to extract the same href link from class="kt-testimonial-title", either in id="slick-slide10", or in class="kt-testimonial-item-wrap kt-testimonial-item-0", or in class="kt-testimonial-image". Can this be achieved ...