Rollup.config.js config errors and fix after Node update

For example update node fixing bugs in rollup.js after running npm compilation commands.

After updating Node.js, various kinds of errors can occur.

Error variant

When running the command npm rundev Error after update:

(node:2023) Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension.
(Use `node –trace-warnings …` to show where the warning was created)

[!] RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to “.mjs”, set “type”: “module” in your package.json file or pass the “–bundleConfigAsCjs” flag.

Original error: Cannot use import statement outside a module
https://rollupjs.org/guide/en/#-bundleconfigascjs
/app/templates/svelte/rollup.config.js:1
import svelte from ‘rollup-plugin-svelte’;
^^^^^^

SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:74:18)
at wrapSafe (node:internal/modules/cjs/loader:1141:20)
at Module._compile(node:internal/modules/cjs/loader:1182:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
at Module.load (node:internal/modules/cjs/loader:1081:32)
at Function.Module._load (node:internal/modules/cjs/loader:922:12)
at ModuleWrap. (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

A bit of theory

You should never ignore the errors that the command shows:

You can ignore errors with the command:

In this case, all warnings will be ignored and all packages will be installed. However, it is better not to do so. You can skip errors like:

npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated rollup-plugin-commonjs@10.1.0: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-commonjs.

And then try to fix what is not correct without the context of previously ignored errors.

It can be seen from the errors above that rollup-plugin-terser deprecated and used instead @rollup/plugin-terser.

This means that in the file package.json you need to change the packages, as well as change in the config files rollup.config.js.

One of the errors that came up after updating Node.js and packages:

Node tried to load your configuration as an ES module error

Reloading updated config…
[!] RollupError: Node tried to load your configuration as an ES module even though it is likely CommonJS. To resolve this, change the extension of your configuration to “.cjs” or pass the “-bundleConfigAsCjs” flag.

Original error: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a ‘.js’ file extension and ‘/app/templates/svelte/package.json’ contains “type”: “module”. To treat it as a CommonJS script, rename it to use the ‘.cjs’ file extension.
https://rollupjs.org/guide/en/#-bundleconfigascjs
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a ‘.js’ file extension and ‘/app/templates/svelte/package.json’ contains “type”: “module”. To treat it as a CommonJS script, rename it to use the ‘.cjs’ file extension.
at file:///app/templates/svelte/rollup.config.js?1669819006568:24:22
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

To fix it, you need to add to your package.json:

And then in the file rollup.config.js change like this:

import { terser } from ‘@rollup/plugin-terser’;

on this

import terser from ‘@rollup/plugin-terser’;

Remove all require

Including, if there are such moments:

postcss: {
plugins: [require(‘autoprefixer’)],
},

Replace with this:

import postcss from “autoprefixer”;

postcss: {
plugins: [postcss],
},

All this will only work if there are no incompatibilities in the packages. This is important, otherwise the fixes will not solve the problem. Instead of one error, another will pop up.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *