When running Rollup, a syntax error occurs due to the use of the "import" syntax in an internal Rollup file using Javascript

I am working on a nodeJS/express application with a rollup bundler. My rollup configuration file defines a command in the package.json like this: "build": "env ROLLUP_OPTIONS='prod' rollup --config configs/rollup.config.js". However, when I run "npm run build", I encounter an error:

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cca8a9a9bc8cfde2fce2fc">[email protected]</a> watch C:\Users\1\Desktop\sprout-test\sprout-backend
> env ROLLUP_OPTIONS='dev' rollup --config configs/rollup.config.js --watch

C:\Users\1\Desktop\sprout-test\sprout-backend\node_modules\rollup\dist\shared\loadConfigFile.js:484
        ? (await import(url.pathToFileURL(fileName).href)).default
                 ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\1\Desktop\sprout-test\sprout-backend\node_modules\rollup\dist\bin\rollup:23:25)

The issue appears to be within the loadConfigFile function in the rollup source code:

async function loadConfigFile(fileName, commandOptions) {
    const extension = path.extname(fileName);
    const configFileExport = extension === '.mjs' && supportsNativeESM()
        ? (await import(url.pathToFileURL(fileName).href)).default
        : extension === '.cjs'
            ? getDefaultFromCjs(require(fileName))
            : await getDefaultFromTranspiledConfigFile(fileName, commandOptions.silent);
    return getConfigList(configFileExport, commandOptions);
}

This function seems to be causing a syntax error (unexpected token "import") due to dynamic import syntax, which suggests that the error originates from the rollup source code itself rather than my own code. It is preventing my config file from being loaded and executed. Despite having the necessary babel plugins listed in my dev-dependencies, the error persists. Interestingly, the project runs smoothly on a Windows 7 machine but encounters issues on a Windows 10 machine, indicating potential discrepancies in node, git, and npm versions.

My node version (win 7): 8.11.3

My npm version (win 7): 6.4.14

Attempts to resolve the issue by uninstalling rollup globally have been unsuccessful. As I search for solutions, any advice would be greatly appreciated.

Answer №1

Your Windows 7 machine's NodeJS version may not be compatible with the Rollup version you have installed. To check compatibility, refer to this link.

NPM packages can specify the NodeJS versions they are compatible with using the engine property. In this case, version 10 or higher is required.

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

Angular file upload component with customizable file size limits

I'm currently developing an upload file feature that will transmit the file via nodejs. However, I am encountering an issue related to file size. Whenever the file exceeds a few kilobytes, I encounter the following error: Error: request entity too la ...

The jQuery event listener for clicking on elements with the class "dropdown-menu li a" is not functioning properly

I've been attempting to implement a dropdown menu using Bootstrap that displays the selected option when a user clicks on it. However, I'm encountering issues as the breakpoints set within $(document).on("click", ".dropdown-menu li ...

Issues with the OnChange function not properly functioning in duplicate input fields

I've designed a form that allows for adding or deleting rows, effectively cloning input fields. One of the input fields utilizes Jquery Ajax to retrieve its value. However, upon adding an extra row by cloning the parent row to generate a child row, th ...

What could be causing the sluggish performance of "npm install"?

Can someone help me troubleshoot my package setup issues? Is there a way to speed up the process? packages.json : { "name": "testing node", "version": "0.0.0", "description": "", "main": "app.config.js", "dependencies": { "babel-core": "^6.17.0", ...

Exploring Scope Data Using a Custom AngularJS Directive

We are completely new to the world of AngularJS and are currently facing a challenge in displaying HTML tooltips from a custom directive within Angular. As beginners in this technology, we are struggling to find the right solution for this issue. Initiall ...

Combine all possible pairings of elements from two distinct arrays

Is there a way to combine the elements of two arrays and return them in a new array? Let's say we have these two arrays: const whoArr = ["my", "your"]; const credentialArr = ["name", "age", "gender" ...

Turn off the scrollbar without losing the ability to scroll

Struggling with disabling the HTML scrollbar while keeping the scrolling ability and preserving the scrollbar of a text area. Check out my code here I attempted to use this CSS: html {overflow:hidden;} Although it partially worked, I'm not complete ...

Is there a way to execute code right before the jQuery submit() function is run?

I'm currently facing an issue with executing codes before a validation function runs in my form. I have tried different methods including referring to How to order events bound with jQuery, but without success. This is the code snippet I am working w ...

Managing location markers with Google Maps API V3: Saving and removing locations

I encountered an issue while using GMAP V3. After realizing the need to save map changes in a database, I struggled to find a way to accomplish this task. Before attempting any workarounds, I thought it would be best to gather some ideas first. The communi ...

Vue.js SyntaxError: Identifier came out of nowhere

An error was reported by VUE debug mode in this line of my code: :style="{transform : 'translate3d(' + translateX + 'px,0, 0)'}"\ The documentation does not provide instructions on how to include a variable within a style binding ...

Retrieve the initial image link from a blogger's post in cases where it is not being stored on the Blogger platform for use in related

I am currently using a hosting service to store the images that I include on my blogger platform. However, I have encountered an issue where blogger does not automatically fetch the image url to use as the thumbnail when the image is hosted externally. C ...

Updating state within a loop of properties in a React ComponentDidUpdate function

I have been working on a project where I needed to update the state after the componentDidMount lifecycle method. The props that I am expecting in the child component are only available at mount, so I can only update the state after that point. The only so ...

There is no 'Access-Control-Allow-Origin' header on the requested resource when connecting to a Heroku server

After deploying a Node.js + Express server to Heroku, I encountered an error while trying to use it: "Access to XMLHttpRequest at 'https://harel-shop-backend.herokuapp.com/auth/autologin' from origin 'http://localhost:3000' has ...

There was an error in reading the property 'RNFSFileTypeRegular' of null, with the JavaScript engine reporting as hermes

Below are the dependencies listed in my package.json file: "dependencies": { "@expo/vector-icons": "^14.0.2", "@react-navigation/native": "^6.0.2", "expo": "~51.0.23", & ...

Revolutionizing the Industry: Discover the Power of Dynamic Models, Stores, and Views for

As a newcomer to EXT JS, I am exploring the use of MVC in my projects. Consider a scenario where I have a web service with a flexible data model. I would like to dynamically create models, stores, and components based on the data from these stores. Let&a ...

Combining all CSS files into one and consolidating all JavaScript files into a single unified file

Whenever I need to add a new CSS or JS file, I always place it in the header section like this Add CSS files <link rel="stylesheet" href="<?php echo URL; ?>public/css/header.css" /> <link rel="stylesheet" href="<?php echo URL; ?> ...

Identify the Google Maps Marker currently displayed on the screen

Is there a way to generate a list of markers within the zoom range for Google Maps, similar to the functionality on this site I'm curious if I can achieve this using jQuery or if there is a built-in function for Google Maps v3? Thank you! ...

Issue with cout in C++ node.js module?

Greetings, I am new to C++ and currently working on tweaking an existing native node module. My goal is to insert cout statements within the module in order to display information that I believe will be beneficial for me. NAN_METHOD(Context2d::SetFillRul ...

The execution of the server.js file in the dist folder does not display any

Currently, I am working on an Angular Universal app. By using the command 'npm run start', I can successfully execute 'ng serve' and the live development server becomes active. However, when attempting to run 'node dist/server.js ...

Saving the previous component's DOM in a React application

Understanding the Root.js File const Root = () => ( <HashRouter> <div> <Route exact path="/" component={Main}/> <Route path="/main/:page" component={Main}/> <Route path="/detail ...