ES module support

[mantismamita]

Hello, our team is migratiing from sapper to sveltekit and I'm struggling a bit with a script with postcss-cli which we use to generate a json file with custom variables to be used in js.

I'm getting the folowing error: require() of ES modules is not supported. require() of /Xxxx/xxxxxxxxx/xxxxxx/kit/src/assets/styles/postcss.config.js from /Xxxx/xxxxxxxxx/xxxxxx/kit/node_modules/lilconfig/dist/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename postcss.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/mantismamita/radiofrancewww/kit/package.json.

The problem is that we don't want to use cjs in the project. Is there a possiblity of using a package that uses ES modules thus avoiding the need to use cjs in our postcss.config?

[RyanZim]

Through a chain of dependencies, we are blocked on https://github.com/davidtheclark/cosmiconfig/issues/224; contributing there would be the first step to offering ESM support. Otherwise, you'll be forced to use the .cjs extension.

[RyanZim]

We're now dependent on https://github.com/antonk52/lilconfig; which is better maintained and should be better able to support this; just need someone to open an issue/PR there.

[RodrigoOkuta]

I'm also having the same issue

[movy]

Probably related:

yarn postcss  dark.css  dark.min.css

(node:87252) 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)
/.yarn/__virtual__/postcss-cli-virtual-fe2a46580a/0/cache/postcss-cli-npm-9.1.0-ea2e55c876-6f172cbdba.zip/node_modules/postcss-cli/index.js:3
import fs from 'fs-extra'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:353:18)
    at wrapSafe (node:internal/modules/cjs/loader:1039:15)
    at Module._compile (node:internal/modules/cjs/loader:1073:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.external_module_.Module._load (/.pnp.cjs:28231:14)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
    at node:internal/main/run_main_module:17:47

Downgrading to 8.3.1 helped.

[RyanZim]

@movy unrelated, v9+ requires Node 12 or higher.

[movy]

@movy unrelated, v9+ requires Node 12 or higher.

I'm on node 16.

$ node -v
v16.3.0

[perrin4869]

isn't this solved by https://github.com/postcss/postcss-load-config/pull/234 already? Just need to upgrade postcss-load-config to v4

[RyanZim]

@perrin4869 It should be; just haven't gotten around to upgrading. PR welcome if someone wants to take a stab at it before I get time.

@movy Whatever issue you're having, it's not related, please open a new issue.

[RyanZim]

Released in v10.0.0! Sorry for the wait, folks.

[jfbrennan]

With the latest 10.1.0, I get this error:

> postcss src/css/utility-classes.css | lightningcss --minify -o ./dist/utility-classes.min.css /dev/stdin

(node:27282) 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)
/Users/me/Repos/foo/postcss.config.js:1
import atImport from "postcss-import";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1094:15)
    at Module._compile (node:internal/modules/cjs/loader:1129:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1219:10)
    at Module.load (node:internal/modules/cjs/loader:1043:32)
    at Function.Module._load (node:internal/modules/cjs/loader:878:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)

My package.json:

        "autoprefixer": "^10.4.14",
        "lightningcss-cli": "1.17.1",
        "postcss": "^8.4.23",
        "postcss-cli": "^10.1.0",
        "postcss-custom-properties": "^13.1.5",
        "postcss-import": "^15.1.0",

My postcss.config.js:

import atImport from "postcss-import";
import autoprefixer from "autoprefixer";
import customProperties from "postcss-custom-properties";
// const atImport = require("postcss-import");
// const autoprefixer = require("autoprefixer");
// const customProperties = require("postcss-custom-properties");

module.exports = {
  plugins: [atImport, autoprefixer, customProperties({ preserve: false })]
};

My Node and NPM versions:

node -v  v16.19.0
npm -v 9.6.5

AFAIK this is all correct and should work.

[RyanZim]

You either need to have "type": "module" set in your package.json, or you need to rename to postcss.config.mjs.

[sbaum2s]

You either need to have "type": "module" set in your package.json, or you need to rename to postcss.config.mjs.

It´s actually both.