Declaring multiple namespaced packages with glob/regex

[equinusocio]

Hello! How we can declare multiple scoped packages without specifying all of them? For example i want to declare all packages that are under the @MyScope. Before v6 we used:

  const withTM = require('next-transpile-modules')(['@MyScope/.+']);

[martpie]

Hello 👋

It was a consequence of the previous way the plugin worked, it was not documented and was never officially supported (as said in the changelog). Since v5 this is not possible anymore, and is probably not something we will re-add.

You can read more there: #143 (comment)

[nandorojo]

For anyone interested, this is how I added all scoped packages:

First, create a scopes array:

const scopes = [
  '@fullcalendar', 
  '@motify',
  '@nandorojo',
  '@dripsy', 
]

Next, get the names of any packages in those scopes. If you want to black list any, add ignoreTranspileModules: true to their package.json (or implement that as an array in this file).

// next.config.js

const path = require('path')
const fs = require('fs')

// you might need to change this to the relative path of your node_modules!
const node_modules = path.resolve(__dirname, '../..', 'node_modules')

const scopes = [
  '@fullcalendar', 
  '@motify',
  '@nandorojo',
  '@dripsy', 
]

const scopedPackages = []

fs.readdirSync(node_modules)
  .filter((name) => scopes.includes(name))
  .forEach((scope) => {
    fs.readdirSync(path.resolve(node_modules, scope))
      .filter((name) => !name.startsWith('.'))
      .forEach((folderName) => {
        const { name, ignoreTranspileModules } = require(path.resolve(
          node_modules,
          scope,
          folderName,
          'package.json'
        ))
        if (!ignoreTranspileModules) {
          scopedPackages.push(name)
        }
      })
  })

// add it to transpile modules
module.exports = require('next-transpile-modules')(
  [
    'dripsy',
    'expo-next-react-navigation',
    'moti',
    ...scopedPackages,
  ],
  { resolveSymlinks: true }
)

[flaviouk]

I'm using yarn workspaces and got it working using this:

const path = require('path')
const withPlugins = require('next-compose-plugins')
const withTM = require('next-transpile-modules')
const { getAllPackages } = require('standard-monorepo')

// getAllPackages takes a context path, defaults to process.cwd()
// It gets all the package.jsons found in "workspaces"
const packages = getAllPackages(path.join(__dirname, '../../')).map(
  pkg => pkg.name,
)

module.exports = withPlugins([withTM(packages)], config)

[slbls]

If anyone is interested, here's a reusable function based on @nandorojo's code:

const path = require("path");
const fs = require("fs");

/**
 * Get an array of all modules within the scope of an array of module scopes.
 *
 * This is useful in combination with the `next-transpile-modules` Next.js
 * plugin, as it requires specifying all modules individually, regardless of
 * if they share a scope.
 *
 * @example
 * // Returns `["@example/hello", "@example/world"]`.
 * getModulesFromScopes(["@example"])
 *
 * @see https://github.com/martpie/next-transpile-modules/issues/143
 * @see https://github.com/martpie/next-transpile-modules/issues/149
 */
const getModulesFromScopes = (
	scopes,
	nodeModulesPath = path.resolve(__dirname, "node_modules")
) => {
	const nodeModulesContents = fs.readdirSync(nodeModulesPath);

	const modules = nodeModulesContents.reduce((accumulator, scopeFolder) => {
		if (!scopes.includes(scopeFolder)) {
			return accumulator;
		}

		const scopeFolderPath = path.resolve(nodeModulesPath, scopeFolder);
		const scopeFolderContents = fs.readdirSync(scopeFolderPath);

		const scopeModules = scopeFolderContents.reduce(
			(accumulator, moduleFolder) => {
				if (moduleFolder.startsWith(".")) {
					return accumulator;
				}

				const modulePath = path.resolve(
					nodeModulesPath,
					scopeFolder,
					moduleFolder,
					"package.json"
				);

				const {
					name: moduleName,
					ignoreTranspileModules
				} = require(modulePath);

				if (!ignoreTranspileModules) {
					accumulator.push(moduleName)
				}

				return accumulator;
			},
			[]
		);

		return accumulator.concat(scopeModules);
	}, []);

	return modules;
};