Javascript 如何禁用或防止ReactJS在服务器端呈现文档时查找文档?
我正在尝试在我的ReactJS应用程序中使用GSAP在客户端制作动画。如果我通过npm安装gsap模块,然后尝试在模块内使用gsap,则会出现以下错误:Javascript 如何禁用或防止ReactJS在服务器端呈现文档时查找文档?,javascript,node.js,reactjs,gsap,server-side-rendering,Javascript,Node.js,Reactjs,Gsap,Server Side Rendering,我正在尝试在我的ReactJS应用程序中使用GSAP在客户端制作动画。如果我通过npm安装gsap模块,然后尝试在模块内使用gsap,则会出现以下错误: node_modules/gsap/src/uncompressed/TweenMax.js:2535 _doc = document, ^ ReferenceError: document is not defined at Function.<anonymous&
node_modules/gsap/src/uncompressed/TweenMax.js:2535
_doc = document,
^
ReferenceError: document is not defined
at Function.<anonymous> (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:2535:11)
at [object Object].check (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:5794:61)
at new Definition (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:5811:10)
at window._gsDefine (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:5816:12)
at Array.<anonymous> (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:2489:11)
at /Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:7570:9
at Object.<anonymous> (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:7581:3)
at Module._compile (module.js:435:26)
at Module._extensions..js (module.js:442:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/babel-register/lib/node.js:138:7)
尝试将web添加为配置中的目标。但这应该是默认值
var path = require('path');
module.exports = {
entry: path.join(process.cwd(), 'client-render.js'),
output: {
path: './public/',
filename: 'build.js'
},
module: {
loaders: [
{
loader: 'babel'
}
]
},
target: "web",
}
在我的webpack.config.js中:
module.exports = {
entry: path.join(process.cwd(), 'client/client-render.js'),
output: {
path: './public/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel'
}
]
},
/* this is new */
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
APP_ENV: JSON.stringify('browser')
}
})
]
}
然后在我的模块中:
if (process.env.APP_ENV === 'browser') {
load_the_module_for_browser;
}
在webpackConfig的plugin属性中插入process.env,如下所示:
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(isDevelopment ? 'development' : 'production'),
IS_BROWSER: true
}
})
]
在您的网页中设置ENV vars ala process.ENV.IS_浏览器ConfigThank@DoubleU23!我已经更新了问题以显示我的webpack.config.js。如何/在何处定义“set ENV vars ala process.ENV.IS_BROWSER”?
if (process.env.APP_ENV === 'browser') {
load_the_module_for_browser;
}
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(isDevelopment ? 'development' : 'production'),
IS_BROWSER: true
}
})
]