Stencil config generating files in dist that doesn't work standalone

Question

Stencil config generating files in dist that doesn't work standalone

2.5k views Asked by INFOSYS At 08 September 2024 at 14:27

I have started on stencil development and tried to create the hello world from it but while trying to build and deploy and use it stand alone the dist file is generating some random files which doesn't seem to work standalone.

I have published the files to npm and trying to run it standalone in a html file. Using unpkg https://unpkg.com/browse/[email protected]/dist/

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 <my-component first="FF" last="'Don't call me a framework' JS"></my-component>
<script src='https://unpkg.com/[email protected]/dist/index.js'></script>
</body>
</html>

and this one is a test from a different package i found in npm and this seems to work .

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
</head>

<body>

 <my-component first="FF" last="'Don't call me a framework' JS"></my-component>

<script src='https://unpkg.com/[email protected]/dist/test.js'></script>
</body>

</html>

The only difference i found is https://unpkg.com/browse/[email protected]/dist/

the dist contains a root file for the main of project which runs standalone but this is not generated in the new stencil config build. the documentation on this is very sparse , can some one point me what am i doing wrong.. here or something missing by stencil.

package.json

"name": "stenciltest2",
  "version": "0.0.2",
  "description": "Stencil Component Starter",
  "main": "dist/index.cjs.js",
  "module": "dist/custom-elements/index.js",
  "es2015": "dist/esm/index.mjs",
  "es2017": "dist/esm/index.mjs",
  "types": "dist/custom-elements/index.d.ts",
  "collection": "dist/collection/collection-manifest.json",
  "collection:main": "dist/collection/index.js",
  "unpkg": "dist/test/test.js",
  "files": [
    "dist/",
    "loader/"
  ],

stencil config

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'test',
  buildEs5: true,
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements-bundle',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ]
};

Original Q&A

There are 2 answers

**kisp** · Answer 1 · 2021-01-15 08:36:24

By defining esmLoaderPath in stencil.config you ask stencil to build a separate loader-package into the loader folder.

This results in two different packages!

Using the content in the loader package you can run defineCustomElements on window.

after having this call, your custom web-components are mapped / interpreted by the browser.

**Aaron Mendez** · Answer 2 · 2020-10-29 18:31:25

Do you mean "standalone" as in, without an http server?

If so, this is what the Ionic team calls "prerender."

stencil build --prerender

You will need to set baseUrl in stencil.config.ts.

import { Config } from '@stencil/core';

export const config: Config = {
  outputTargets: [
    {
      type: 'www',
      baseUrl: 'https://somedomain.com/somepath',
    }
  ]
};

See:

TechQA.

Stencil config generating files in dist that doesn't work standalone

There are 2 answers

Related Questions in WEB-COMPONENT

Related Questions in STENCILJS

Popular Questions

Popular Tags

Trending Questions