framerx-build-system icon indicating copy to clipboard operation
framerx-build-system copied to clipboard

Exclude React from the lib bundle

Open ikornienko opened this issue 6 years ago • 0 comments

Basically when building lib/index.js it creates a distributable library similar to some npm package with a React component(s), therefore all best practices apply. One of them is to not bundle React itself, otherwise if there is somewhere one of the components uses ref, likely in Framer X you'll see an error like

Invariant Violation: Element ref was specified as a string (outer) but no owner was set. This could happen for one of the following reasons:

  1. You may be adding a ref to a functional component
  2. You may be adding a ref to a component that was not created inside a component's render method
  3. You have multiple copies of React loaded See https://fb.me/react-refs-must-have-owner for more information.

To achieve it, in the webpack config externals can be added like

  externals: {
    react: {
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'React',
      root: 'React'
    },
    'react-dom': {
      commonjs: 'react-dom',
      commonjs2: 'react-dom',
      amd: 'ReactDOM',
      root: 'ReactDOM'
    }
  }

ikornienko avatar Sep 08 '18 05:09 ikornienko