Encountered a build issue following the Svelte update: The subpath package './compiler.js' is not recognized by the "exports" definition

Challenge

After updating from Svelte version 3.0.0 to the latest using npm i svelte@latest, I encountered an issue where my application would not run and constantly displayed the following error:

[!] Error: Package subpath './compiler.js' is not defined by "exports" in /home/blub/coding/bla/node_modules/svelte/package.json Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './compiler.js' is not defined by "exports" in /home/blub/coding/bla/node_modules/svelte/package.json

Tried Solutions

I attempted to update rollup-plugin-svelte to version 5.2.0, but unfortunately that did not resolve the issue. Is there a need to upgrade any other dependencies along with this? Below are the current dependencies listed:

  "devDependencies": {
    "node-sass": "^4.12.0",
    "npm-run-all": "^4.1.5",
    "rollup": "^2.44.0",
    "rollup-plugin-commonjs": "^10.0.0",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-svelte": "^5.2.3",
    "rollup-plugin-terser": "^4.0.4",
    "svelte": "^3.37.0",
    "svelte-preprocess-sass": "^0.2.0"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "sirv-cli": "^0.4.4"
  },
javascriptnpmpackage.jsonsvelte

Answer №1

This particular issue stems from an impactful alteration in svelte v3.29.5. In order to utilize this specific version, it is imperative to also upgrade rollup-plugin-svelte to at least v6.1.1:

npm i -D <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92e0fdfaf8eefee7bff2fef7e5fbfcef91e6f5fc97c6d2bca3bca3">[email protected]</a>
# or using yarn
yarn add -D <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12607d7e7e67623f627e67755b7c21647171727d20777a75757d7676747775697d5977747974797e">[email protected]</a>

Answer №2

My previous Svelte project was a bit outdated and I didn't have the time to update it completely. However, by downgrading Svelte to version 3.29.4, I managed to resolve the issue.

npm i -D <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e09396858c94a5bdc9d4cec1ccd7">[email protected]</a>

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

Collaborate on a common code repository for multiple projects

Can you efficiently utilize a single codebase across multiple projects using npm? I am currently working on two separate projects, a client project and an administration client project, both of which contain duplicate code. In order to avoid redundancy, ...

node.jsnpmbabeljs

Encountering the error message "npm unable to locate package.json file" while attempting to execute a nestjs project

Currently, I am diving into a nestjs tutorial on YouTube. Initially, I had set up nodejs and then proceeded to install nest through the @nest-cli command as recommended on their official website using my default bash terminal. My code editor of choice is V ...

node.jsvisual-studio-codenpmnestjsnpm-start

Encountered npm error code 127 with gyp error stack indicating that the command execution failed

I encountered an error message when attempting to run npm install: $ npm install npm ERR! code 127 npm ERR! path /home/jesusjimenez/projects/project/node_modules/fibers npm ERR! command failed npm ERR! command sh -c node build.js || nodejs build.js npm ERR ...

npmnode-modulesnpm-installnode-gyp

The map's content shifts with every scroll of the mouse, rather than being controlled by the

After creating a custom control in leaflet, I noticed that when interacting with it using scroll or click, the underlying map is affected instead of the control itself. <CustomMapControl> <div className="custom-c ...

javascriptreactjsleafletreact-leaflet

How to eliminate the comma from the final element in a JavaScript Vue.js array?

I'm looking to remove the comma from the last element in Vue, but I'm unsure how to do so since the index of the last element is unknown. <td v-if="category.sub_category.length > 0"> <template v-for=&q ...

javascriptvue.js

Sending an event to a component that has been rendered in Vue

I'm currently in the process of developing a custom rendered component that will execute a function when clicked on: // Creating a standard Vue component with a render function Vue.component('greeting', { methods: { sayHello(){ ...

javascriptvue.js

Intensive analysis of objects comparing their characteristics

Currently delving into the world of Javascript, I encountered a coding exercise involving a "deepEqual" function that I attempted to write but ultimately struggled with. Even after reviewing the solution, one particular part perplexed me - the for loop, ...

javascript

React fails to acknowledge union types

I have the following types defined: export enum LayersItemOptionsEnum { OPERATOR, HEADER, } type sharedTypes = { children: string | ReactElement; }; type LayersItemStatic = sharedTypes & { label: string; option: LayersItemOptionsEnum; }; t ...

javascriptreactjstypescripttypesdiscriminated-union

I'm having trouble getting a http.request to run within an imported module. It just doesn't seem to work when I try to access

Here is the code from my main.js file: var spaceJson = require('./space.js'); var options = { "method": "GET", "hostname": "10.10.111.226", "port": null, "path": "/API/Org", "headers": { "authorization": "Bearer eyJ0eXAiOiJKV1QiLCJ ...

javascriptnode.js

Defeat the all-powerful !important tag and enable dialog customization for positioning

I am currently developing a browser extension and I am encountering an issue with using JQueryUI to display a modal dialog. The problem arises when certain websites, for example espn.com, also utilize JQueryUI but do not properly scope their own elements. ...

javascriptjquerycssjquery-ui

AngularJS's $resource module returns an empty array as a response

I am trying to display a table with items from JSON data. I have created a Service that returns the JSON data. In my controller, I am querying the Service to receive an array of data. It's a little confusing because I am putting the response in a new ...

javascriptjsonangularjsresources

Preserve the scroll location while adding new content to a list in AngularJS

I have been attempting to add new items to a list within a scrollable container using ng-repeat, with the most recent item appearing at the top. It is important that I am able to preserve the scroll position if the scrollbar is not at the very top when add ...

javascriptjqueryangularjsdomscroll

Issues encountered while establishing a connection to an API in React Native

When attempting to log in a user by connecting to my API, I encountered some issues. It seems that every time my laptop has a different IP address, I need to make changes in the file where the fetch or XMLHttpRequest is located in order for the login proce ...

javascriptreactjstypescriptreact-native

Determining the successful completion of an ajax request using jQuery editable plugin

I recently started using Jeditable to enable inline editing on my website. $(".video_content_right .project_description").editable(BASE_URL+"/update/description", { indicator: "<img src='" + BASE_URL + "/resources/assets/front/images/indicator ...

javascriptjqueryajaxjeditable

Remove the export statement after transpiling TypeScript to JavaScript

I am new to using TypeScript. I have a project with Knockout TS, and after compiling it (using the Intellij plugin to automatically compile ts to js), this is my sample.ts file: import * as ko from "knockout"; ko; class HelloViewModel { language: Kn ...

javascripttypescriptknockout.js

Create a unique type in Typescript that represents a file name with its corresponding extension

Is there a way for me to specify the type of a filename field in my object? The file name will consist of a string representing the name of the uploaded file along with its extension. For instance: { icon: "my_icon.svg" } I am looking for a ...

javascripttypescripttypestypescript-typingsreact-typescript

Automatically select a value in MUI AutoComplete and retrieve the corresponding object

I recently set up a list using the MUI (v4) Select component. I've received a feature request to make this list searchable due to its extensive length. Unfortunately, it appears that the only option within MUI library for this functionality is the Au ...

javascriptreactjstypescriptmaterial-ui

Leverage a node script to initiate a child process, obtain the output from the child process, and terminate the child

I want to create a node script named myScript.js that initiates a child process npm start, saves the output of npm start in a global variable let myVar, and ensures that if the main program myScript.js is terminated for any reason, the child process is als ...

node.jsnpmstdoutchild-process

Transforming data from a singular object into an array containing multiple objects with key-value pairs

Looking for assistance with converting data from a single object in JSON format to another format. Here is the initial data: var originalData = { "1": "alpha", "2": "beta", "3": "ceta" } The desired format is as follows: var convertedData = ...

javascriptjson

Having trouble uploading a file to Laravel using the jQuery .post method?

Here is a snippet of my HTML code: <input type="file" class="form-control" name="file-name" id="file-id"> This is the JavaScript function that is meant to send the file to an API: var file = $('input#file-id').val(); $.post('my/url/ ...

javascriptphpjqueryajaxlaravel