Validation works in code sandbox but not when running locally

[juliushuck]

Support plan

• is this issue currently blocking your project? (yes/no): yes
• is this issue affecting a production system? (yes/no): no

Context

• node version: v14.15.5
• module version with issue: 17.4.0
• last module version without issue: idk
• environment (e.g. node, browser, native): browser
• used with (e.g. hapi application, another framework, standalone, ...): "react-hook-form": "^6.15.4"
• any other relevant information:

What are you trying to achieve or the steps to reproduce?

• Joi validation works in code sandbox but not when running locally
• And no data is displayed when I click on the submit button
• In the code sandbox it works like I expect it

1. Go to https://codesandbox.io/s/react-hook-form-joiresolver-v6-yejqe?file=/src/index.js
2. Download the files
3. Run "npm i" in the folder
4. Start with "start" script

What was the result you got?

Screen.Recording.2021-02-25.at.02.25.56.mov

What result did you expect?

Validation like in the code sandbox, username display in the alert

I firstly opened this issue on the react-hook-form repo (react-hook-form/react-hook-form#4278), but they think it is a Joi issue.

[Marsup]

Something in your build process seems to be breaking it, the transformed requires seem to yield undefined for a few of them, I have no idea why.

[juliushuck]

I mean in the codesandbox it works perfectly fine, as I want it (The codesandbox is an official example from react-hook-forms on how to integrate joi). And I see that the sandbox specifies exact versions for the packages. So when I download it and execute it, i expect it work, right? Have you tried to run it locally? Because the guy that responded to me in the issue i created on react-hook-forms, had the same problem, when running local.

[Marsup]

I did try it locally, and I get that error TypeError: can't access property "defaults", i is undefined, which is something I don't get when I run the original build. Looking at the source code that's being exposed for joi, there's a clear transformation of the library, and it's failing to require some necessary files. I don't know what react-scripts does that would break webpack's requires but it does.

[Marsup]

This is where my analysis lead me so far:
Regenerator (which is NOT in the original build) is shadowing the variable we need, explaining the crash.

[juliushuck]

Hi, is there something i can do now, to make it work for me? Maybe downgrade to another version or so?

[Marsup]

Upgrading to CRA 4 seems to have fixed the issue for me, I have no other solution for your current setup.

[juliushuck]

Sorry, but what is CRA? create react app?

[Marsup]

Yes, that's what you used, right? Updating the react-scripts package to the latest version works for me at least, I'm not sure if it's the only thing you need to do though.

[juliushuck]

Yes, I created the project with it, but I use webpack for the build and a web pack plugin for the dev server in my real project. The codebox sample is not by me.

package.json

{
  "name": "bujus-school-web-app",
  "version": "0.0.0",
  "scripts": {
    "build-production": "webpack --mode production",
    "fix-code": "prettier --write \"./**/*.{js,jsx}\" && eslint --fix --ext .js,.jsx .",
    "start-development": "webpack --env serve --mode development"
  },
  "dependencies": {
    "@hookform/resolvers": "^1.3.5",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "axios": "^0.21.1",
    "clsx": "^1.1.1",
    "connected-react-router": "^6.9.1",
    "history": "^4.10.1",
    "immer": "^8.0.1",
    "joi": "^17.4.0",
    "joi-password-complexity": "^5.1.0",
    "jwt-decode": "^3.1.2",
    "notistack": "^1.0.5",
    "path": "^0.12.7",
    "prop-types": "^15.7.2",
    "query-string": "^6.14.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-hook-form": "^6.15.4",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-immer": "^1.0.5",
    "redux-logger": "^3.0.6",
    "url-join": "^4.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-proposal-decorators": "^7.13.5",
    "@babel/plugin-proposal-do-expressions": "^7.12.13",
    "@babel/plugin-proposal-export-default-from": "^7.12.13",
    "@babel/plugin-proposal-export-namespace-from": "^7.12.13",
    "@babel/plugin-proposal-function-bind": "^7.12.13",
    "@babel/plugin-proposal-function-sent": "^7.12.13",
    "@babel/plugin-proposal-json-strings": "^7.13.8",
    "@babel/plugin-proposal-logical-assignment-operators": "^7.13.8",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
    "@babel/plugin-proposal-numeric-separator": "^7.12.13",
    "@babel/plugin-proposal-optional-chaining": "^7.13.8",
    "@babel/plugin-proposal-pipeline-operator": "^7.12.13",
    "@babel/plugin-proposal-throw-expressions": "^7.12.13",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-syntax-import-meta": "^7.10.4",
    "@babel/preset-env": "^7.13.9",
    "@babel/preset-react": "^7.12.13",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.2.2",
    "babel-preset-env": "^1.7.0",
    "copy-webpack-plugin": "^7.0.0",
    "eslint": "^7.21.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-import-resolver-webpack": "^0.13.0",
    "eslint-plugin-html": "^6.1.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-json-format": "^2.0.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-ordered-imports": "^0.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.2.0",
    "prettier": "^2.2.1",
    "react-refresh": "^0.9.0",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-plugin-serve": "^1.3.0"
  }
}

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const { WebpackPluginServe } = require("webpack-plugin-serve");

const webpackConfig = (env) => {
    const serve = env !== undefined && env.serve;
    return {
        entry: [path.resolve(__dirname, "./src/index.jsx"), serve && "webpack-plugin-serve/client"].filter(Boolean),
        externals: {
            saslprep: "require('saslprep')",
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: require.resolve("babel-loader"),
                        options: {
                            plugins: [serve && require.resolve("react-refresh/babel")].filter(Boolean),
                        },
                    },
                },
            ],
        },
        // node: {
        //   __dirname: true, // Needed for google cloud logging winston in bujus-api
        // },
        output: {
            filename: "app.js",
            path: path.resolve(__dirname, "./dist"),
            publicPath: "/", // Needed for connected-react-router to work with nested routes
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: `public/index.html`,
                favicon: `public/favicon.png`,
            }),
            serve &&
                new ReactRefreshWebpackPlugin({
                    overlay: { sockIntegration: "wps" },
                }),
            serve &&
                new WebpackPluginServe({
                    historyFallback: true,
                    hmr: true,
                    host: "localhost",
                    liveReload: true,
                    open: true,
                    port: 4001,
                    static: [path.resolve(__dirname, "./dist")],
                }),
        ].filter(Boolean),
        resolve: {
            extensions: [".js", ".json", ".jsx"],
            modules: [path.resolve(__dirname, "./src"), "node_modules"],
        },
        watch: serve,
    };
};

module.exports = webpackConfig;

[Marsup]

I used your github repo to reproduce the bug, not codesandbox, I'm confused as to where your problem should be fixed.

[juliushuck]

I have a larger project where I have the problem. Then I searched for it online and found the official example. But that did not work too. I cloned that code sandbox sample to my own Git Hub because of testing. In my real project, I m not using react script. I just used CRA for the first setup and then switched to webpack. Sorry for the confusion

[juliushuck]

Solved with react hook form 7 and resolvers 2