SudoCat / Nunjucks-Isomorphic-Loader

Nunjucks loader for webpack, supporting both javascript templating and generating static HTML files through the HtmlWebpackPlugin.
MIT License
16 stars 5 forks source link

Loader not recognising 'web' target #1

Closed JannieT closed 6 years ago

JannieT commented 7 years ago

When I try to load a simple nunjucks template with this loader, the build fails with the following error message:

Module build failed: TypeError: Cannot read property 'root' of null
at Object.module.exports (/Users/jannie/Desktop/pim/node_modules/nunjucks-isomorphic-loader/src/node-loader.js:27:31)
at Object.module.exports (/Users/jannie/Desktop/pim/node_modules/nunjucks-isomorphic-loader/index.js:16:44)

From the line that is referenced it looks like the loader is not recognizing the webpack target:

module.exports = function (source) {
  return this.target === 'web' ? (
    require('nunjucks-loader').bind(this)(source)
  ) : (
    require('./src/node-loader').bind(this)(source)  // <--- this is line 16
  );
};

You can see from this gist that I explicitly set the target as 'web' in my webpack config.

SudoCat commented 7 years ago

Apologies for the belated response, I'm quite surprised to see someone using this! I'm sorry that you haven't had any luck with it so far, and well done getting this far with my lacklustre documentation.

Judging by what you've said, it definitely looks like the target property isn't accessible there - honestly, that section of the code was simply based off similar syntax found without the nunjucks-loader module. Giving it a proper look over now, I realise it actually makes very little sense - my bad. I'll update this at the soonest available opportunity to instead use a query setting to switch between the two.

After having a look through your gist, it looks like you actually want to be using the loader to compile static HTML files via the HtmlWebpackPlugin - if that's what you're trying to do, then this bug actually shouldn't impede you. The nunjucks-loader required on line 14 doesn't support generating static files (which is why I wrote this loader!).

To get this setup to support generation of static files, just change your webpack config for this loader to:

{
    test: /\.html$/,
    use: [ 'nunjucks-isomorphic-loader' ],
    query: {
        root: ['path/to/your/templates']
    }    
}

Hopefully that does the job 👍

And a big ol' thanks for being the first person I know of to use this loader! I'll endeavour to fix these bugs and write up some actually helpful documentation when I get the opportunity, and hopefully no one else will have to wait 4 days to get it working! 😞

JannieT commented 7 years ago

Thanks for your response. I have tried your config change, but then get:

Error: options/query provided without loader (use loader + options) in {
  "test": {},
  "use": [
    "nunjucks-isomorphic-loader"
  ],
  "query": {
    "root": [
      "src/views"
    ]
  }
}

So I tried this config:

rules: [
    {
        test: /\.html$/,
        use: [{
            loader: 'nunjucks-isomorphic-loader',
            query: {
                root: 'src/views'
            }    
         }]
    }
]

which runs the build, but then it does not recognise the web target and errors out with:

Child html-webpack-plugin for "list.html":
       [0] ./~/html-webpack-plugin/lib/loader.js!./src/views/list.html 422 bytes {0} [built] [failed] [1 error]

    ERROR in ./~/html-webpack-plugin/lib/loader.js!./src/views/list.html
    Module build failed: TypeError: pathStats.isFile is not a function
        at Object.precompile (/Users/jannie/Desktop/pim/node_modules/nunjucks/src/precompile.js:78:23)
        at Object.module.exports (/Users/jannie/Desktop/pim/node_modules/nunjucks-isomorphic-loader/src/node-loader.js:52:38)
        at Object.module.exports (/Users/jannie/Desktop/pim/node_modules/nunjucks-isomorphic-loader/index.js:16:44)
SudoCat commented 7 years ago

Okay, I got some time to actually run through your test case properly and debug it all.

Here's a gist with the updated files and configs.

The main two issues I found were:

These problems are both faults with my loader, I've found the fixes for them and will now implement and test them. I'll try and get some documentation written up now as well.

In the mean time, if you want to get your stuff working you can use .njk extensions for your templates, and wrap the query root in an array.

Apologies for all this and thanks for persevering through it! 😄