[Bug]: validateOptions is not a function error

[zahrat]

💻

• Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

const babelLoaderConfiguration = {
  test: /\.(js|jsx)$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(__dirname, 'index.web.js'), // Entry to your application
    path.resolve(__dirname, 'App.web.js'), // Change this to your main App file
    path.resolve(__dirname, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
    path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
    path.resolve(appDirectory, 'node_modules/native-base/node_modules/react-native-vector-icons'),
    path.resolve(appDirectory, 'node_modules/react-native/Libraries/Components/TextInput/TextInputState.js'),
    
    ...compileNodeModules,
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets: [
        "@babel/preset-env"
    ],
      plugins: ['react-native-web'],
    },
  },
};

Configuration file name

No response

Configuration

webpack.config.js file content:

const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const appDirectory = path.resolve(__dirname);
const {presets} = require(`${appDirectory}/babel.config.js`);

const compileNodeModules = [
  'react-native-gesture-handler','react-native-video','react-native-typewriter','rn-persian-date-picker','react-native-stars','react-native-screens','react-native-ratings','react-native-picker-select','react-native-maps','react-native-keyboard-aware-scroll-view','react-native-ionicons','react-native-image-pan-zoom','react-native-elements','react-native-easy-grid','react-native-drawer','react-native-best-viewpager','native-base/node_modules/@codler/react-native-keyboard-aware-scroll-view','native-base-shoutem-theme','@react-native-picker','@react-native-community'
].map((moduleName) => path.resolve(appDirectory, `node_modules/${moduleName}`));

const babelLoaderConfiguration = {
  test: /\.(js|jsx)$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(__dirname, 'index.web.js'), // Entry to your application
    path.resolve(__dirname, 'App.web.js'), // Change this to your main App file
    path.resolve(__dirname, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
    path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
    path.resolve(appDirectory, 'node_modules/native-base/node_modules/react-native-vector-icons'),
    path.resolve(appDirectory, 'node_modules/react-native/Libraries/Components/TextInput/TextInputState.js'),
    
    ...compileNodeModules,
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets: [
        "@babel/preset-env"
    ],
      plugins: ['react-native-web'],
    },
  },
};

const svgLoaderConfiguration = {
  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
    },
  ],
};

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      limit:false
    },
  },
};

module.exports = {
  entry: {
    app: path.join(__dirname, 'index.web.js'),
  },
  output: {
    path: path.resolve(appDirectory, 'dist'),
    publicPath: '/',
    filename: 'rnw_blogpost.bundle.js',
  },
  resolve: {
    extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.web.js', '.js'],
    alias: {
      'react-native$': 'react-native-web',
    },
  },
  externals: {
        "react-native": true,
    },
  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration,
      svgLoaderConfiguration,
      {
                test: /\.(mp3|png|svg|jpg|gif)$/,
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]'
                },
                include: [
                  path.resolve(appDirectory,'node_modules/react-native-video'),
                  
                  ...compileNodeModules,
                ]
            }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'index.html'),
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      // See: https://github.com/necolas/react-native-web/issues/349
      __DEV__: JSON.stringify(true),
    }),
  ]
};

Current and expected behavior

I am using babel-loader with webpack in react-native . Now when I want to run the project with npm run web I got the below error:

`ERROR in ./index.web.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: validateOptions is not a function
    at Object.<anonymous> (D:\Myprj\node_modules\babel-loader\lib\index.js:72:5)2:5)`

Babel-loader configuration is in webpack.config.js which I put it in "Input code" section.

Environment

System:
OS: Windows 10 10.0.10586
Binaries:
Node: 14.16.1 - C:\Program Files (x86)\nodejs\node.EXE
Yarn: 1.19.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 7.11.2 - C:\Program Files (x86)\nodejs\npm.CMD
npmPackages:
@babel/core: ^7.7.2 => 7.14.0
@babel/runtime: ^7.7.2 => 7.14.0
babel-jest: ^24.9.0 => 24.9.0
babel-loader: ^8.2.2 => 8.2.2
babel-plugin-react-native-web: ^0.16.2 => 0.16.2
eslint: ^6.6.0 => 6.8.0
jest: ^24.9.0 => 24.9.0
metro-react-native-babel-preset: ^0.57.0 => 0.57.0
react-native: ^0.64.1 => 0.64.1
webpack: ^5.36.2 => 5.36.2

Possible solution

No response

Additional context

No response

[babel-bot]

Hey @zahrat! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[JLHwung]

Can you share the complete error trace? There should be more error logs coming after ERROR in ./index.web.js Module build failed (from ./node_modules/babel-loader/lib/index.js):

Can you share the ./index.web.js? If it is a private project, consider share a reproducible example.

[zahrat]

Can you share the complete error trace? There should be more error logs coming after ERROR in ./index.web.js Module build failed (from ./node_modules/babel-loader/lib/index.js):

Can you share the ./index.web.js? If it is a private project, consider share a reproducible example.

index.web.js file:

import RootStack from "./src/Route/LoginNavigation";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducers from "./src/Reducers";
import { I18nManager } from "react-native";
import { gestureHandlerRootHOC } from "react-native-gesture-handler";
I18nManager.allowRTL(false);
const appName = "testapp";
const store = createStore(reducers);
const AppContainer = createAppContainer(RootStack);
const MyContainer = () => (
  <Provider store={store}>
    <AppContainer uriPrefix={"testapp://"} />
  </Provider>
);
AppRegistry.registerComponent(appName, () => MyContainer);
AppRegistry.runApplication(appName, {
  // Mount the react-native app in the "app-root" div of index.html
  rootTag: document.getElementById("app-root"),
});

and the complete error is :

ERROR in ./index.web.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: validateOptions is not a function
    at Object.<anonymous> (D:\Myprj\node_modules\babel-loader\lib\index.js:71:5)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (D:\Myprj\node_modules\babel-loader\lib\index.js:3:103)
    at _next (D:\Myprj\node_modules\babel-loader\lib\index.js:5:194)
    at D:\Myprj\node_modules\babel-loader\lib\index.js:5:364
    at new Promise (<anonymous>)
    at Object.<anonymous> (D:\Myprj\node_modules\babel-loader\lib\index.js:5:97)
    at Object._loader (D:\Myprj\node_modules\babel-loader\lib\index.js:235:18)
    at Object.loader (D:\Myprj\node_modules\babel-loader\lib\index.js:64:18)
    at Object.<anonymous> (D:\Myprj\node_modules\babel-loader\lib\index.js:59:12)

webpack 5.37.0 compiled with 1 error in 2281 ms
i ｢wdm｣: Failed to compile.

[nicolo-ribaudo]

@zahrat The problem is that for some reason this validateOptions is not a function:

babel-loader/src/index.js

Line 30 in f3538d0

const validateOptions = require("schema-utils");

Could you try these things?

1. Add console.log(typeof validateOptions, validateOptoins) in node_modules/babel-loader/lib/index.js right after

   babel-loader/src/index.js

   Line 30 in f3538d0

   const validateOptions = require("schema-utils");

   (Line 43 in babel-loader 8.2.2)
2. Add console.log(typeof validateOptions, validateOptoins) right before

   babel-loader/src/index.js

   Line 60 in f3538d0

   validateOptions(schema, loaderOptions, {

   (Line 71 in babel-loader 8.2.2)
3. Check the version in node_modules/babel-loader/node_modules/schema-utils/package.json, or in node_modules/schema-utils/package.json

[nicolo-ribaudo]

Oh also try deleting node_modules and re-running npm install/yarn install. Maybe it's a package manager bug that for some reason installed schema-utils v3.

[dharmveer18]

did anyone find solution for it, I am also facing same issue

[spidgorny]

yarn

has helped me (surprise).

[Isai734]

I had the same problem but I solved it by removing the node_modules directory and running yarn install again

[simonjoom]

please need to change the code babel-loader, the updated version of schema-utils break (2020)

here the code in the code to patch correctly babel-loader
babel-loader/lib/index.js

change:
const validateOptions = require("schema-utils");

to
const validateOptions = require("schema-utils").validate;

refactor.
webpack/schema-utils#113

[alexander-akait]

@nicolo-ribaudo yep, it is bug with package manager, removing node_modules and lock file solve the problem