Version change from 9.4.4 to 9.5.2 breaking the build.

[mishsom]

Hey Team,
When I upgrade the next dependency from 9.4.4 to 9.5.2 in my production app, the build fails with the following error.

➜ HCS-Hubble-Mobile-Web git:(release) ✗ npm run build

with-react-native-web@ build /Users/mmt6465/MMT_CODEBASE/HCS-Hubble-Mobile-Web
next build

warn - You have enabled experimental feature(s).
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

Build error occurred
TypeError: Cannot read property 'concat' of undefined
at Object.webpack (/Users/mmt6465/MMT_CODEBASE/HCS-Hubble-Mobile-Web/node_modules/next-transpile-modules/src/next-transpile-modules.js:102:73)
at Object.webpack (/Users/mmt6465/MMT_CODEBASE/HCS-Hubble-Mobile-Web/node_modules/next-images/index.js:36:27)
at getBaseWebpackConfig (/Users/mmt6465/MMT_CODEBASE/HCS-Hubble-Mobile-Web/node_modules/next/dist/build/webpack-config.js:122:489)
info - Creating an optimized production build .npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! with-react-native-web@ build: next build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the with-react-native-web@ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/mmt6465/.npm/_logs/2020-08-17T22_08_52_324Z-debug.log

next.config.js

const path = require("path");
const imageResolutionFallbackTransformer = path.resolve(
__dirname,
"./web/config/ImageResolutionFallbackTransformer.js"
);
const enableOfflinePlugin = false;
const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");

// transpile all rn libraries as they could be in ESM
const withTM = require("next-transpile-modules")([
"react-native-google-analytics",
"react-native-web",
"react-native-linear-gradient",
"react-native-animatable",
"react-native-shimmer-placeholder",
"react-native-slider",
"recyclerlistview/sticky",
"recyclerlistview"
]);
const isProd = process.env.NODE_ENV === 'production';

module.exports = withPlugins([withTM, withImages], {
assetPrefix: isProd ? '//prodCDNlink here' : '',
experimental: {
basePath: '/basePath'
},
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
const DEV = dev;
const OFFLINE = enableOfflinePlugin && !DEV;
config.plugins.push(
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
DEV,
OFFLINE,
})
);
config.module.rules.push({
test: /.ttf$/,
loader: "url-loader",
include: path.resolve(
__dirname,
"./node_modules/react-native-vector-icons"
),
});
config.resolve.extensions = [
".web.js",
".web.ts",
".web.tsx",
".js",
".json",
".tsx",
".ts",
...config.resolve.extensions,
];
return config;
},
});

babel.config.js

const path = require('path');

const isProd = process.env.NODE_ENV === 'production';
const commonPlugins = [
['react-native-web', { commonjs: true }],
[
"module-resolver",
{
root: ["./"],
alias: {
src: "./Mobile-mmt-react-native/src",
'@rn': "./Mobile-mmt-react-native/src",
'lottie-react-native': './web/components/LottieWebView.js',
'react-native-linear-gradient': './web/components/linear-gradient/index.js',
"recyclerlistview": 'recyclerlistview/web',
'WebView': 'react-native-web-webview',
'react-native-webview': './web/components/IFrameWebView.js',
'react-native-checkbox': './web/components/react-native-checkbox/ReactNativeCheckbox.js',
'react-native-router-flux': './web/routerFluxMock.js',
'react-native-router-flux/index': './web/routerFluxMock.js',
'react-native-keyboard-aware-view': './web/components/KeyboardAwareView.js',
'react-native-slider': './web/components/Slider.js'
},
},
],
["@babel/plugin-proposal-decorators", { "legacy": true }]
];
if(isProd) {
module.exports = {
presets: ['next/babel', "@babel/preset-flow"],
plugins: [...commonPlugins,
"transform-remove-console"
],
};
} else {
module.exports = {
presets: ['next/babel', "@babel/preset-flow"],
plugins: commonPlugins
};
}

package.json
{
"name": "with-react-native-web",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@babel/plugin-proposal-decorators": "7.10.3",
"add": "2.0.6",
"connect-initial-props": "1.0.0",
"fecha": "4.2.0",
"next": "9.5.2", //changed this from 9.4.4
"next-redux-wrapper": "6.0.2",
"nookies": "^2.3.2",
"react": "16.13.1",
"react-cookies": "0.1.1",
"react-dom": "16.13.1",
"react-native-animatable": "1.3.3",
"react-native-shimmer-placeholder": "1.0.36",
"react-native-web": "0.13.4",
"react-redux": "7.2.0",
"react-router-dom": "5.2.0",
"recyclerlistview": "3.0.1-beta.1",
"redux": "4.0.5",
"redux-devtools-extension": "2.13.8",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0",
"yarn": "1.22.4"
},
"devDependencies": {
"@babel/preset-flow": "7.10.1",
"@types/node": "14.0.13",
"@types/react": "16.9.35",
"babel-plugin-module-resolver": "4.0.0",
"babel-plugin-react-native-web": "0.11.7",
"babel-plugin-transform-remove-console": "^6.9.4",
"next-compose-plugins": "2.2.0",
"next-images": "1.4.0",
"next-transpile-modules": "3.3.0",
"resize-observer-polyfill": "^1.5.1",
"tar": "6.0.2",
"typescript": "3.9.5",
"yargs": "15.4.1"
}
}

[matamatanot]

@mishsom

The experiment flag is not required so you have to Migrate to the stable release consists of moving the feature out of experimental in next.config.js.

experimental: {
  basePath: '/basePath'
},

Like this.
#9081 (comment)

[mishsom]

@matamatanot
...
...
module.exports = withPlugins([withTM, withImages], {
assetPrefix: isProd ? '//prodCDNlink here' : '',
basePath: '/basePath',
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
const DEV = dev;
const OFFLINE = enableOfflinePlugin && !DEV;
config.plugins.push(
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
DEV,
OFFLINE,
})
);
...
...

> Build error occurred TypeError: Cannot read property 'concat' of undefined at Object.webpack (/Users/mmt6465/MMT_CODEBASE/HCS-Hubble-Mobile-Web/node_modules/next-transpile-modules/src/next-transpile-modules.js:102:73) at Object.webpack (/Users/mmt6465/MMT_CODEBASE/HCS-Hubble-Mobile-Web/node_modules/next-images/index.js:36:27) at getBaseWebpackConfig (/Users/mmt6465/MMT_CODEBASE/HCS-Hubble-Mobile-Web/node_modules/next/dist/build/webpack-config.js:122:489) info - Creating an optimized production build .npm ERR! code ELIFECYCLE

This is not working for me, is there some documentation I can refer to, or some example?

[mishsom]

@matamatanot
I don't know how come it's going inside the following if block
const nextCssLoader = nextCssLoaders.oneOf.find(
(rule) => rule.sideEffects === false && regexEqual(rule.test, /.module.css$/)
);
if (nextCssLoader) {
nextCssLoader.issuer.include = nextCssLoader.issuer.include.concat(includes); <-- BREAKING HERE
nextCssLoader.issuer.exclude = excludes;
}

I don't have any such config as you can see from my next.config.js