fix(config): display ESM errors found in config files

[guillempuche]

Description

I've tried the latest to releases, it doesn't sort fields as my config points in my monorepo. I don't know why.

Script syncpack format --config syncpack.config.js on my root package.json and output:

// syncpack.config.js

/**
 * Syncpack docs https://jamiemason.github.io/
 */

module.exports = {
	dependencyTypes: ['dev', 'overrides', 'prod', 'resolutions'],
	packages: [
		'package.json',
		'xiroi-apps/*/package.json',
		'xiroi-packages/*/package.json',
		'xiroi-packages/*/*/package.json',
	],
	filter: '.',
	// semverGroups: [
	// 	{
	// 		title: 'React Packages',
	// 		range: '^',
	// 		packages: ['react', 'react-dom', 'react-native', '@types/react'],
	// 	},
	// 	{
	// 		title: 'Tamagui Packages',
	// 		range: '^',
	// 		packages: ['@tamagui/**', 'tamagui'],
	// 	},
	// ],
	semverRange: '^',
	// sortAz: [
	// 	'contributors',
	// 	'dependencies',
	// 	'devDependencies',
	// 	'keywords',
	// 	'peerDependencies',
	// 	'resolutions',
	// 	'scripts',
	// ],
	sortFirst: [
		'name',
		'version',
		'description',
		'repository',
		'workspaces',
		'type',
		'main',
		'exports',
		'import',
		'types',
		'scripts',
		'dependencies',
		'devDependencies',
		'resolutions',
		'peerDependencies',
		'packageManager',
		'engines',
		'author',
		'private',
	],
	sortPackages: false,
}

Output:

{
  "name": "app",
  "version": "0.1.0",
  "dependencies": {
    "@dev-plugins/react-navigation": "^0.0.6",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@tamagui/font-inter": "^1.99.1",
    "@xiroi/library-ui-components": "workspace:*",
    "@xiroi/shared-domain": "workspace:*",
    "@xiroi/shared-ui-components": "workspace:*",
    "@xiroi/shared-ui-core": "workspace:*",
    "@xiroi/shared-ui-icons": "workspace:*",
    "@xiroi/shared-ui-localization": "workspace:*",
    "@xiroi/ui-pages-library": "workspace:*",
    "@xiroi/ui-pages-settings": "workspace:*",
    "expo": "~51.0.17",
    "expo-build-properties": "~0.12.2",
    "expo-constants": "~16.0.2",
    "expo-font": "~12.0.6",
    "expo-linking": "~6.3.1",
    "expo-localization": "~15.0.3",
    "expo-router": "~3.5.17",
    "expo-splash-screen": "~0.27.4",
    "i18n-js": "^4.4.3",
    "i18next": "^23.11.5",
    "react": "18.2.0",
    "react-i18next": "^14.1.2",
    "react-native": "0.74.2",
    "react-native-dotenv": "^3.4.11",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
    "tslib": "^2.6.3"
  },
  "devDependencies": {
    "@babel/core": "^7.24.7",
    "@babel/plugin-transform-runtime": "^7.24.7",
    "@biomejs/biome": "^1.8.2",
    "@react-native/metro-config": "^0.74.85",
    "@tamagui/babel-plugin": "^1.99.1",
    "@types/babel__plugin-transform-runtime": "^7",
    "@types/react": "~18.2.79",
    "babel-plugin-module-resolver": "^5.0.2",
    "babel-preset-expo": "~11.0.10",
    "cross-env": "^7.0.3",
    "metro-minify-terser": "^0.80.9",
    "react-native-clean-project": "^4.0.3",
    "ts-node": "^10.9.2",
    "typescript": "5.4.5"
  },
  "main": "index.ts",
  "module": "commonjs",
  "private": true,
  "scripts": {
    "android": "expo run:android",
    "check:doctor": "npx expo-doctor",
    "check:update": "expo install --check",
    "clean": "react-native-clean-project",
    "eas:build:dev:android": "cross-env NODE_ENV=development APP_VARIANT=development eas build --profile development --platform android",
    "eas:build:dev:simulator:android": "cross-env NODE_ENV=development APP_VARIANT=development eas build --profile development:simulator --platform android",
    "ios": "expo run:ios",
    "start": "EXPO_USE_METRO_WORKSPACE_ROOT=1 expo start -c"
  }
}

Suggested Solution

scripts should be before dependencies.

[JamieMason]

Hey @guillempuche, I think the sortPackages: false, will be the reason for this. Remove that or change it to true and give it another try, thanks!

https://jamiemason.github.io/syncpack/config/sort-packages/

Ignore that, it's wrong (still waking up ☕ 😄)

Could you put together a repro please? This is unexpected.

[guillempuche]

You can reproduce it in https://github.com/xiroicat/xiroi/blob/turborepo/package.json (turborepo branch) yarn lint:syncpack [Update: I made it private]

I cannot reproduce in other projects, only that one.

[JamieMason]

Thanks, I will take a look when I get a chance. In the meantime SYNCPACK_VERBOSE=true syncpack format might throw up some clues, I'll take a look as well though when I can.

[guillempuche]

Done.

My config file exists at <root>/syncpack.config.js

---

Another question, does the config need deep search syntax like this or Syncpack already does it as shown in the debug logs?

	packages: [
		'package.json',
		'xiroi-apps/*/package.json',
		'xiroi-packages/*/package.json',
		'xiroi-packages/*/*/package.json',
	],

[JamieMason]

I'm not sure why, because syncpack format --config syncpack.config.js looks perfectly fine, but it did not find your config file. I have a lot of meetings today but will clone the repro when I get time.

[guillempuche]

it did not find your config file

https://github.com/xiroicat/xiroi/blob/turborepo/syncpack.config.js

[JamieMason]

I know it is there, but syncpack did not find it and this is what needs investigation.

? no config file found, will use defaults

[JamieMason]

I've cloned and added some logs and there is a swallowed error from cosmiconfig:

ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/jmason/Dev/xiroi/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

I'll leave this issue open to surface these errors as it is too vague at the moment.

EDIT: In my editor I do see the same error

[guillempuche]

Great, it works @JamieMason.

Strange that my VSCode doesn't complain about ESM when my root package.json is "type": "module". It could be IDE is set up .vscode/settings.json to "typescript.tsdk": "node_modules/typescript/lib"

I updated the Syncpack config to .cjs using module.exports and works.

In ESM, it only needs .js and this change:

/** @type {import("syncpack").RcFile} */
export default {

WARN: If you change the config file extension, then update the package.json script.

---

If the dependency warns the user could be helpful. Else close the issue.

[JamieMason]

Great, glad it got sorted. Thanks @guillempuche – I'll leave this open to track surfacing errors when they happen.