2016-11-27 4 views
2

Ich habe ein Problem mit static-site-generator-webpack-plugin.Webpack 2: Static-Site-Generator-Plugin "Selbst ist nicht definiert"

In meinem Projekt verwende ich:

  • webpack v2.1.0-beta.27
  • statisch-Ort-Generator-webpack-Plugin v3.1.0
  • reagieren und reagieren-dom v15.4.1

Es ist eine einzelne Seite Website.

Hier ist ein Teil der webpack.config.babel.js Datei:

import StaticSiteGeneratorPlugin from 'static-site-generator-webpack-plugin' 
 
    
 
export default { 
 
    entry: { 
 
     main: './components/Root/index.jsx', 
 
    }, 
 
    output: { 
 
     path: path.join(process.cwd(), './public'), 
 
     filename: '[name].[hash].js', 
 
     libraryTarget: 'umd', 
 
    }, 
 
    
 
     plugins: [ 
 
     // ... 
 
     new StaticSiteGeneratorPlugin('main', '/', {}), 
 
     ] 
 
     // ... 
 
    }

Und das ist ./components/Root/index.jsx Datei:

import React from 'react' 
 
import ReactDOMServer from 'react-dom/server' 
 
import HTMLDocument from 'react-html-document' 
 

 
import App from '../App/index.jsx' 
 

 
export default function (locals, callback) { 
 
    const MyHtml = (
 
     <HTMLDocument 
 
      title='My Page' 
 
      metatags={[ 
 
       { name: 'description', content: 'My description' }, 
 
      ]} 
 
      scripts={[ `${locals.assets.main}` ]}> 
 
      <App /> 
 
     </HTMLDocument> 
 
    ) 
 

 
    const html = ReactDOMServer.renderToStaticMarkup(MyHtml, locals.assets) 
 
    callback(null, '<!doctype html>' + html) 
 
}

Wenn ich versuche, es zu verwenden, sehe ich die Fehlermeldung: ERROR in ReferenceError: self is not defined. Was heißt das?

Antwort

3

Ich hatte den gleichen Fehler mit webpack-dev-Server. Die Ursache für diesen Fehler ist das Rendern auf einem Server. Der Server verfügt nicht über das Objekt self. Sie können die scope Option (https://github.com/markdalgleish/static-site-generator-webpack-plugin#scope) verwenden oder einfach vermeiden, static-site-generator-webpack-plugin auf dem Server zu verwenden.

Wenn Sie webpack-dev-Server verwenden diesen Fehler zu lösen, die Sie haben inline: false (https://github.com/webpack/docs/wiki/webpack-dev-server#inline-mode) einzustellen. Wenn Sie Hot-Reload in Ihrer Stamm-URL ohne Iframe verwenden möchten, fügen Sie einfach zu Ihrer Seite hinzu (https://github.com/webpack/docs/wiki/webpack-dev-server#inline-mode-in-html).

+0

Eine friggin 'inline: false' Eigenschaft löste es. Kann es nicht glauben. Sie verdienen einen Keks. – Birowsky

Verwandte Themen