HookWebpackError while running with NextJS starter using npm

[NishchithRao]

Describe the bug

Running a NextJS app with the nativebase starter using npm gives the following error: Internal Server Error on the Browser and HookWebpackError: Cannot read property 'replace' of undefined on the Terminal. The app runs fine using yarn.

To Reproduce

Steps to reproduce the behaviour:

1. create a Project with nativebase and NextJS using the command: npx create-next-app -example https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base
2. Give your project a name when prompted
3. After installation run the command npm run dev
4. The Browser shows Internal Server Error while the CLI shows HookWebpackError: Cannot read property 'replace' of undefined

Expected behaviour

The App should run properly on the browser showing the homepage.

Screenshots

Platform

• NativeBase version 3.2.2
• Device: MacBook Pro (16-inch, i7, 2019)
• OS: MacOS Big Sur 11.4
• Browser: Chrome
• Browser version: 96.0.4664.110
• node : 14.17.5
• npm: 6.14.14

Additional information

1. The project runs successfully using yarn
2. If yarn is installed on the system, yarn takes over the installation even when npx command is used for installation and therefore it works fine
3. After installation using yarn, npm commands run perfectly
4. Deleting the yarn.lock and node-modules and reinstalling the packages gives the error described above
5. The issue seems to be coming from @expo/next-adapter package

[loveholly]

Same here with yarn

[Viraj-10]

Hi @NishchithRao, Thanks for reporting the issue. we will look into it .

[fedarenchyk]

Hey @Viraj-10 any news on that?

[Viraj-10]

Hi @fedarenchyk, We are working on npm template, meanwhile you can use yarn for next.

[gern132]

Hi @Viraj-10 at this time we use yarn for next and we have problem after we connect native-base to our next project, any ideas?

[Viraj-10]

Hi @NishchithRao, @fedarenchyk , @gern132 for now check if following works for you.

• keep node version 16.13
• update NativeBase to latest v3.3.3.
• also follow all the steps mentioned in the docs.
• after doing all the steps run yarn once again.
• then run yarn dev We are fixing all the possible scenario ASAP for next it's high priority.

[gern132]

@Viraj-10 we solved this problem, by adding {webpack5: true} to our next.config, but we got another :(

[fedarenchyk]

@Viraj-10 any ideas on ^that^ ?

[Viraj-10]

Hi @gern132 @fengyouchao , Simply adding React to the component worked for me. import React from 'react';

_app.js

import React from 'react';
import '../styles/globals.css';
import { NativeBaseProvider } from 'native-base';

function MyApp({ Component, pageProps }) {
  return (
    <NativeBaseProvider>
      <Component {...pageProps} />
    </NativeBaseProvider>
  );
}

export default MyApp;

next.config.js

const { withExpo } = require('@expo/next-adapter');
const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')([
  'native-base',
  'react-native-svg',
  'react-native-safe-area-context',
  '@react-aria/visually-hidden',
  '@react-native-aria/button',
  '@react-native-aria/checkbox',
  '@react-native-aria/combobox',
  '@react-native-aria/focus',
  '@react-native-aria/interactions',
  '@react-native-aria/listbox',
  '@react-native-aria/overlays',
  '@react-native-aria/radio',
  '@react-native-aria/slider',
  '@react-native-aria/tabs',
  '@react-native-aria/utils',
  '@react-stately/combobox',
  '@react-stately/radio',
]);

module.exports = withPlugins(
  [withTM, [withExpo, { projectRoot: __dirname }], { webpack5: true }],
  {
    webpack: config => {
      config.resolve.alias = {
        ...(config.resolve.alias || {}),
        // Transform all direct `react-native` imports to `react-native-web`
        'react-native$': 'react-native-web',
      };
      config.resolve.extensions = [
        '.web.js',
        '.web.ts',
        '.web.tsx',
        ...config.resolve.extensions,
      ];
      return config;
    },
  }
);

[fedarenchyk]

@Viraj-10 I'm trying to setup nextjs+nativebase in monorepo, my next.config.js is

`const withImages = require("next-images");

const withFonts = require("next-fonts"); const withTM = require("next-transpile-modules")([ "react-native-web", "native-base", ]); const { withExpo } = require("@expo/next-adapter");

module.exports = withTM( withExpo( withImages( withFonts({ typescript: { ignoreBuildErrors: true, }, experimental: { externalDir: true, },

    images: {
      disableStaticImages: true,
    },
    webpack: (config, options) => {
      config.module.rules.push({
        test: /\.mobile.(ts|tsx)$/,
        loader: "ignore-loader",
      });

      if (options.isServer) {
        config.externals = [
          "react",
          "react-native-web",
          ...config.externals,
        ];
      }
      config.resolve.alias["react"] = path.resolve(
        __dirname,
        ".",
        "node_modules",
        "react"
      );
      config.resolve.alias["react-dom"] = path.resolve(
        __dirname,
        ".",
        "node_modules",
        "react-dom"
      );
      config.resolve.alias["react-native-web"] = path.resolve(
        __dirname,
        ".",
        "node_modules",
        "react-native-web"
      );

      return config;
    },
  })
)

) );`

and I'm getting an error like

Any thoughts on what is wrong?

[danbim]

I have exactly the same issue, my setup is (almost) identical to @Viraj-10

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[prashantadhav]

I am getting this error while running nextjs project in production mode