多个错误 auth0 反应 apollo babel webpack

Posted 2023-03-10

【中文标题】多个错误 auth0 反应 apollo babel webpack

【英文标题】：multiple errors auth0 react apollo babel webpack

【发布时间】：2018-12-17 01:09:11

【问题描述】：

当我想在我的项目中实现 auth0 时，我遇到了一点问题。 每当我解决一个问题时遇到另一个问题，总是相同的 3 个错误：

-require 不是函数

-窗口未定义

-缺少类属性

我已经尝试通过玩 babelrc 来解决它，改变预设的顺序

在 webpack 中我添加了如下著名的：

"plugins: [new webpack.DefinePlugin( 'global.GENTLY': false )],"

在 webpack 中无济于事

我提供的包 json/babelrc 和 web 包没有我上面引用的修改，所以你可以看到“基础”而没有尝试修复它失败 还提供带有错误的屏幕截图

提前致谢

https://imgur.com/a/8TT3v44 对于错误

这是在 babelrc 中

      
      "presets": [
        "@babel/preset-react",
        ["@babel/preset-env",  "modules": false ],
        ["@babel/preset-stage-0",  "decoratorsLegacy": true ]
      ],
      "env": 
        "development": 
          "compact": false
        ,
        "jest": 
          "presets": ["@babel/preset-env", "@babel/preset-react"]
        
      ,
      "plugins": [
        "@babel/plugin-proposal-export-default-from",
        [
          "react-intl",
          
            "messagesDir": "./extracted_messages/",
            "enforceDescriptions": true
          
        ]
      ]
    

and this is the webpack


const path = require('path')
const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const webpack = require('webpack')

const distDir = path.join(__dirname, '../dist')
const srcDir = path.join(__dirname, '../src')

module.exports = [

  
    name: 'client',
    target: 'web',
    mode: 'development',
    entry: `$srcDir/client.jsx`,
    output: 
      path: distDir,
      filename: 'client.js',
      publicPath: '/dist/'
    ,
    resolve: 
      extensions: ['.js', '.jsx', '.json'],
      alias: 
        config: path.join(__dirname, '../config'),
        utils: path.join(__dirname, '../src/utils'),
        toolbox: path.join(__dirname, '../src/components/toolbox')
      
    ,
    devtool: 'source-map',
    module: 
      rules: [
        
          test: /\.jsx?$/,
          exclude: /(node_modules\/)/,
          loader: 'babel-loader'
        ,
        
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            
              loader: 'css-loader',
              options: 
                sourceMap: true
              
            
          ]
        ,
        
          test: /\.(jpe?g|png|gif)$/,
          loader: 'file-loader',
          query:  name: 'assets/images/[name].[ext]' 
        ,
        
          test: /\.(woff2?|eot|ttf|otf)$/,
          loader: 'file-loader',
          query:  name: 'assets/fonts/[name].[ext]' 
        
      ]
    ,
    plugins: [
      new webpack.DefinePlugin( 'global.GENTLY': false ),
      new MiniCssExtractPlugin(
        filename: 'styles.css'
      ),
      new CopyPlugin([ from: `$srcDir/favicon.ico`, to: distDir ])]
  ,
  
    name: 'server',
    target: 'node',
    mode: 'development',
    entry: `$srcDir/server.jsx`,
    output: 
      path: distDir,
      filename: 'server.js',
      libraryTarget: 'commonjs2',
      publicPath: '/dist/'
    ,
    resolve: 
      extensions: ['.js', '.jsx', '.json'],
      alias: 
        config: path.join(__dirname, '../config'),
        utils: path.join(__dirname, '../src/utils'),
        toolbox: path.join(__dirname, '../src/components/toolbox'),
        inherits: 'inherits/inherits_browser.js',
        superagent: 'superagent/lib/client',
        emitter: 'component-emitter',
      
    ,
    module: 
      rules: [
        
          test: /\.jsx?$/,
          exclude: /(node_modules\/)/,
          loader: 'babel-loader'
        ,
        
          test: /\.css$/,
          use: [
            
              loader: 'isomorphic-style-loader'
            ,
            
              loader: 'css-loader',
              options: 
                sourceMap: true
              
            
          ]
        ,
        
          test: /\.(jpe?g|png|gif)$/,
          loader: 'file-loader',
          query:  name: 'assets/images/[name].[ext]' 
        ,
        
          test: /\.(woff2?|eot|ttf|otf)$/,
          loader: 'file-loader',
          query:  name: 'assets/fonts/[name].[ext]' 
        
      ]
    ,
    plugins: [
      new webpack.DefinePlugin( 'global.GENTLY': false ),
      new CopyPlugin([ from: `$srcDir/favicon.ico`, to: distDir ])]
  
]

【参考方案1】：

我在为我们的博客写作时遇到了这个问题。我们建议的解决方法是这样的；

function whatYouRunOnPageLoad() 
    if (typeof window !== undefined) 
        auth0.parseHash(... etc ...)
    

parseHash 需要 window，它不存在于您的渲染步骤中。 Auth0.js 无法从服务器端运行，这是当您尝试按原样呈现时“意外”发生的。

【讨论】：

嘿所以事情是我，从不调用 window ，我认为是 auth0 想要调用 window 但它不能所以我不确定我必须把window != undefined 以及我必须在其中执行的操作

你能提供一个你的仓库的链接吗？

不能这样做，存储库是私有的：/

在我的 Gatsby 示例中，我必须将 this.auth0.parseHash 包装在 typeof window !== undefined 中。虽然您可能不会直接使用它，但该方法会。

【参考方案2】：

通过以下方式解决窗口错误：

if(global.window)...

然后在不适当的时候不调用我正在使用的函数。

Require 不是通过以下方式解决的函数：

[new webpack.DefinePlugin( 'global.GENTLY': false )]

在插件的 webpack 配置中（dev AND prod，idk 为什么）+ 用 require 导入它而不是 import。

通过更改 bablerc 中预设的顺序解决了 Webpack 模块错误。

【讨论】：

该解决方案不如我在下面建议的那么强大。 Auth0.js 不能在发生在服务器端的渲染中运行。我们建议的解决方案就是我所建议的，使用和接受该解决方案可能会更好。

欢迎来到 SO。请校对并正确格式化您的帖子。谢谢！