title: Next.js and Webpack inline Javascript or CSS ressources
body: <p>I have the following use case: I need to generate static files with React and Next.js. For that I extended the next.config.js with the following content:</p>
  <pre><code>module.exports = {
    exportTrailingSlash: true,
    exportPathMap: async function () {
      const paths = {
        '/': { page: '/' }
      }
      const errorPages = [
        { id: 1, name: '404', lang: 'en' },
        { id: 2, name: '500', lang: 'en' }
      ]
  
      errorPages.forEach(errorPage =&gt; {
        paths[`/errorPage/${errorPage.id}`] = {
          page: '/errorPage/[id]',
          query: { id: errorPage.id }
        }
      })
  
      return paths
    },
  }
  </code></pre>
  <p>This totally works. The files are beeing generated in the <code>out</code> folder after <code>npm export</code></p>
  <p>An additional use case however is this one:
  The index.html file needs to work everywhere, not just in the exact place it has in the <code>out</code> folder. For example another webapp queries an API which scans the index.html and returns the html as string from that file. This html string has to work, but the references for the js files/bundles are relative (see link and script tags):</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;meta
        name=&quot;viewport&quot;
        content=&quot;width=device-width,minimum-scale=1,initial-scale=1&quot;
      /&gt;
      &lt;meta name=&quot;next-head-count&quot; content=&quot;2&quot; /&gt;
      &lt;link
        rel=&quot;preload&quot;
        href=&quot;/_next/static/UkokJ2QynwMCza2ya8Vuz/pages/index.js&quot;
        as=&quot;script&quot;
      /&gt;
      &lt;link
        rel=&quot;preload&quot;
        href=&quot;/_next/static/UkokJ2QynwMCza2ya8Vuz/pages/_app.js&quot;
        as=&quot;script&quot;
      /&gt;
      &lt;link
        rel=&quot;preload&quot;
        href=&quot;/_next/static/runtime/webpack-91b117697e716c22a78b.js&quot;
        as=&quot;script&quot;
      /&gt;
      &lt;link
        rel=&quot;preload&quot;
        href=&quot;/_next/static/chunks/framework.94bc9fd9a7de53a90996.js&quot;
        as=&quot;script&quot;
      /&gt;
      &lt;link
        rel=&quot;preload&quot;
        href=&quot;/_next/static/chunks/commons.6419ced117edf62014da.js&quot;
        as=&quot;script&quot;
      /&gt;
      &lt;link
        rel=&quot;preload&quot;
        href=&quot;/_next/static/runtime/main-2ba45c6c0e61dfa5f796.js&quot;
        as=&quot;script&quot;
      /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;__next&quot;&gt;
        &lt;div style=&quot;margin:20px;padding:20px;border:1px solid #DDD&quot;&gt;
          &lt;h1&gt;Error Pages&lt;/h1&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href=&quot;/errorPage/1/&quot;&gt;test a&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;/errorPage/2/&quot;&gt;test 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;    
      &lt;script
        nomodule=&quot;&quot;
        src=&quot;/_next/static/runtime/polyfills-2889d9d9fcf08314dd3a.js&quot;
      &gt;&lt;/script&gt;
      &lt;script
        async=&quot;&quot;
        data-next-page=&quot;/&quot;
        src=&quot;/_next/static/UkokJ2QynwMCza2ya8Vuz/pages/index.js&quot;
      &gt;&lt;/script&gt;
      &lt;script
        async=&quot;&quot;
        data-next-page=&quot;/_app&quot;
        src=&quot;/_next/static/UkokJ2QynwMCza2ya8Vuz/pages/_app.js&quot;
      &gt;&lt;/script&gt;
      &lt;script
        src=&quot;/_next/static/runtime/webpack-91b117697e716c22a78b.js&quot;
        async=&quot;&quot;
      &gt;&lt;/script&gt;
      &lt;script
        src=&quot;/_next/static/chunks/framework.94bc9fd9a7de53a90996.js&quot;
        async=&quot;&quot;
      &gt;&lt;/script&gt;
      &lt;script
        src=&quot;/_next/static/chunks/commons.6419ced117edf62014da.js&quot;
        async=&quot;&quot;
      &gt;&lt;/script&gt;
      &lt;script
        src=&quot;/_next/static/runtime/main-2ba45c6c0e61dfa5f796.js&quot;
        async=&quot;&quot;
      &gt;&lt;/script&gt;
      &lt;script
        src=&quot;/_next/static/UkokJ2QynwMCza2ya8Vuz/_buildManifest.js&quot;
        async=&quot;&quot;
      &gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Is there a way to tell next to include this js files inline?</p>
  <p>What I tried:</p>
  <p>I am trying to use <a href="https://github.com/jantimon/html-webpack-plugin" rel="nofollow noreferrer">HtmlWebpackPlugin</a> and <a href="https://github.com/dustinjackson/html-webpack-inline-source-plugin" rel="nofollow noreferrer">HtmlWebpackInlineSourcePlugin</a> and updated next.config.js like this:</p>
  <pre><code>const HtmlWebpackPlugin = require('html-webpack-plugin')
  const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
  
  module.exports = {
    exportTrailingSlash: true,
    exportPathMap: async function () {
      const paths = {
        '/': { page: '/' }
      }
      const errorPages = [
        { id: 1, name: 404', lang: 'en' },
        { id: 2, name: '500', lang: 'en' }
      ]
  
      errorPages.forEach(errorPage =&gt; {
        paths[`/errorPage/${errorPage.id}`] = {
          page: '/errorPage/[id]',
          query: { id: errorPage.id }
        }
      })
  
      return paths
    },
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) =&gt; {
      // Note: we provide webpack above so you should not `require` it
      // Perform customizations to webpack config
      // Important: return the modified config
      config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
      config.plugins.push(
        new HtmlWebpackPlugin({
          inlineSource: '.(js|css)$' // embed all javascript and css inline
        })
      )
      config.plugins.push(new HtmlWebpackInlineSourcePlugin())
      return config
    }
  }
  </code></pre>
  <p>it doesn't transform the resources into the inline format and keeps linking them. Is there a way to achieve the desired result with any other webpack addition or is the config wrong?</p>
  <p>thanks in advance!</p>
  <p>EDIT: this is my project.json dependency section:</p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;isomorphic-unfetch&quot;: &quot;^3.0.0&quot;,
      &quot;next&quot;: &quot;latest&quot;,
      &quot;react&quot;: &quot;^16.12.0&quot;,
      &quot;react-dom&quot;: &quot;^16.12.0&quot;,
      &quot;html-webpack-inline-source-plugin&quot;: &quot;0.0.10&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^3.2.0&quot;
    }
  </code></pre>