jueves, 5 de noviembre de 2020

Exporting TS React components handling SVGs in a NPM package to be consumed potentially by CRA

Use the same SVG module definition as CRA: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/lib/react-app.d.ts#L47


declare module '*.svg' {

  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<

    SVGSVGElement

  > & { title?: string }>;

  const src: string;

  export default src;

}


Use both @svgr/webpack and url-loader together in webpack config:

{
  test: /\.svg$/,
  use: ['@svgr/webpack', 'url-loader'], 
} 



miércoles, 4 de noviembre de 2020

Cannot find module 'assert' (from Doctrine) when adding React Styleguidist with plain Webpack

 Error:

utility.js:32 Uncaught Error: Cannot find module 'assert'
    at webpackMissingModule (utility.js:32)
    at eval (utility.js:32)
    at eval (utility.js:33)
    at Object../node_modules/doctrine/lib/utility.js (main.bundle.js:6860)
    at __webpack_require__ (main.bundle.js:23007)
    at fn (main.bundle.js:23218)
    at eval (typed.js:27)
    at eval (typed.js:1304)
    at Object../node_modules/doctrine/lib/typed.js (main.bundle.js:6844)
    at __webpack_require__ (main.bundle.js:23007)

This comes from Doctrine, which doesn't declares "assert" as a (peer) dependency. I installed the latest version (2.x) and it didn't work either. I compared with another app that had that dependency satisfied transitively from another module and it had "assert":"1.4.1" installed. I manually installed that one and it worked.