2017-07-18 116 views
0

我遇到了一个我认为来自webpack的错误。那就是:ReferenceError:全局未定义在eval

index.js:9 Uncaught ReferenceError: global is not defined 
    at eval (index.js:9) 
    at Object.<anonymous> (bundle.js:2548) 
    at __webpack_require__ (bundle.js:622) 
    at fn (bundle.js:48) 
    at eval (client:1) 
    at Object.<anonymous> (bundle.js:2541) 
    at __webpack_require__ (bundle.js:622) 
    at bundle.js:668 
    at bundle.js:671 

我的WebPack是:

import webpack from 'webpack'; 
import merge from 'webpack-merge'; 
import path from 'path'; 
import isDev from 'isdev'; 
import { Dir } from './src/utils'; 

const TARGET = process.env.npm_lifecycle_event; 

let Config = { 
    entry: [ 
    'babel-polyfill', 
    'react-hot-loader/patch', 
    path.join(Dir.src, 'client.js'), 
    ], 
    output: { 
    path: path.join(Dir.public, 'build'), 
    filename: 'bundle.js', 
    }, 
    target: 'node', 
    resolve: { 
    modules: [Dir.src, 'node_modules'], 
    extensions: ['*', '.js', '.jsx', '.json'], 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js?$/, 
     enforce: 'pre', 
     loader: 'eslint-loader', 
     exclude: /node_modules/, 
     include: Dir.src, 
     }, 
     { 
     test: /\.js?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     }, 
    ], 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: JSON.stringify(process.env.NODE_ENV), 
     }, 
    }), 
    ], 
}; 

if (TARGET === 'build:prod' && !isDev) { 
    Config = merge(Config, { 
    bail: true, 
    devtool: 'source-map', 
    output: { publicPath: '/build/' }, 
    plugins: [ 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.UglifyJsPlugin({ 
     comments: false, 
     dropDebugger: true, 
     dropConsole: true, 
     compressor: { 
      warnings: false, 
     }, 
     }), 
    ], 
    }); 
} 

if (TARGET === 'server:dev' && isDev) { 
    Config = merge(Config, { 
    devtool: 'eval', 
    entry: ['webpack-hot-middleware/client'], 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoEmitOnErrorsPlugin(), 
    ], 
    }); 
} 

const WebpackConfig = Config; 
export default WebpackConfig; 

此错误才开始显示出来,一旦我说什么终极版提出了服务器端渲染。因此,我正在使用窗口.__ PRELOADED_STATE__在./src/utils/store.js中的商店水合,并且它也在index.ejs这是呈现给客户端的文件。

这也是我.ba​​belrc如果有的话:

{ 
    "presets": ["es2015", "react", "stage-0"], 
    "env": { 
     "development": { 
      "plugins": ["react-hot-loader/babel"], 
     }, 
    }, 
    "plugins": [ 
     "babel-root-import" 
    ], 
} 

希望任何人都可以在这方面帮助 - 我没有找到我的研究和试验的解决方案。谢谢!

回答

0

问题是,我认为,这target: 'node'在您的webpack.config.js。这基本上表明,Webpack可能会假定该软件包将运行在类似节点的环境中,环境提供了类似于globalrequire的全局变量。除非另有说明,否则Webpack会采用浏览器环境并重写global以指向window。您的配置会禁用此重写。

您可以从您的配置中删除target: 'node',或通过将node: {global: true}添加到您的配置对象来明确启用global重写。

+0

感谢那@Stefan - 你是对的。我说的唯一原因是因为我有一个问题说'无法解析'fs'',并且提出的解决方案是'target:'node'':https://github.com/webpack-contrib/css-loader/问题/ 447 ...然后我得到了'全局未定义',所以我有一种错误循环,并且找不到任何东西来杀死所有它们...任何想法? – adambargh

+0

从逻辑上讲,你需要获得webpack来模拟弹出的所有东西。例如'fs':'node:{fs:'empty'}'。我不知道这是否是你想要做的正确解决方案。 –

+0

也就是'webpack.config.js'中的'node:{global:true,fs:'empty'}' –