framerx-build-system
framerx-build-system copied to clipboard
Exclude React from the lib bundle
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:
- You may be adding a ref to a functional component
- You may be adding a ref to a component that was not created inside a component's render method
- 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'
}
}