crater
crater copied to clipboard
jcoreio
Allow resolving imports from 'src'
I'm not sure if you want to include this in your project or just leave it as an exercise for the user. Using the webpack resolve property doesn't work because that's client code only.
This PR allows you to import files relative to src.
import MyComponent from 'myModule/components/MyComponent';
Cool! For some reason in prod mode it can't find the stream module. I haven't figured out why yet.
Also we should change some source files to make use of this so that it's integration tested
Oh, I see, somehow the resolver plugin is defeating the nodeExternals() in the webpack config, and react-dom-stream is getting bundled into prerender.js instead of left as require('react-dom-stream')
I'll have to try to find the cause of this issue. I'm not a webpack master but I'll see what I can do.
Hmmm. Another option would be to use the babel resolver plugin only for non-webpacked code, and use some webpack option (root I think?) to accomplish the same in webpacked code.
Getting the webpack resolve.root configuration was the first place I went to, and works fine. The problem is that the server code doesn't resolve.
I'm going to play with the babel resolver to see if I can fine-tune what's modifying. It should only touch the src files and leave the others alone. Not sure if it can do this.
Right but I think if you can just use babel resolver in dev mode and resolve.root in prod mode it will work, since in prod everything but index.js is in the webpack bundle anyway.
Ok, I've done a bunch of testing on this branch. I cannot get webpack's resolve.root to work in production. It's possibly something to do with the dynamic require statements but I couldn't track it down. As an alternative I've created an alias instead of altering the root.
You can now reference files like this: import Test from '~/mymodule' which will alias it to src/mymodule.
It's using webpack config resolve.alias for production client & server, and for development client. In development mode, webpack is not used on the server so I had to add the babel-module-resolver plugin for that.
This may not be a PR you want in master since it's opinionated about using '~' as an alias, but it's definitely something I'll be using. :-)
Actually, I like the tilde a lot better since it's explicit. Though I wonder if Webstorm is able to jump to the correct module when you click imports with tildes? That would be my only hesitation about merging this. Also don't worry about the CI failure, looks like it timed out on Node 4 because it was going to slowly. I'm retrying it...
Yeah. I like the explicitness of it too. I'm changing all of my code to use that.
I use webstorm too! It does have aliasing built in via Resource Root (http://stackoverflow.com/questions/34943631/path-aliases-for-imports-in-webstorm) but not with the tilde.
Someone needs to make a webstorm plugin that resolves via babel or webpack...
Hmmm, sorry for the delay, I'm kind of hesitant to use the tilde in here if Webstorm doesn't understand it. But if we could get resolve.root working in production I'd merge it
Yup I agree. It's a start anyways. I'll have to dig further into why resolve.root is not working.