Can not consume Stencil components in React App without typescript

[BerndWessels]

Hi,

I am trying your demo repo https://github.com/ionic-team/stencil-ds-plugins-demo

I updated all the dependencies

Now I add a brand new CRA in the packages folder as a sibling to app-react and the other packages. I add react-hot-loader to the new CRA.

I use the same dependency and import as app-react but after npm start I see ReferenceError: module is not defined.

After googling a bit it appears that it only works in CRAs using typescript?!

I do understand that you prefer to build the stencil components with typescript, but the react app that consumes them should not be forced to be typescript (there are plenty of huge react apps that can't just easily be converted to typescript).

Any ideas how to get it to work ?

ReferenceError: module is not defined
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:2778:30
Module.../component-library/dist/esm-es5/loader.mjs
http://localhost:3000/static/js/main.chunk.js:2779:3
__webpack_require__
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:790
  787 | };
  788 | 
  789 | // Execute the module function
> 790 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  791 | 
  792 | // Flag the module as loaded
  793 | module.l = true;
View compiled
fn
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
Module.../component-library/loader/index.mjs
http://localhost:3000/static/js/main.chunk.js:2901:82
__webpack_require__
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:790
  787 | };
  788 | 
  789 | // Execute the module function
> 790 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  791 | 
  792 | // Flag the module as loaded
  793 | module.l = true;
View compiled
fn
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:790
  787 | };
  788 | 
  789 | // Execute the module function
> 790 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  791 | 
  792 | // Flag the module as loaded
  793 | module.l = true;
View compiled
fn
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
Module.../component-library-react/dist/index.js
http://localhost:3000/static/js/main.chunk.js:66:69
__webpack_require__
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:790
  787 | };
  788 | 
  789 | // Execute the module function
> 790 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  791 | 
  792 | // Flag the module as loaded
  793 | module.l = true;
View compiled
fn
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:790
  787 | };
  788 | 
  789 | // Execute the module function
> 790 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  791 | 
  792 | // Flag the module as loaded
  793 | module.l = true;
View compiled
fn
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:790
  787 | };
  788 | 
  789 | // Execute the module function
> 790 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  791 | 
  792 | // Flag the module as loaded
  793 | module.l = true;
View compiled
fn
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:3207:79
__webpack_require__
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:790
  787 | };
  788 | 
  789 | // Execute the module function
> 790 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  791 | 
  792 | // Flag the module as loaded
  793 | module.l = true;
View compiled
fn
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:3238:18
__webpack_require__
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:790
  787 | };
  788 | 
  789 | // Execute the module function
> 790 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  791 | 
  792 | // Flag the module as loaded
  793 | module.l = true;
View compiled
checkDeferredModules
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
C:/Users/Admin/Development/stencil-ds-plugins-demo/packages/fabric/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:93

[ianldgs]

We might get a better luck by creating this as a feature request on: https://github.com/ionic-team/stencil-ds-output-targets

[rwaskiewicz]

Hey folks 👋

I apologize that it took so long for someone on the team to acknowledge this issue. Given it's age, I'd be super appreciative if someone could create a minimal reproduction case for the team to take a look at. If not, I completely understand. Again, I apologize that this issue sat for so long without being acknowledged by anyone on the team.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!