Error with stencil store

[bsastregx]

Stencil version:

@stencil/core@2.6.0

I'm submitting a:

[x] bug report [x] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior: I have installed @stencil/store. It works just fine except that when I try to run storybook (i am using storybook with stencil) I get the following error : ERROR in ./node_modules/@stencil/store/dist/index.mjs 57:59-70 Can't import the named export 'forceUpdate' from non EcmaScript module (only default export is available) @ ./dist/collection/components/store.js

Expected behavior: Storybook would just run normally

Steps to reproduce:

Related code:

components/store.ts:

import { createStore } from "@stencil/store";

const { state } = createStore({
  large: document.documentElement.classList.contains("gxg-large"),
});

export default state;

storybook/webpack.config.js

const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const WriteFilePlugin = require("write-file-webpack-plugin");

module.exports = async ({ config }) => {
  config.entry.push(path.join(__dirname, "../dist/gemini.js"));
  config.entry.push(path.join(__dirname, "../dist/gemini/gemini.css"));
  fs.readdirSync(path.join(__dirname, "../dist/collection/components")).map(
    function(file) {
      jsFilePath = path.join(
        __dirname,
        `../dist/collection/components/${file}/${file}.js`
      );
      try {
        if (fs.existsSync(jsFilePath)) {
          config.entry.push(jsFilePath);
        }
      } catch (err) {
        console.error(err);
      }

      cssFilePath = path.join(
        __dirname,
        `../dist/collection/components/${file}/${file}.css`
      );
      try {
        if (fs.existsSync(cssFilePath)) {
          config.entry.push(cssFilePath);
        }
      } catch (err) {
        console.error(err);
      }
    }
  );

  config.plugins.push(
    new CopyPlugin([
      {
        from: "**/*",
        to: "./",
        context: "dist"
      }
    ])
  );

  config.plugins.push(new WriteFilePlugin());

  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    loaders: [require.resolve("@storybook/source-loader")],
    enforce: "pre"
  });

  return config;
};

// insert any relevant code here

Other information: Sergio Arbeo, one of the contributors of stencil core, sugested me to configure webpack so it loads correctly the dependencies. I don't know webpack... But the error seems to be in stencil store... Please any help will be much appreciated.

[pinkkis]

Getting the same errors, so really looking for a solution for this.

[splitinfinities]

@pinkkis also within storybook?

[pinkkis]

@splitinfinities Yes, correct. Both for "getRenderingRef" and "forceUpdate"

ERROR in ./node_modules/@stencil/store/dist/index.mjs 50:24-39
Can't import the named export 'getRenderingRef' from non EcmaScript module (only default export is available)
 @ ./dist/collection/store/app-store.js
 @ ./dist/collection/store/index.js
[...]

stencil/core 2.9.0, stencil/store 1.5.0, storybook/html 6.3.12

[rwaskiewicz]

👋 As a bit of housekeeping, I'm going to move this issue to the Stencil Store repo

[krishna-koushik]

any update on this?