search

jcoreio / crater

Meteor/Webpack/React SSR app skeleton that runs your app code outside of Meteor Isobuild
ISC License
82 stars 10 forks source link

Allow resolving imports from 'src' #40

Open darkadept opened 7 years ago

darkadept commented 7 years ago

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';
jedwards1211 commented 7 years ago

Cool! For some reason in prod mode it can't find the stream module. I haven't figured out why yet.

jedwards1211 commented 7 years ago

Also we should change some source files to make use of this so that it's integration tested

jedwards1211 commented 7 years ago

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

darkadept commented 7 years ago

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.

jedwards1211 commented 7 years ago

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.

darkadept commented 7 years ago

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.

jedwards1211 commented 7 years ago

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.

darkadept commented 7 years ago

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. :-)

jedwards1211 commented 7 years ago

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...

darkadept commented 7 years ago

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.

jedwards1211 commented 7 years ago

Someone needs to make a webstorm plugin that resolves via babel or webpack...

jedwards1211 commented 7 years ago

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

darkadept commented 7 years ago

Yup I agree. It's a start anyways. I'll have to dig further into why resolve.root is not working.