Webpack integration
willopez opened this issue · 4 comments
Hi @denvned and thanks for your work on this very needed Relay feature.
I have successfully integrated isomorphic-relay and isomorphic-relay-router into my project. However, my webpack build process is now broken. I have to manually transpile the code before running it. Which makes sense, since the babelRelayPlugin is used to transform Relay.QL fragments on the client and not on the server.
I get this error,
Invariant Violation: RelayQL: Unexpected invocation at runtime.
Either the Babel transform was not set up, or it failed to identify this call site.
Make sure it is being used verbatim as `Relay.QL`.
Have you found anyway to run the babelRelayPlugin transformation when rendering on the server and integrating that with webpack?
Which makes sense, since the babelRelayPlugin is used to transform Relay.QL fragments on the client and not on the server.
Actually, babelRelayPlugin should be used when transpiling server side code also. And I never had any problems when I did it using webpack.
I see that in your example https://github.com/denvned/isomorphic-relay-router/tree/master/examples/todo you run a build script to compile the src folder and then npm start from the output folder(lib). Which compiles the Relay fragments on the server and all. I use the same workflow currently to develop. What I would like to be able to do is to use webpack to perform this transpilation on demand, so I don't have to transpile my code every time I make a change. this is my current webpack.config https://gist.github.com/willopez/4f3d6a9840383ab7731a
First of all you need to enable the babelRelayPlugin plugin for babel-loader in your webpack.config: plugins: ['./build/babelRelayPlugin'].
You also might need to separate webpack.config for the server and for the browser. Here is an example: https://github.com/webpack/react-webpack-server-side-example/blob/2412b6a9290491dc2d30038d027332895d769e6e/webpack.config.js
I got my webpack workflow working with SSR! thanks for pointing me in the right direction.