a lot of warnings when importing the side npm components

[majioa]

Bug Report

Current Behavior

I have got many warning message of typeof3 default export absence like follows:

Add any other context about the problem here. If applicable, add screenshots to help explain.
WARNING in ./node_modules/@babel/runtime/helpers/typeof.js 10:120-128
"export 'default' (imported as '_typeof3') was not found in '@babel/runtime/helpers/typeof'
    at HarmonyImportSpecifierDependency._getErrors (/usr/local/home/majioa/git/prometheus2.0/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:113:11)
    at HarmonyImportSpecifierDependency.getWarnings (/usr/local/home/majioa/git/prometheus2.0/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:60:15)
    at Compilation.reportDependencyErrorsAndWarnings (/usr/local/home/majioa/git/prometheus2.0/node_modules/webpack/lib/Compilation.js:1326:24)
    at Compilation.finish (/usr/local/home/majioa/git/prometheus2.0/node_modules/webpack/lib/Compilation.js:1137:9)
    at hooks.make.callAsync.err (/usr/local/home/majioa/git/prometheus2.0/node_modules/webpack/lib/Compiler.js:545:17)
    at _err0 (eval at create (/usr/local/home/majioa/git/prometheus2.0/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at _addModuleChain (/usr/local/home/majioa/git/prometheus2.0/node_modules/webpack/lib/Compilation.js:1065:12)
    at processModuleDependencies.err (/usr/local/home/majioa/git/prometheus2.0/node_modules/webpack/lib/Compilation.js:981:9)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)
 @ ./node_modules/materialize-css/dist/js/materialize.js
 @ ./app/packs/components/Dashboard.jsx
 @ ./app/packs/tiunnja.js

while trying to import many external components. ths import code is below:

Q: how to avoid the warning mesages?

Input Code

Input code sample for the warnings

import { Component } from 'react'
export default class Dashboard extends Component {
  render() {
    return (
       <header>
       </header>)}}

or any other import, except may be react do this warning

Chromium console shows:

typeof.js:17 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.eval (typeof.js:17)
    at eval (typeof.js:34)
    at Module../node_modules/@babel/runtime/helpers/typeof.js (tiunnja.self-367b9abeaea0fd42adba87e9b92508b5fcef6fa172f6e2bd476df353d97a6258.js?body=1:243)
    at __webpack_require__ (tiunnja.self-367b9abeaea0fd42adba87e9b92508b5fcef6fa172f6e2bd476df353d97a6258.js?body=1:21)
    at Module.eval (checkPropTypes.js:1)
    at eval (checkPropTypes.js:87)
    at Module../node_modules/prop-types/checkPropTypes.js (tiunnja.self-367b9abeaea0fd42adba87e9b92508b5fcef6fa172f6e2bd476df353d97a6258.js?body=1:446)
    at __webpack_require__ (tiunnja.self-367b9abeaea0fd42adba87e9b92508b5fcef6fa172f6e2bd476df353d97a6258.js?body=1:21)
    at eval (react.development.js:23)
    at eval (react.development.js:1485)

Expected behavior/code
A clear and concise description of what you expected to happen (or code).

Babel Configuration (.babelrc, package.json, cli command)

package.json

{
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.0",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/plugin-transform-template-literals": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "babel": "^6.23.0",
    "babel-loader": "^8.0.2",
    "css-loader": "^1.0.0",
    "mini-css-extract-plugin": "^0.4.2",
    "node-sass": "^4.9.3",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0",
    "yarn": "^1.9.4"
  },
  "dependencies": {
    "assign-deep": "^1.0.0",
    "axios": "^0.18.0",
    "lodash-decorators": "^6.0.0",
    "materialize-css": "git+https://git@github.com/Dogfalo/materialize.git#v1-dev",
    "prop-types": "^15.6.2",
    "react": "^16.5.1",
    "react-rails-ujs": "^1.1.0",
    "react-scroll-pagination": "git+https://git@github.com/majioa/react-scroll-pagination.git#devel"
  },
}

config.webpack.js

{
var path = require('path')
var join = path.join

global.env = process.env.RAILS_ENV || process.env.NODE_ENV || 'development'

var isProd = global.env === 'production' || global.env === 'staging'
var isDev = global.env === 'development'

global.rootpath = path.normalize(join(__dirname, '../'))

console.log("Rails root:", global.rootpath)
console.log("Env:", global.env)

const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")

module.exports = {
   cache: true,

   context: global.rootpath,

   entry: {
      'tiunnja': './app/packs/tiunnja.js',
   },

   module: {
      rules: [
         {
            test: /\.(sa|sc|c)ss$/,
            use: [
               {
                  loader: MiniCssExtractPlugin.loader,
                  options: {
                     publicPath: '../'
                  }
               },
               {
                  loader: "css-loader",
                  options: {
                     sourceMap: true
                  }
               }, {
                  loader: "postcss-loader",
                  options: {
                     ident: 'postcss',
                     sourceMap: true,
                     options: {},
                 }
               }, {
                  loader: "sass-loader",
                  options: {
                     sourceMap: true
                  }
               }
            ]
         },
         {
            test: /\.(js|jsx)$/,
            use: [{
               loader: 'babel-loader',
               options: {
                  cacheDirectory: true,
                  ignore: [/cjs/],
                  presets: [
                     '@babel/preset-env',
                     '@babel/preset-react',
                  ],
                  plugins: [
                     '@babel/plugin-transform-runtime',
                     '@babel/plugin-proposal-object-rest-spread', // [v,] => [v]
                     '@babel/plugin-proposal-export-default-from',
                     '@babel/plugin-proposal-export-namespace-from',
                     '@babel/plugin-proposal-class-properties',
                     '@babel/plugin-transform-template-literals', // `foo${bar}` => "foo".concat(bar)
                     ['@babel/plugin-proposal-decorators', {
                        "decoratorsBeforeExport": true
                     }]
                  ],
               },
            }]
         },
      ],
   },

   output: {
      path: join(global.rootpath, 'vendor/assets/javascripts'),
      filename: isProd ? '[name].[hash].js' : '[name].js',
      devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'
   },

   optimization: {
      splitChunks: {
         cacheGroups: {
           styles: {
               name: 'styles',
               test: /\.css$/,
               chunks: 'all',
               enforce: true
            }
         }
      },
      minimizer: [
         new OptimizeCSSAssetsPlugin({})
      ]
   },

   plugins: [
      new MiniCssExtractPlugin({
         filename: isProd ? '../stylesheets/[name].[hash].css' : '../stylesheets/[name].css',
         chunkFilename: "[id].css"
      })
   ],

   resolve: {
      extensions: [ '.js', '.jsx' ],
      modules: ['packs', 'node_modules', 'components', 'css'],
   },
}

}

Environment

• Babel version(s): [v7.0.0]
• Node/npm version: [e.g. Node 8/npm 6]
• OS: [alt linux]
• Monorepo [no]
• How you are using Babel: [ loader]

[babel-bot]

Hey @majioa! 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.

[nicolo-ribaudo]

Since you are using webpack, you could try passing the useESModules: true option to transform-runtime.

[majioa]

It seems it works

[taoqf]

Does not work for me. after I set useESModules:true, I came to an exception:

Maximum call stack size exceeded

[tavurth]

Maximum call stack size exceeded:

2:1 Uncaught RangeError: Maximum call stack size exceeded
    at Object.eval [as a] (2:1)
    at _typeof2 (typeof.js?53ca:1)
    at _typeof (typeof.js?53ca:4)
    at _typeof2 (typeof.js?53ca:1)
    at _typeof (typeof.js?53ca:4)
    at _typeof2 (typeof.js?53ca:1)
    at _typeof (typeof.js?53ca:4)
    at _typeof2 (typeof.js?53ca:1)
    at _typeof (typeof.js?53ca:4)
    at _typeof2 (typeof.js?53ca:1)
(anonymous) @ 2:1
_typeof2 @ typeof.js?53ca:1
_typeof @ typeof.js?53ca:4
_typeof2 @ typeof.js?53ca:1
_typeof @ typeof.js?53ca:4
_typeof2 @ typeof.js?53ca:1
_typeof @ typeof.js?53ca:4
_typeof2 @ typeof.js?53ca:1
_typeof @ typeof.js?53ca:4
_typeof2 @ typeof.js?53ca:1
_typeof @ typeof.js?53ca:4
_typeof2 @ typeof.js?53ca:1
_typeof @ typeof.js?53ca:4
_typeof2 @ typeof.js?53ca:1
_typeof @ typeof.js?53ca:4
_typeof2 @ typeof.js?53ca:1
...

Looks like it's because typeof is somehow requiring itself. This has been an issue in the past as far as I can remember.

#3711
rollup/rollup-plugin-babel#40

Perhaps we can reopen this issue...

function _typeof2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2(obj); }

export default function _typeof(obj) {
  if (typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol") {
    _typeof = function _typeof(obj) {
      return _typeof2(obj);
    };
  } else {
    _typeof = function _typeof(obj) {
      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof2(obj);
    };
  }

  return _typeof(obj);
}

Symbol on line 1 calls line _typeof which then calls line 1 again

[nicolo-ribaudo]

Can you open a new issue with a reproducible example and your configuration?