Fatal error: Cannot use import statement outside a module

[diegocr]

This issue is raised while trying to use cssnano as in the example

Is there some way to workaround this, other than using a transpiler?

[C-Lodder]

Hi @diegocr

Could you please provide some more information?

• Node.js version
• PostCSS version
• Grunt version
• Full code example from your Gruntfile.js

[diegocr]

Thanks for the prompt reply.

$ node --version
v14.15.0

$ grunt -V
grunt-cli v1.3.2
grunt v1.3.0

PostCSS 7.0.35 as needed by latest public cssnano version, and gruntfile.js using the straight example in your README.md file.

are you implying that error does not happens to you? i have been trying to troubleshoot/workaround myself for the past few hours and everything i read about searching in Google point to some incompatibility from ES modules, and that e.g. Babel could be used to transpile the scripts before executing them, but i do find this by far overkill.

[C-Lodder]

Please update to PostCSS 8.x, which is what Grunt PostCSS v3 requires ;)

[diegocr]

Initially i did installed the latest PostCSS 8.x version, but cssnano was complaining about not being compatible with it yet, so downgraded it to 7.0.35

[C-Lodder]

You will need to install v2.0.4 of Grunt PostCSS then.

package.json:

"@lodder/grunt-postcss": "2.0.4"

[diegocr]

Same issue i'm afraid.

Have re-started from scratch to make sure:

npm i --save postcss@7.0.35 @lodder/grunt-postcss@2.0.4 cssnano cssnano-preset-lite

with diffs:

diff --git a/Gruntfile.js b/Gruntfile.js
index 96a747228..c1b323e83 100755
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -380,6 +380,15 @@ module.exports = function(grunt) {
     // Project configuration.
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
+        postcss: {
+            options: {
+                processors: [
+                    // require('autoprefixer')(),
+                    require('cssnano')({preset: 'lite'})
+                ]
+            },
+            dist: {expand: true, flatten: true, src: ['css/*.css', 'css/**/*.css'], dest: 'build/'}
+        },
         concat: {
             prod: {
                 options: {
@@ -421,10 +430,10 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-htmljson');
     grunt.loadNpmTasks('grunt-contrib-htmlmin');
     grunt.loadNpmTasks('grunt-contrib-concat');
-
+    grunt.loadNpmTasks('@lodder/grunt-postcss');

     // Default task(s).
-    var tasks = ['concat', 'htmljson', 'secureboot'];
+    var tasks = ['postcss', 'concat', 'htmljson', 'secureboot'];
     if (useHtmlMin) {
         tasks.unshift('htmlmin');
     }

and

diff --git a/package.json b/package.json
index 297c5cf55..0bd913276 100644
--- a/package.json
+++ b/package.json
@@ -47,14 +47,18 @@
+    "@lodder/grunt-postcss": "^2.0.4",
+    "cssnano": "^4.1.10",
+    "cssnano-preset-lite": "^1.0.0",
     "grunt": "1.3.0",
     "grunt-contrib-concat": "1.0.1",
     "grunt-contrib-htmlmin": "3.1.0",
     "grunt-htmljson": "0.1.1",
+    "postcss": "^7.0.35",

but then....

$ grunt
Running "postcss:dist" (postcss) task
Fatal error: Cannot use import statement outside a module

[diegocr]

NB: this issue comes from cssnano itself, from the cssnano-utils package to be more exact https://github.com/cssnano/cssnano/blob/91604d3ccde260047187dd9cecaaf17ad08f6208/packages/cssnano-utils/src/index.js#L1

So... at first glance looks like there is no way to use cssnano from within Grunt script(s) or am i missing something? :)

[C-Lodder]

Would you be able to provide me a link to your repo (with your latest changes) or the full Gruntfile.js code so I can test?

[diegocr]

Damn it, just found out cssnano-utils is used by cssnano-preset-lite, i.e. removing {preset: 'lite'} everything does work fine 🤦 ... the lite preset is only what i wanted to use through, will check if i can workaround this now.

Thanks @C-Lodder for your time and help in any case ;)

[diegocr]

The repo is this one https://github.com/meganz/webclient

You can apply my changes/diff over there is you still want to give it a try.

[diegocr]

Looks like someone else faced the same and tried to solve it by publishing a new package under cssnano-preset-dev

...but, unfortunately it does not work:

$ grunt
Running "postcss:dist" (postcss) task
Fatal error: processor is not a function

[C-Lodder]

I've just given it a test and see the error. Unfortunately there's not much I can do if 3rd party packages are throwing errors.

We'll have to wait till they add PostCSS 8 support

[diegocr]

No problem, for now i am playing with adding rules manually to disable the features i don't want, e.g.

                processors: [
                    // require('autoprefixer')(),
                    require('cssnano')({
                        preset: [
                            'default', {
                                svgo: false,
                                normalizeWhitespace: false,
                                ...etc
                            }

So, let's close this.

Thanks again for your time and help @C-Lodder, much appreciated.