TypeError: (0 , _typeof2.default) is not a function

[dkaus1]

Hi Team,

We are using "mini-css-extract-plugin": "2.2.0", "webpack": "^5.42.0" which is creating css build as expected on Mac machine however when creating build on window 10 machine with same dependencies we are getting below error using node version 10.15.3

TypeError: (0 , _typeof2.default) is not a function

Please help what could be root cause of this.

[vankop]

Could you reduce this to small reproducible repo?

[dkaus1]

Thanks @vankop for picking it up. I'm sorry that won't be feasible due to complex setup however I can share detailled error if that can help to point out root cause

TypeError: (0 , _typeof2.default) is not a function at Object../node_modules/core-js-pure/internals/global.js (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:2846:194) at __webpack_require__ (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:7268:42) at Object../node_modules/core-js-pure/modules/es.array.concat.js (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:4747:14) at __webpack_require__ (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:7268:42) at Object../node_modules/core-js-pure/es/symbol/index.js (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:1011:1) at __webpack_require__ (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:7268:42) at Object../node_modules/core-js-pure/stable/symbol/index.js (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:6975:14) at __webpack_require__ (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:7268:42) at Object../node_modules/core-js-pure/actual/symbol/index.js (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:407:14) at __webpack_require__ (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:7268:42)

In main.scss I removed all code and kept it simple to get to root cause however it is still same

.class { border: 1px; }

[alexander-akait]

Why you polyfill Node.js runtime?

[dkaus1]

Why you polyfill Node.js runtime?

@alexander-akait - After removing this dependency as well doesn't make any difference. Still same error

ERROR in ./app/sass/**/main.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): TypeError: (0 , _typeof2.default) is not a function at Object../node_modules/core-js-pure/internals/global.js (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:2846:194) at __webpack_require__ (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:7269:42) at Object../node_modules/core-js-pure/modules/es.array.concat.js (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:4747:14) at __webpack_require__ (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:7269:42) at Object../node_modules/core-js-pure/es/symbol/index.js (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:1011:1) at __webpack_require__ (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:7269:42) at Object../node_modules/core-js-pure/stable/symbol/index.js (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:6976:14) at __webpack_require__ (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:7269:42) at Object../node_modules/core-js-pure/actual/symbol/index.js (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:407:14) at __webpack_require__ (C:\Projects\**\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].use[1]!C:\Projects\**\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!C:\Projects\**\app\sass\**\main.scss:7269:42)

Any pointers ?

[dkaus1]

Can anyone help me with resolution please? :(

[alexander-akait]

There is answer - do not polyfill Node.js runtime, your rewrite module exports and looks like have wrong options for it

[dkaus1]

Hi @alexander-akait - After removing polyfill node runtime as well, I'm getting same error. When we say rewrite module exports. I didn't get that. Can you share some example that will be much appreciated? Wondering how come it works seamless on Mac machine Below is passed to webpack plugin configuration [ // new NodePolyfillPlugin(), new webpack.HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin(), new CleanTerminalPlugin(), new MiniCssExtractPlugin({ filename: 'css/main.css', }), CopyWebpack, new DashboardPlugin(), ];

[alexander-akait]

If you fill out an issue template and show how you run webpack I try to help, that is why we ask it, otherwise nobody can help

[dkaus1]

Sure @alexander-akait . Here below is our webpack config

function configSetup(BRAND) { return { devtool: 'source-map', entry: ['webpack-hot-middleware/client', ${APP_DIR}/journeys/myJourney/app.mount.jsx, ${APP_DIR}/sass/${BRAND}/main.scss], mode: 'development', module: { rules: Object.values(loaders), }, name: BRAND, output: { path: ${BUILD_DIR}/${BRAND}, publicPath: /${BRAND}/`, filename: bundleFilename, chunkFilename, }, optimization: { splitChunks: { cacheGroups: { commons: { test: /[\/]node_modules[\/]/, name: 'vendor', chunks: 'all', }, }, }, }, plugins: plugins.createDevPlugins(BRAND), resolve: { extensions: ['*', '.js', '.jsx'], alias: { react: path.resolve('./node_modules/react'), 'npm/package': path.resolve('./npm/package'), }, fallback: { util: require.resolve('util/'), 'crypto': require.resolve('crypto-browserify'), 'stream': require.resolve('stream-browserify') } }, }; }

const configArray = [];

Object.keys(common.brandProperties).forEach((brand) => configArray.push(configSetup(brand)));

configArray[0].devServer = { contentBase: BUILD_DIR, port: 9000, before(app) { apiMocker(app, API_DIR); } };

module.exports = configArray;

function createDevPlugins(BRAND) { return [ // new NodePolyfillPlugin(), new webpack.HotModuleReplacementPlugin(), // new ReactRefreshWebpackPlugin(), new CleanTerminalPlugin(), HTMLtemplate(BRAND, 'version.html', 'version.ejs', './', '0'), HTMLtemplate(BRAND, 'myJourney.html', 'myJourney.ejs', './', '0'), new MiniCssExtractPlugin(), CopyWebpack, new DashboardPlugin(), ]; }`

[alexander-akait]

How you run webpack? What is command?

[dkaus1]

"start": "set NODE_OPTIONS=--max-old-space-size=6144 && webpack serve -c webpack/webpack.config.dev.js --hot --inline" within package.json and then run it as npm start from cli

[alexander-akait]

The main problem is core-js-pure/internals/global.js, something in your env still inject core-js polyfill in runtime

[dkaus1]

Ahh, ok. Shall I share my package.json to identify which dependency is injecting core-js polyfill in runtime?

I can see as below +-- @pmmmwh/[email protected] | -- [email protected] -- [email protected] -- @testing-library/[email protected] -- [email protected] -- @babel/[email protected] -- [email protected] deduped

[alexander-akait]

If you share link on repo I will help

[dkaus1]

I'm afraid actually repo is on private network can't be accessed on public network. Also I tried removing parent dependency injected core-js-pure as child however then I get into another error.

ModuleNotFoundError: Module not found: Error: Can't resolve '@babel/runtime-corejs3/helpers/interopRequireDefault'

[alexander-akait]

Sorry, I can't help without more infromation, something wrong with your env

[dkaus1]

I can understand it is tough to advice based on information shared. However can you suggest something based on information shared so far? Also do you know why all these dependencies and running application of mac machine works seamless however breaking in windows machine? Meanwhile I will try to create mini repo with all deps and share.

[alexander-akait]

Sorry, I can't say, I think you ahve different env on different computers

[dkaus1]

Hi @alexander-akait

I'm able to get to rid of above error without doing much changes and now I'm able to build the scss files as well by tweaking babel-loader exclude/include values. However now I'm getting a common error as below

ERROR in ./app.jsx 41:1 Module parse failed: Unexpected token (41:1) File was processed with these loaders: ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js You may need an additional loader to handle the result of these loaders. render( <Provider store={store}>{routes()}</Provider>, document.getElementById('app') );

Below is babel loader configuration used const JSLoader = { exclude: [/node_modules/, /node_modules[\\\/]core-js/], include: /node_modules[\\\/](?!(ui-components|react-jsx-parser)\\).*/, // **OLD ONE: exclude: /node_modules\/(?!(ui-components|react-jsx-parser)\/).*/,** test: /\.(js|jsx)$/, use: ['babel-loader?cacheDirectory'], };

Can you suggest how to fix the above error ?

[alexander-akait]

Sounds like you don't apply babel-loader for this file

[dkaus1]

Thanks for pointing it out. I'm able to resolve all issues now. Primary culprit was core-js not getting excluded causing all this noise. Thanks for your help and support.

[alexander-akait]

@dkaus1 Can we close?