Error encountered: The use of 'import' and 'export' is limited to 'sourceType: module' when attempting to install Tweakpane

I am currently learning JavaScript and have been following a course on Domestika that requires me to install the Tweakpane package. I usually use Git Bash for installing packages, and I have successfully installed others this way before. Here is the process I used to try and install Tweakpane:

$ npm install --save tweakpane
$ npm install --save-dev @tweakpane/core

Although there were no errors during installation, when I attempted to open my JS file, I encountered the following error:

ParseError: 'import' and 'export' may appear only with 'sourceType: module'
line 7788
sketches\node_modules\tweakpane\dist\tweakpane.js
export { BladeApi, ButtonApi, FolderApi, ListBladeApi, ListInputBindingApi, Pane, Semver, SeparatorBladeApi, SliderBladeApi, SliderInputBindingApi, TabApi, TabPageApi, TextBladeApi, TpChangeEvent, VERSION };
^

I have searched online for solutions related to similar issues with other packages, including installing the core package, but none of them have worked so far. I believe there might be some mistake in my approach.

If anyone could provide guidance on how to resolve this issue and suggest steps to troubleshoot it, I would greatly appreciate it. Please let me know if you need any additional information.

EDIT: As a temporary solution, I checked Tweakpane's GitHub repository and discovered that they switched to ES modules from version 4 onwards, which is the version I had installed. I uninstalled that version and opted for version 3 instead, which resolved the problem. However, I am still interested in understanding more about ES modules and fixing the initial error I encountered.

Thank you!

Answer №1

To successfully update Tweakpane, start by removing the existing version:

npm uninstall tweakpane

Afterwards, proceed to install a previous version:

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

This method has proved effective in my experience.

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

How to launch a new window for a popup

How can I make IE8 open new windows as pop-ups without changing browser settings? I want to use JavaScript's window.open() function. Firefox opens new windows correctly, but IE8 opens them in tabs instead of pop-up windows. Any suggestions on how to a ...

Exploring the power of AngularJS with ng-click functionality and utilizing services

As a beginner in AngularJS, I am facing a knowledge gap when it comes to integrating a barcode scan feature into my application. What I want to achieve is quite simple - a button in the view that, when clicked, triggers a barcode scan. Once the scan is com ...

Having trouble getting the Gulp command to function properly with Laravel

After installing node.js and npm initially, I used npm to install gulp: sudo npm install -g gulp Below is the result: /var/www/html/laravel$ gulp Error: Cannot find module 'process-nextick-args' at Function.Module._resolveFilename (module ...

Issue with Node app--Failed to update environment in configuration file: ${NPM_TOKEN}

I am currently in the process of creating a Docker image for my Sails.js application. Below is the Dockerfile I have constructed: FROM risingstack/alpine:3.4-v8.5.0-4.7.0 ENV NODE_ENV test RUN npm install -g sails COPY npmrc_file .npmrc ARG NPM_TOKEN ...

What is a callback function tied to a specific URL?

I need to implement a functionality in my web application where users can click on a link within a datatable, which will then load a new table on a separate page. This new table should only display rows that have the same id as the row that was clicked on ...

Querying a document by its Id using only JSON in MongoDB

I am trying to query a document in Mongodb (2.6.1) using pure JSON without using ObjectIds. According to the mongodb extended json documentation, I expected the code db.collection.findOne({"_id": {"$oid": "51b6eab8cd794eb62bb3e131"}}) to work but it is th ...

An error occured: Unable to access undefined properties (specifically 'hasOwnProperty')

I encountered an issue and managed to solve it. I am currently working on creating an update profile page for my Express app using Mongoose, but I keep getting the error "TypeError: Cannot read properties of undefined (reading 'hasOwnProperty')". ...

Is Next.js the Ultimate Serverless Rendering Tool with Cloudflare Workers?

I am currently using Next.js version 9 and I am interested in utilizing Next's serverless deployment feature by integrating my application with Cloudflare Workers. According to the documentation for Next.js, all serverless functions created by Next f ...

There is no throttleTime function available in Angular 6 within Rx Js

Currently, my Angular 6 project is utilizing angular/cli": "~6.1.5 and rxjs": "^6.0.0. As a newcomer to Angular 6, I decided to dive into the official documentation to enhance my understanding. Here's a reference link I found useful: http://reactivex ...

Fade out all the other images using jQuery

I have created a jQuery code to fade images, but when I move the mouse over them all images fade simultaneously! $(".playThumb").fadeTo("normal", 1); $(".playThumb").hover(function() { $(".playThumb").each(function() { if ( $(this) != $(this) ...

What is the best way to manage Page Refresh using Angular.js?

I recently followed the tutorial at http://scotch.io/bar-talk/setting-up-a-mean-stack-single-page-application This guide went over controllers and services using angular.js for a single-page application. However, when I try to directly access /pageName o ...

Express not collaborating with Socket IO namespace

Recently, I attempted to establish a namespace on the backend of my project. Here is a snippet of the code: const server = require("http").createServer(app); const connectedUsers = {}; const io = require("socket.io")(server, { path: "/socket", serveC ...

Techniques for transferring form data from JavaScript to Java

Currently in my application, I have a signup form and I am facing an issue with storing the data in the backend. Since I am not well-versed in the backend development, I am struggling with this task. I'm using Netbeans 7.0 as my IDE and MySQL 5.6 for ...

The global installation of npm using npm install -g does not work

Running Windows Server 2008 R2 x64 with npm version 3.9.6, I'm attempting to globally install a package using the command: npm install -g gulp-cli The package is being installed in c:\Users[Me]\AppData\Roaming\npm What could be ...

Obtaining the response object for the web browser

Greetings! I currently have a function within router.js in NODEJS : const authenticateUser = (req, res, next) => { //something }; Whenever my application is live, this function is triggered. I am looking for a way to examine the response object. Is ...

Tips for transferring a file to PocketBase using NodeJs

Currently, I am in the midst of a project that necessitates uploading numerous PDF files to a PocketBase collection. All the necessary files are saved on my computer and my goal is to upload them using nodejs along with the PocketBase JavaScript SDK. Howe ...

Prepare yourself for the possibility of receiving a caution while within a try-catch block

After implementing the MongoClient.connect method and encountering the warning 'await' has no effect on the type of this expression, it became clear that including the .catch line immediately following (which is currently commented out) mitigated ...

Incorporating a fixed header title when creating a customizable table

I am working on creating a dynamic table with rows and columns based on JSON data. JSON: $scope.dataToShow=[ tableHeder=["First Name","Age"], { name:"rahim", age:23 }, ...

Deploy several Vuejs components within a single project on npm using webpack

I am attempting to publish a project on npm that includes multiple Vue components. My goal is to import, register, and utilize both components in the following manner: import Component1 from 'npm-package' import Component2 from 'npm-package ...

JavaScript vs. GSP: Exploring How to Trigger a Grails Action

There is an action in a controller that I need to modify. def deleteFiling={ obj.removeFiling() redirect(action:"list") } This action is triggered from a GSP: <g:link action="deleteFiling" id="${filingInstance.id}"> <img src="${resource(di ...