TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

[ZababurinSergei]

Modules

    "esbuild": "^0.18.11",
    "esbuild-css-modules-plugin": "^2.7.1",
    "esbuild-plugin-path-alias": "^1.0.7",
    "esbuild-plugin-polyfill-node": "^0.3.0"

css module ( https://github.com/indooorsman/esbuild-css-modules-plugin/issues/51 )

cssModulesPlugin({
      v2: true,
      inject: (css, digest) => {
        return `
          const myRoot = document.querySelector('body');
          // there maybe some other logic to make sure myRoot is available
          const styleId = '#style_${digest}';
          if (!myRoot.querySelector(styleId)) {
            const styleEle = document.createElement('style');
            styleEle.id = styleId;
            styleEle.textContent = \`${css.replace(/\n/g, '')}\`;
            myRoot.appendChild(styleEle);
          }
        `
      }
    })

I get error

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

full config esbuild

const buildParams = {
  entryPoints: ["src/index.js"],
  outfile: './build/index.mjs',
  format: "esm",
  loader: { ".js": "jsx", ".json": "json", ".png": "file", ".jpeg": "file", ".jpg": "file", ".svg": "file", ".woff": "file" },
  color: true,
  minify: true,
  bundle: true,
  sourcemap: true,
  mainFields : [ 'module' , 'main' ],
  define,
  logLevel: "error",
  external: ["*.gif"],
  plugins: [
    aliasPlugin({
      '@src': path.resolve(__dirname, './src')
    }),
    polyfillNode({
      process: true,
      buffer: true,
      define
    }),
    cssModulesPlugin({
      v2: true,
      inject: (css, digest) => {
        return `
          const myRoot = document.querySelector('body');
          // there maybe some other logic to make sure myRoot is available
          const styleId = '#style_${digest}';
          if (!myRoot.querySelector(styleId)) {
            const styleEle = document.createElement('style');
            styleEle.id = styleId;
            styleEle.textContent = \`${css.replace(/\n/g, '')}\`;
            myRoot.appendChild(styleEle);
          }
        `
      }
    })
    // copyStaticFiles({
    //   src: './public',
    //   dest: './build',
    //   dereference: true,
    //   errorOnExist: false,
    //   preserveTimestamps: true,
    //   recursive: true,
    // })
  ]
};

Error in this line

 // const absOutdir = path.isAbsolute(outdir) ? outdir : path.resolve(buildRoot, outdir);

I have only

outfile: './build/index.mjs',

How can i fix it ?

If i set build folder in out i have two file index.js and index.mjs and index.js file

main.mjs:1 Uncaught SyntaxError: The requested module './index.js' does not provide an export named 'default' (at main.mjs:1:8)

 const absOutdir = path.resolve(buildRoot, './build');

[indooorsman]

Hi @ZababurinSergei could you please try to replace outfile to outdir & outExtension:

{
   outdir: './build',
   outExtension: { '.js': '.mjs' }
}

[ZababurinSergei]

This fixed the bug. But the file is not correct.

In out i get two file.

index.js and index.mjs

My esbuild config

/**
 * ESBuild Params
 * @link https://esbuild.github.io/api/#build-api
 */
const buildParams = {
  entryPoints: ["src/index.js"],
  outdir: './build/',
  outExtension: { '.js': '.mjs' },
  format: 'esm',
  bundle: true,
  loader: { ".js": "jsx", ".json": "json", ".png": "file", ".jpeg": "file", ".jpg": "file", ".svg": "file", ".woff": "file" },
  color: true,
  minify: false,
  sourcemap: false,
  mainFields : [ 'module' , 'main' ],
  define,
  logLevel: "error",
  plugins: [
    aliasPlugin({
      '@src': path.resolve(__dirname, './src')
    }),
    polyfillNode({
      process: true,
      buffer: true,
      define
    }),
    cssModulesPlugin({
      v2: true,
      inject: (css, digest) => {
        return `
          const myRoot = document.querySelector('body');
          console.log('#####!!!!!!########', myRoot)
          // there maybe some other logic to make sure myRoot is available
          const styleId = '#style_${digest}';
          if (!myRoot.querySelector(styleId)) {
            const styleEle = document.createElement('style');
            styleEle.id = styleId;
            styleEle.textContent = \`${css.replace(/\n/g, '')}\`;
            myRoot.appendChild(styleEle);
          }
        `},
      v2CssModulesOption: { // Optional.
        dashedIndents: false, // Optional. refer to: https://github.com/parcel-bundler/parcel-css/releases/tag/v1.9.0
        pattern: `[name]_[local]_[hash]`
      },
      emitDeclarationFile: true,
      forceInlineImages: true,
      force: true,
      namedExports: true,
      // inject: '#my-styles-container'
    })
  ]
};

index.js include inject css

// .build.inject.js
(function(window2) {
  const doInject = () => {

index.mjs not include inject css

And i can't disable bundle.

If I disable the bundle, the libraries are not imported into the assembly. And if I leave it, the injection is not added to the index.mjs

[indooorsman]

In out i get two file.
index.js and index.mjs

This is a bug I think, will fix it soon

[indooorsman]

@ZababurinSergei please try npm i esbuild-css-modules-plugin@3.0.0-dev.18