webpack 4.0.0-beta.0 different behavior with .mjs files

Do you want to request a feature or report a bug? I want to report unexpected behavior

What is the current behavior?

file: /server/main.mjs - with --experimental-modules flag

import * as React from 'react'
import * as ReactDOM from 'react-dom'

import * as Redux from 'redux'
import * as ReactRedux from 'react-redux'

console.log( 'React.createElement', React.createElement ? true : false )
console.log( 'React.default.createElement', React.default && React.default.createElement ? true : false )
console.log( 'React.Component', React.Component ? true : false )
console.log( 'React.default.Component', React.default && React.default.Component ? true : false )
console.log( 'ReactDOM.hydrate', ReactDOM.hydrate ? true : false )
console.log( 'ReactDOM.default.hydrate', ReactDOM.default && ReactDOM.default.hydrate ? true : false )
console.log( 'Redux.createStore', Redux.createStore ? true : false )
console.log( 'Redux.default.createStore', Redux.default && Redux.default.createStore ? true : false )
console.log( 'ReactRedux.connect', ReactRedux.connect ? true : false )
console.log( 'ReactRedux.default.connect', ReactRedux.default && ReactRedux.default.connect ? true : false )

output:

React.createElement false
React.default.createElement true
React.Component false
React.default.Component true
ReactDOM.hydrate false
ReactDOM.default.hydrate true
Redux.createStore false
Redux.default.createStore true
ReactRedux.connect false
ReactRedux.default.connect true

---

file: /client/main.mjs

import * as React from 'react'
import * as ReactDOM from 'react-dom'

import * as Redux from 'redux'
import * as ReactRedux from 'react-redux'

console.log( 'React.createElement', React.createElement ? true : false )
console.log( 'React.default.createElement', React.default && React.default.createElement ? true : false )
console.log( 'React.Component', React.Component ? true : false )
console.log( 'React.default.Component', React.default && React.default.Component ? true : false )
console.log( 'ReactDOM.hydrate', ReactDOM.hydrate ? true : false )
console.log( 'ReactDOM.default.hydrate', ReactDOM.default && ReactDOM.default.hydrate ? true : false )
console.log( 'Redux.createStore', Redux.createStore ? true : false )
console.log( 'Redux.default.createStore', Redux.default && Redux.default.createStore ? true : false )
console.log( 'ReactRedux.connect', ReactRedux.connect ? true : false )
console.log( 'ReactRedux.default.connect', ReactRedux.default && ReactRedux.default.connect ? true : false )

output:

React.createElement false
React.default.createElement true
React.Component false
React.default.Component true
ReactDOM.hydrate false
ReactDOM.default.hydrate true
Redux.createStore true
Redux.default.createStore false
ReactRedux.connect true
ReactRedux.default.connect false

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

I expect what webpack will give the same result as node

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

webpack config for /client/main.mjs:

const CleanObsoleteChunks = require( 'webpack-clean-obsolete-chunks' )

module.exports = ( { NODE_ENV, PORT, VIEW_TYPE, DATA_PROVIDER, ASSETS_PROVIDER_CLIENT_FUNCTIONS_BASE_HREF }, webpack, joinPath ) => ( {
  entry: {
    main: joinPath( `./client/${ VIEW_TYPE }/main.mjs` ),
    vendor: [ 
      'react',
      'prop-types',
      'react-dom',
      'react-redux',
      'redux',
      'loadable-components',
      'styled-components',
      'gsap',
      'smooth-scrolling',
      'dom-classes'
    ]
  },
  target: 'web',
  output: {
    path: joinPath( `./../assets/functions/${ VIEW_TYPE }` ),
    filename: '[name].js',
    chunkFilename: '[chunkhash].main.js',
    publicPath: `${ ASSETS_PROVIDER_CLIENT_FUNCTIONS_BASE_HREF }/${ VIEW_TYPE }/`,
  },
  resolve: {
    modules: [
      'node_modules',
    ],
    extensions: [ '.mjs', '.js', '.json', '.jsx', '.css' ],
  },
  devtool: 'source-map',
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          name: 'vendor',
          enforce: true
        }
      }
    }
  },
  plugins: [
    new webpack.DefinePlugin( {
      'process.env': {
        'NODE_ENV': JSON.stringify( NODE_ENV ),
        'PORT': JSON.stringify( PORT ),
        'RUNNING_ENV': JSON.stringify( 'CLIENT' ),
        'DATA_PROVIDER': JSON.stringify( DATA_PROVIDER ),
        'VIEW_TYPE': JSON.stringify( VIEW_TYPE )
      }
    } ),
    new CleanObsoleteChunks( {
      verbose: true,
      deep: true
    } )
  ]
} )

webpack output

Version: webpack 4.0.0-beta.0
Child
    Hash: cd8e6279d4dca2229059
    Time: 1738ms
            Asset      Size  Chunks                    Chunk Names
          main.js   735 KiB    main  [emitted]  [big]  main
        vendor.js  1.51 MiB  vendor  [emitted]  [big]  vendor
      main.js.map   830 KiB    main  [emitted]         main
    vendor.js.map  1.75 MiB  vendor  [emitted]         vendor
    Entrypoint main [big] = main.js main.js.map
    Entrypoint vendor [big] = vendor.js vendor.js.map
       [0] multi react prop-types react-dom react-redux redux styled-components gsap invisible-rrs invisible-httprps smooth-scrolling dom-classes 148 bytes {vendor} [built]
       [1] util (ignored) 15 bytes {vendor} [built]
    [./functions/client/large/main.mjs] 1010 bytes {main} [built]
    [./node_modules/webpack/buildin/amd-options.js] (webpack)/buildin/amd-options.js 82 bytes {vendor} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {vendor} {main} [built]
    [./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 596 bytes {vendor} {main} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 517 bytes {vendor} [built]
        + 128 hidden modules

    ERROR in ./functions/client/large/main.mjs
    11:33-49 Can't import the named export 'hydrate' from non EcmaScript module (only default export is available)
     @ ./functions/client/large/main.mjs

    ERROR in ./functions/client/large/main.mjs
    14:42-55 "export 'default' (imported as 'Redux') was not found in 'redux'
     @ ./functions/client/large/main.mjs

    ERROR in ./functions/client/large/main.mjs
    14:59-72 "export 'default' (imported as 'Redux') was not found in 'redux'
     @ ./functions/client/large/main.mjs

    ERROR in ./functions/client/large/main.mjs
    16:43-61 "export 'default' (imported as 'ReactRedux') was not found in 'react-redux'
     @ ./functions/client/large/main.mjs

    ERROR in ./functions/client/large/main.mjs
    16:65-83 "export 'default' (imported as 'ReactRedux') was not found in 'react-redux'
     @ ./functions/client/large/main.mjs

    ERROR in ./functions/client/large/main.mjs
    7:36-55 Can't import the named export 'createElement' from non EcmaScript module (only default export is available)
     @ ./functions/client/large/main.mjs

    ERROR in ./functions/client/large/main.mjs
    9:32-47 Can't import the named export 'Component' from non EcmaScript module (only default export is available)
     @ ./functions/client/large/main.mjs

dependencies

"devDependencies": {
    "webpack": "^4.0.0-beta.0",
    "webpack-clean-obsolete-chunks": "^0.3.0",
    "webpack-cli": "^2.0.4"
  },
  "dependencies": {
    "croppie": "^2.5.1",
    "cross-env": "^5.1.1",
    "gsap": "^1.20.3",
    "luxon": "^0.2.7",
    "pino": "^4.10.2",
    "platform": "^1.3.4",
    "prop-types": "^15.6.0",
    "react": "^16.1.0",
    "react-dom": "^16.1.0",
    "react-google-recaptcha": "^0.9.9",
    "react-redux": "^5.0.6",
    "redux": "^4.0.0-beta.1",
    "smooth-scrolling": "^2.3.9",
    "styled-components": "^3.1.6",
    "ua-device": "^0.1.10"
  }

nodejs - 9.5.0

[jonmanzo]

@jsonnull It’s not an issue in GraphQL, but rather Webpack acting as it is intended (and documented resolve.mainFields) by prioritizing module over main from the package.json of the dependency based on your target.

The better webpack config entry (for Node) would be to alter the default prioritization with:

resolve:{
   mainFields: ["main", "module"]
}

[jonmanzo]

@pie6k @deftomat
Workaround that issue with this:

resolve:{ 
   alias: {
      graphql$: path.resolve(__dirname, 'node_modules/graphql/index.js'),
   }
}