[MUI-Datagrid] Uncaught ReferenceError: returntrue is not defined while using webpack

[nikossoftwaredev]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I am using

• "@material-ui/data-grid": "^4.0.0-alpha.33",
• "@material-ui/core": "4.12.0"
• "react": "17.0.0"

Whenever I go to a page that renders Datagrid i get this error

Expected behavior 🤔

Not to crash the page

Steps to reproduce 🕹

my webpack config
webpack version ^5.72.0

`

const ForkTsCheckerNotifierWebpackPlugin = require('fork-ts-checker-notifier-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const dotenv = require('dotenv');
const webpack = require('webpack');
const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

dotenv.config();

// style files regexes
const cssRegex = /.css$/;
const sassRegex = /.(scss|sass)$/;

const smp = new SpeedMeasurePlugin();

module.exports = (env, argv) => {
const isDev = argv.mode === 'development';
const isProd = argv.mode === 'production';

// common function to get style loaders
const getStyleLoaders = () => {
const loaders = [
isDev && require.resolve('style-loader'),
isProd && {
loader: MiniCssExtractPlugin.loader,
// css is located in static/css, use '../../' to locate index.html folder
// in production paths.publicUrlOrPath can be a relative path
options: { publicPath: '../../' }
},
{
loader: require.resolve('css-loader'),
options: {
url: false
}
}
// {
// loader: 'postcss-loader',
// options: {
// postcssOptions: {
// plugins: [['postcss-preset-env']]
// }
// }
// }
].filter(Boolean);

return loaders;

};

const devPlugins = [
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env)
}),
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
}),
new HtmlWebpackPlugin({
inject: true,
template: './public/index.html',
filename: './index.html',
favicon: './public/favicon.ico'
}),
new ForkTsCheckerWebpackPlugin({
formatter: 'codeframe'
}),
new ForkTsCheckerNotifierWebpackPlugin({ title: 'TypeScript', excludeWarnings: false }),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css'
})
];

const prodPlugins = [
new CopyPlugin({
patterns: [{ from: path.resolve(__dirname, 'public/'), to: './build' }]
}),
new CompressionPlugin(),
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env)
}),
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
}),
new webpack.optimize.SplitChunksPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new HtmlWebpackPlugin({
inject: true,
template: './public/index.html',
filename: './index.html',
favicon: './public/favicon.ico'
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css'
})
];

const devServer = {
open: true,
historyApiFallback: true,
compress: true,
port: 3000,
liveReload: true,
watchFiles: ['src/**/*'],
client: {
overlay: true
},
static: {
directory: path.join(__dirname, 'public')
}
};

return smp.wrap({
context: process.cwd(), // to automatically find tsconfig.json
plugins: isDev ? devPlugins : prodPlugins,
...(isDev ? { devtool: 'inline-source-map' } : {}),
...(isDev ? { devServer } : {}),
entry: './src/index.tsx',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
publicPath: '/'
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
include: path.resolve(__dirname, 'src'),
use: {
loader: 'babel-loader'
}
},
{
test: /.tsx?$/,
exclude: /node_modules/,
include: path.resolve(__dirname, 'src'),
use: [{ loader: 'ts-loader', options: { transpileOnly: true } }]
},
{
test: cssRegex,
use: getStyleLoaders({
importLoaders: 1
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true
},
{
test: /.s[ac]ss$/i,
use: [
// fallback to style-loader in development
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
test: /.(png|jpe?g|gif|svg)$/i,
exclude: [/.(js|mjs|jsx|ts|tsx)$/, /.html$/, /.json$/],
use: [
{
loader: 'file-loader'
},
{
loader: 'url-loader'
}
]
},
{
test: /.m?js/,
resolve: {
fullySpecified: false
}
}
]
},
resolve: {
extensions: ['.mjs', '.tsx', '.ts', '.js', '.jsx', '.css', '.scss', '.json'],
modules: [path.resolve(__dirname, './src'), 'node_modules'],
alias: {
'@crema': path.resolve(__dirname, './src/@crema'),
api: path.resolve(__dirname, './src/api'),
modules: path.resolve(__dirname, './src/modules'),
shared: path.resolve(__dirname, './src/shared'),
styles: path.resolve(__dirname, './src/styles'),
types: path.resolve(__dirname, './src/types')
},
// Mqtt package uses buffer, wee need to see if we can change it
fallback: { buffer: require.resolve('buffer') }
}
});
};
`

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID 💳 (optional)

No response

[fsmikedev]

Hi @nikossoftwaredev, I'm faced with the same issue, any ideas?

[ryanseipp]

Best I can tell, it occurs at dist/index-esm.js:16:131707:
as=(e,t)=>{var r,o;return"v5"===mr()? ... : ...
It does seem that backing off to webpack v5.70 is working though

EDIT:
package versions:

"webpack": "5.70.0",
"react": "^17.0.0",
"@mui/x-data-grid": "^4.0.0",
"@material-ui/core": "^4.12.3",

[cherniavskii]

Hey @nikossoftwaredev
Did you try using more recent versions of the package? Latest release is 5.8.0 while you're using v4 alpha

[nikossoftwaredev]

@ryanseipp

Rolled back to 5.8.0 and it works! Thanks

[robolivable]

Is there a workaround for this that doesn't involve rolling back webpack? It sucks that I can't use data grid if I'm on major version 4 of MUI :/

[cherniavskii]

Hey @robolivable
As far as I understand, this issue is related to webpack and there's no action on MUI X side that we can take.
If you believe there's an issue that needs to be addressed in the data grid - feel free to open a new issue and provide a minimal example to reproduce the issue