多个错误 auth0 react apollo babel webpack

Question

当我想在我的项目上实施 auth0 时遇到了一些问题。每当我解决一个问题运行到另一个问题时，总是出现相同的 3 个错误 :

-require is not a function

-window is not defined

-missing class properties

我试过用 babelrc 来解决这个问题，改变预设的顺序

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

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

在 webpack 中无效

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

提前致谢

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 }])]
  }
]

Answer 1

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

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

parseHash 需要 window，它不作为渲染步骤的一部分存在。 Auth0.js 不能从服务器端运行，这就是 "accidentally" 当您尝试按照您的方式呈现它时发生的情况。

Answer 2

Window 错误解决方法：

if(global.window){...}

后来只是不调用我在不适当的时候使用的函数。

Require 不是一个用以下方法解决的函数：

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

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

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

多个错误 auth0 react apollo babel webpack

multiple errors auth0 react apollo babel webpack

javascript

express

apollo

reactjs

auth0