commonjs module under web_modules can not be load correctly in webpack 4.

[njleonzhang]

Bug report

commonjs module under web_modules can not be load correctly in webpack 4.

What is the current behavior?

// webpack config

resolve: {
    modules: ['node_modules', 'web_modules'],
    ....
}

web_modules
   test-module
       index.js

import xxx from 'test-module'

// error: "export 'default' (imported as 'XXXX') was not found in 'message-box'

move the test-module folder to node_modules, the build pass.

node_modules
   test-module
       index.js

If the current behavior is a bug, please provide the steps to reproduce.
will try to make one later.

What is the expected behavior?
module under web_module should also work as node_modules

Other relevant information:
webpack version: 4.12.2
Node.js version: 8.7
Operating System: mac

[sokra]

Could you paste your module.rules?

[njleonzhang]

module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.pug$/,
        oneOf: [
          // this applies to <template lang="pug"> in Vue components
          {
            resourceQuery: /^\?vue/,
            use: ['pug-plain-loader']
          },
          // this applies to pug imports inside JavaScript
          {
            use: ['raw-loader', 'pug-plain-loader']
          }
        ]
      },
      {
        test:/\.(js|jsx)$/,
        loader: 'babel-loader',
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules/vue-echarts'),
          resolve('node_modules/resize-detector'),
          resolve('node_modules/webpack-dev-server/client')
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            // global data for all components
            // this can be read from a scss file
            options: {
              resources: path.resolve(__dirname, '../src/assets/styles/variables.scss')
            }
          }
        ]
      },
      {
        test:/\.(js|jsx)$/,
        use:['babel-loader'],
        exclude:/node_modules/
      },
    ]
  },

[sokra]

Try removing the second instance of the babel loader:

      {
        test:/\.(js|jsx)$/,
        use:['babel-loader'],
        exclude:/node_modules/
      },

[njleonzhang]

Tnx, it's so stupid. But why? the files under web_modules seems not related to the babel-loader.