webpack: Uncaught SyntaxError: The requested module '/MyComponent.mjs' does not provide an export named 'default'

Do you want to request a feature or report a bug? Bug

What is the current behavior? I have a React component MyComponent.jsx and I try to use webpack to output the component in es6 format for people to consume without the transpiler.

This is webpack.config.js for webpack to output js

const path = require("path"),
      {argv} = require("yargs");

module.exports = {
  devServer: {
    compress: true,
    host: "0.0.0.0",
    open: true,
    port: 8000
  },
  devtool: "none",
  entry: {
    "MyComponent": path.resolve(__dirname, "MyComponent.jsx")
  },
  module: {
    rules: [
      {
        exclude: /node_modules/,
        include: [
          path.resolve(__dirname, ".")
        ],
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-react"],
        },
        test: /\.(jsx|js|mjs)$/
      }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: "all"
    }
  },
  output: {
    filename: `[name]-${argv.mode}.mjs`,
    jsonpScriptType: "module",
    libraryExport: "default",
    libraryTarget: "umd",
    path: path.resolve(__dirname, "dist")
  },
  target: "web"
}

when I use index.html to consume /MyComponent.mjs, it gives Uncaught SyntaxError: The requested module '/MyComponent.mjs' does not provide an export named 'default'

Here is the html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Webpack App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.development.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.development.js" crossorigin></script>
  <script type="module">
    import MyComponent from "/dist/MyComponent-development.mjs"
    console.log(MyComponent)
  </script></body>
</html>

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

git clone https://github.com/wood1986/issue
yarn install
yarn start

This error message is in the browser console

What is the expected behavior? Uncaught SyntaxError: The requested module '/MyComponent.mjs' does not provide an export named 'default' should not throw

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: 4.23.1,
node: 11.0.0

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 18 (16 by maintainers)

Most upvoted comments

webpack doesn’t support that yet.

Best avoid bundling and only transpile the modules with babel.

If you want to bundle, you can use rollup which supports this.

sokra on Nov 3, 2018

Not in short term, but we plan to add it eventually.

sokra on Nov 3, 2018