shiftsave / framerx-build-system Goto Github PK

First thx, this project really has me exited, it'd be great to share "codebase" between engineers and designers.

Repro case

steps:

1. git clone
2. yarn
3. yarn build
4. add component
5. build (build 'succeed' but component is not found)
   

yarn build output:

I am expecting, in lib folder after building, to see a new folder (Text) appear, with a Title.js file in it.
What am I missing, is Typescript required ?
Are there more step than "just" importing the compo in the index.ts at the root of the project for the build job to register the new compo ?

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'
    }
  }

Details:

• FramerX v2.0

Steps to reproduce:

• Clone repo
• Yarn install
• Yarn build
• Open design-system.framerx

Result:

Hi. Thanks for the great tool!

I'm experimenting with https://github.com/mui-org/material-ui and trying to get its components work. I've succeeded in taking a Button in to Framer X, but other components give me this minified error (right on the workbench when I try to "draw" the component) http://reactjs.org/docs/error-decoder.html?invariant=130

Seems like the problem was with the minified React bundled in ./lib, but when I try to unbundle it (successfully based on the size and contents of index.js), I get the same error. I've also tried to use our production components with the entirely different webpack settings, but got the #130 error. Any idea how to solve this?

First and foremost, thank you for providing this codebase to the public along with your blog post. The possibility of coupling production React.js components with design components is very exciting.

I'm aware that this is all very experimental at this point but I am attempting to follow along with the blog post Bringing Design System Components from Production Into Framer X and I am seeing a strange error.

I have:

• cloned the repository
• ran yarn install
• ran yarn build
• opened design-system.framerx in Framer X.

I have not edited the code in any way but when I design-system.framerx in Framer X I get the following errors:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (framer.debug.js, line 0)
[Error] ReferenceError: Can't find variable: Framer
	(anonymous function) (preview.js:1:92908)
	r (preview.js:1:115)
	(anonymous function) (preview.js:1:528216)
	r (preview.js:1:115)
	(anonymous function) (preview.js:1:533117)
	r (preview.js:1:115)
	(anonymous function) (preview.js:1:519)
	Global Code (preview.js:1:529)

I am attempting to debug it but am wondering if you have any insights into why Framer would be undefined.

hey, i'm impressed by the work put into this build system and was hoping to use it on a project that i am working on. i don't know enough webpack to figure out a solution, but i am trying to import material-ui components as part of my build system in framer x. i tried to add @material-ui/core to my dependencies in my package.json so that it would get bundled into the generated lib/index.js file, but i am getting errors in framer x complaining about an Invariant Violation in ./Button.tsx: Minified React error #188

Is integration with material-ui possible with this build system?