Module not found. attempted require...

[RylanH]

I get an error when using prerender-loader. It seems to fail with the below error. I traced it to this line and it appears that the only keys in compilation.assets are ssr-bundle.js. Any suggestions?

 '  Error: Child compilation failed:\n  Module build failed (from ./node_modules/prerender-loader/dist/prerender-loader.js):\n  Error: Error:  Module not found. attempted require("url")\n  \n  - index.js:190 runChildCompiler.then.window.require\n    [account-web]/[prerender-loader]/src/index.js:190:19\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  - Error: Error:  Module not found. attempted require("url")\n  \n  - compiler.js:79 childCompiler.runAsChild\n    [account-web]/[react-app]/[html-webpack-plugin]/lib/compiler.js:79:16\n  \n  - Compiler.js:296 compile\n    [account-web]/[react-app]/[webpack]/lib/Compiler.js:296:11\n  \n  - Compiler.js:553 hooks.afterCompile.callAsync.err\n    [account-web]/[react-app]/[webpack]/lib/Compiler.js:553:14\n  \n  \n  - Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]\n    [account-web]/[react-app]/[tapable]/lib/Hook.js:35:21\n  \n  - Compiler.js:550 compilation.seal.err\n    [account-web]/[react-app]/[webpack]/lib/Compiler.js:550:30\n  \n  \n  - Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]\n    [account-web]/[react-app]/[tapable]/lib/Hook.js:35:21\n  \n  - Compilation.js:1294 hooks.optimizeAssets.callAsync.err\n    [account-web]/[react-app]/[webpack]/lib/Compilation.js:1294:35\n  \n  \n  - Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]\n    [account-web]/[react-app]/[tapable]/lib/Hook.js:35:21\n  \n  - Compilation.js:1285 hooks.optimizeChunkAssets.callAsync.err\n    [account-web]/[react-app]/[webpack]/lib/Compilation.js:1285:32\n  \n  \n  - Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]\n    [account-web]/[react-app]/[tapable]/lib/Hook.js:35:21\n  \n  - Compilation.js:1280 hooks.additionalAssets.callAsync.err\n    [account-web]/[react-app]/[webpack]/lib/Compilation.js:1280:36\n  \n  \n' ]

[hugmanrique]

Does your clientside bundle require the url dependency? prerender-loader runs your code under a JSDOM instance, so Node deps are not available.

[silvenon]

This seems to happen when using prerender-loader with webpack-dev-server, I created a very simple demo, yarn start will start the server.

I'm trying to figure out what the complete workflow with prerender-loader should be. If the entry point exports a function that only executes at build time, how does the application run on the client?

[hugmanrique]

I know this is a real issue, but this plugin isn't designed to be used in development mode (with hot-reloading libraries): you should only need to apply it on a production build (with no added code from webpack hot-reloading libraries)

[silvenon]

I assumed that initially, but the readme says "works with webpack-dev-server" and the library uses Webpack's entry point by default, which was supposed to be for client code, so I was getting mixed signals.

The only way how I got both prerender and client code to work is to duplicate the render call:

import React from 'react'
import { render } from 'react-dom'
import App from './app'

render(<App />, document.getElementById('root'))

export default () => {
  render(<App />, document.getElementById('root'))
}

Is that how it's supposed to be used? I'm not confused too much about the duplicated call, I know that the contents of the exported function can be anything, for example renderToString. But in that case I'd have to import react-dom/server, doesn't that mean that that code would end up in the client bundle?

(I'm not talking about webpack-dev-server here, let's assume that I'm only including prerender-loader in the production Webpack configuration.)

Let me know if I explained the confusion well enough.

[edwardfxiao]

some libraries we rely on do have some issues with attempted require("url") attempted require("util") attempted require("crypto") etc. problems. (Node v11.9.0)

How to fix it?

Does prerender-loader have conditional escaping?
Like

if (typeof prerender === undefined){
  require('some-lib')
}

[edwardfxiao]

Ok for now, I am doing something like this

if (!(navigator.userAgent.includes('Node.js') || navigator.userAgent.includes('jsdom'))){
  // require here
}

[developit]

FWIW, I would not recommend using prerender-loader in combination with webpack-dev-server.

module.exports = function(env, argv) {
  const isProd = argv.mode === 'production';

  return {
    plugins: [
      new HtmlWebpackPlugin({
        template: isProd ? '!!prerender-loader?string!index.html' : 'index.html',
      })
    ]
  };
}

[developit]

Regarding conditional escaping, you can do this:

if (self.PRERENDER) {
  // code is being run in prerender-loader
}
else {
  // code is being run in browser
}

[developit]

I've added a fallback to Node require() so this should work now.

[edwardfxiao]

Thanks for your heads up. I’m aware that it should not work with webpack-dev-server.

I’m still struggling with multiple entries issue though, hope you can help me with it.

#29

[developit]

@edwardfhsiao I'll take a look.