Nwb: Error trying to import an HTML file

[lachlanjc]

A major part of the website I'm building with nwb I'd rather not render in the browser for performance reasons, so I'm using static-react to render it to a .html file. This is great, but I'm unable to import the .html file into my nwb app.

Here's the import:

import rendered from '../public/rendered.html'

Here's the error:

Module parse failed: [path to html file...] Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

ERROR in ./public/rendered.html
Module parse failed: /Users/lachlanjc/PROJECT/public/rendered.html Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp.raise (/Users/lachlanjc/PROJECT/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
    at Parser.pp.unexpected (/Users/lachlanjc/PROJECT/node_modules/webpack/node_modules/acorn/dist/acorn.js:1490:8)
    at Parser.pp.parseExprAtom (/Users/lachlanjc/PROJECT/node_modules/webpack/node_modules/acorn/dist/acorn.js:333:12)
    at Parser.pp.parseExprSubscripts (/Users/lachlanjc/PROJECT/node_modules/webpack/node_modules/acorn/dist/acorn.js:228:19)
    at Parser.pp.parseMaybeUnary (/Users/lachlanjc/PROJECT/node_modules/webpack/node_modules/acorn/dist/acorn.js:207:17)
    at Parser.pp.parseExprOps (/Users/lachlanjc/PROJECT/node_modules/webpack/node_modules/acorn/dist/acorn.js:154:19)
    at Parser.pp.parseMaybeConditional (/Users/lachlanjc/PROJECT/node_modules/webpack/node_modules/acorn/dist/acorn.js:136:19)
    at Parser.pp.parseMaybeAssign (/Users/lachlanjc/PROJECT/node_modules/webpack/node_modules/acorn/dist/acorn.js:112:19)
    at Parser.pp.parseExpression (/Users/lachlanjc/PROJECT/node_modules/webpack/node_modules/acorn/dist/acorn.js:88:19)
    at Parser.pp.parseStatement (/Users/lachlanjc/PROJECT/node_modules/webpack/node_modules/acorn/dist/acorn.js:1771:23)
    at Parser.pp.parseTopLevel (/Users/lachlanjc/PROJECT/node_modules/webpack/node_modules/acorn/dist/acorn.js:1666:21)
    at Parser.parse (/Users/lachlanjc/PROJECT/node_modules/webpack/node_modules/acorn/dist/acorn.js:1632:17)
    at Object.parse (/Users/lachlanjc/PROJECT/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
    at Parser.parse (/Users/lachlanjc/PROJECT/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/lachlanjc/PROJECT/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/Users/lachlanjc/PROJECT/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
 @ ./src/App.js 31:26-60

So I googled and found html-loader, Webpack's loader for html files. I installed it in my nwb.config.js file:

module.exports = {
  type: 'react-app',
  webpack: {
    loaders: [
      { test: /\.html/, loader: 'html' }
    ]
  }
}

And after a full reinstall of all packages, restart of server, etc, I'm still unable to import the html file. I'm using version 0.11.0 installed as a dev dependency. Any ideas?

Thanks 😀

[insin]

webpack.loaders is for tweaking the configuration of nwb-managed loaders.

Try using webpack.extra - this will be merged into the generated webpack config:

module.exports = {
  type: 'react-app',
  webpack: {
    extra: {
      module: {
        loaders: [
          { test: /\.html/, loader: 'html' }
        ]
      }
    }
  }
}

[lachlanjc]

@insin Thank you SO much! Was totally stuck there. I really appreciate it 😊

[insin]

You're welcome!

Added this as an example to the docs in 986e0ca too.