CrocoDillon / universal-react-redux-boilerplate

Step by step creation of a Universal React + Redux Boilerplate
Other
176 stars 33 forks source link

trouble importing absolute paths #34

Closed pailhead closed 7 years ago

pailhead commented 7 years ago

I cant import absolute paths with this kit

import foo from /components/foo

I've tried a few different things in webpack.config but couldnt get anything to work. Any examples?

CrocoDillon commented 7 years ago

Haven't really looked into this but first thing that comes to mind is that for SSR this boilerplate doesn't use Webpack, only Babel. You might need a Babel plugin in addition to configuring Webpack.

pailhead commented 7 years ago

Thanks for the reply and hint! Out of many boilerplates i settled on this one for studying, really appreciate the work!

CrocoDillon commented 7 years ago

No problem! I'm happy to hear that 😄 Let me know if/when you worked it out, otherwise I'll look into it when I have time.

pailhead commented 7 years ago

Solved this with https://www.npmjs.com/package/babel-plugin-module-resolver

But now i'm struggling with images and file-loader :(

pailhead commented 7 years ago

... which were fixed with yet another babel plugin transform-assets. I'm still not sure if i have a good grasp of what is going on, i expected the webpack-isomorphic-tools to be able to handle this since it's doing it with sass? But i couldnt get it to work.

pailhead commented 7 years ago

It seems that i was a bit behind, when upgrading to the latest version of the repo transform-assets doesnt seem to be working. Paths do seem like they are resolved properly when trying absolute, but i get 404s when trying to load them. I don't really understand what is happening.

For example

//src/modules/someComponent/someStyle.scss

.someClass{
  background-image:  url('/static/someImage.jpg'); //works, but 404 on loading (webpack doesnt complain)
  background-image: url('./static/someFoo.jpg'); //doesnt work because nothing at that path
  background-image: url('../../static/someImage.jpg'); //works because correct path
}

Seems to me the only change between where i could get this to work and now is the router upgrade, could it somehow be getting in the way?