Skip to content

bug: dist-custom-elements module path validation suggests wrong dir #3507

@rwaskiewicz

Description

@rwaskiewicz

Prerequisites

Stencil Version

v2.17.2

Current Behavior

When running a stencil build in a new project*, the validation for the module field points to a directory that does not exist. This is shown as a warning in the console to the user like so:

[ WARN  ]  Package Json: package.json:7:3
           package.json "module" property is set to "dist/index.js". It's
           recommended to set the "module" property to:
           ./dist/components/components/index.js

      L6:  "main": "dist/index.cjs.js",
      L7:  "module": "dist/index.js",
      L8:  "es2015": "dist/esm/index.mjs",

Note the 'components/components' in the warning message

* Although this is most easily reproducible in a new project, that doesn't limit it from occurring in more sophisticated projects

Expected Behavior

No warning should be shown when building a new stencil project

Steps to Reproduce

Without the reproduction URL above:

  1. Create a new stencil component library - npm init stencil@latest component component-warn
  2. cd component-warn, npm i, and save your progress git init && git add -A && git commit -m 'init with cli'
  3. Remove the contents of stencil.config.ts such that only the dist-custom-elements output target is present (to minimize the size of the reproduction):
diff --git a/stencil.config.ts b/stencil.config.ts
index 94ceb39..b4b8965 100644
--- a/stencil.config.ts
+++ b/stencil.config.ts
@@ -3,19 +3,8 @@ import { Config } from '@stencil/core';
 export const config: Config = {
   namespace: 'component-warn',
   outputTargets: [
-    {
-      type: 'dist',
-      esmLoaderPath: '../loader',
-    },
     {
       type: 'dist-custom-elements',
     },
-    {
-      type: 'docs-readme',
-    },
-    {
-      type: 'www',
-      serviceWorker: null, // disable service workers
-    },
   ],
 };

After running the steps immediately above or after pulling down the reproduction case:

  1. cd into the project's root directory
  2. npm ci to ensure dependencies are up to date
  3. npm run build

The warning should appear upon running the build step

Code Reproduction URL

https://github.com/rwaskiewicz/stencil-module-validation-repro

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Bug: ValidatedThis PR or Issue is verified to be a bug within Stencil

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions