“You may need an additional loader to handle the result of these loaders.”

by

The problem is that you’re emitting ES2020 to dist/. If you look at the line it’s complaining about:

if (subscriptionContainer instanceof sub_1.ComponentContainer) if (this.agileInstance.integration?.updateMethod) this.agileInstance.integration?.updateMethod(subscriptionContainer.component, Runtime.formatChangedPropKeys(subscriptionContainer));
                                                                                              // ^^                                         // ^^

you can see it’s using the optional chaining operator in the emitted code. Consumers of your library will therefore need to have appropriate configuration to handle this kind of code. Your example consumer, the CRA app, is using Babel; although the setup does have the transform for optional chaining, it’s only run on the source code for the React app itself, not its dependencies (including your library).

One option for fixing it is to emit less modern code, which will reduce the amount of configuration needed by consumers. For example, if you target ES6 using the following settings in tsconfig.json:

{
    "target": "ES6",
    "lib": ["DOM", "ES6", "DOM.Iterable", "ScriptHost", "ES2016.Array.Include"],
    // ...
}

the React app can at least start without you needing to change your source code.

More Related Contents:

  1. Webpack output is empty object
  2. Webpack breaking change
  3. how can I use top level “await” in typescript next.js
  4. How can I fix the “BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default" error?
  5. styled components final styles are injected directly in DOM with tag, with style tag injection does performance gets affected?
  6. The create-react-app imports restriction outside of src directory
  7. Correct path for img on React.js
  8. Difference between npx and npm?
  9. When to use JSX.Element vs ReactNode vs ReactElement?
  10. How to load image files with webpack file-loader
  11. How to import image (.svg, .png ) in a React Component
  12. Typescript: React event types
  13. firebase.auth is not a function
  14. When should I use brackets with imports
  15. npm WARN … requires a peer of … but none is installed. You must install peer dependencies yourself
  16. How to store Configuration file and read it using React
  17. where is create-react-app webpack config and files?
  18. `this` is undefined in Dev Tools when using arrow function
  19. Writing npm modules in TypeScript
  20. How can I disable all typescript type checking?
  21. TypeScript React.FC confusion
  22. How to Set port in next.js
  23. Type ‘void’ is not assignable to type ‘((event: MouseEvent) => void) | undefined’
  24. Missing basic DOM types in TypeScript project
  25. how to set up an inline svg with webpack
  26. Electron IPC and nodeIntegration
  27. How to disable the selection of an item when the first letter of the option is pressed in the Select component?
  28. Browser Detection in ReactJS
  29. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  30. Using styled-components with props and TypeScript

Leave a Comment