Markdown files not loading when path coming from a var

[EmmanuelBeziat]

In BlogPost.vue and PortfolioPost.vue, loading a markdown dynamically don’t seem to work.

Works like a charm:

require('../posts/portfolio/2016-08-27-ubisoft-steep.md')((exports) => {
  transition.next({
  })
})

Fail miserably and return "can’t load module"

const file = '../posts/portfolio/2016-08-27-ubisoft-steep.md'
require(file)((exports) => {
  transition.next({
  })
})

[EmmanuelBeziat]

Complete error :

WARNING in ./~/babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/PortfolioPost.vue
Critical dependencies:
50:8-21 the request of a dependency is an expression
 @ ./~/babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/PortfolioPost.vue 50:8-21

[EmmanuelBeziat]

Don‘t seem to help : http://stackoverflow.com/questions/37000273/critical-dependencies-the-request-of-a-dependency-is-an-expression-webpack

[reverland]

if you do need to dynamicly load that module, always follow directory + variable + ext way. Or you need to write module path explicitly for webpack may, in fact, js may not able to predict what's the variable is during build time

[EmmanuelBeziat]

Hi, Thanks for your help! That‘s what I tried during the night:

const path = '2016-08-27-ubisoft-steep'
require('../posts/portfolio/' + path + '.md')((exports) => { /* stuff */

But it get me this error in dev tools :

Uncaught Error: Cannot find module './2016-08-27-ubisoft-steep.md'.

Like if it escaped all the first part before the variable.

However, webpack return this warning :

WARNING in ./src/posts/portfolio ^\.\/.*\.md$
Module not found: Error: Cannot resolve 'file' or 'directory' ../../loader/post-loader.js in /Users/Emmanuel/Sites/emmanuelbeziat/src/posts/portfolio
 @ ./src/posts/portfolio ^\.\/.*\.md$

(the post-loader.js is the same as yours, I stole that too 😛 ). I don‘t have this warning if I just give the path directly to require().

[EmmanuelBeziat]

Weird bullshit detected

This works:

const path = '/2016-08-27-ubisoft-steep.md'
require('../posts/portfolio' + path)((exports) => { /* stuff */ 

This fails:

const path = '2016-08-27-ubisoft-steep.md'
require('../posts/portfolio/' + path)((exports) => { /* stuff */