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

wood1986 · 2018-11-02T09:54:23Z

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

The text was updated successfully, but these errors were encountered:

sokra · 2018-11-03T08:43:01Z

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.

wood1986 · 2018-11-03T08:48:32Z

Do you have plan to support this in the future?

sokra · 2018-11-03T08:49:49Z

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

wood1986 · 2018-11-03T08:53:26Z

What are the difficulties? If it is simple, I want to contribute it.

sokra · 2018-11-03T22:31:27Z

It's not that simple. We need to be able to remove the runtime first. For this some refactoring is needed that is planned for webpack 5.

wood1986 · 2018-11-04T04:26:20Z

After a research, I have just found that umd and esm cannot coexist in the same and single bundle. Am I correct?

sokra · 2018-11-05T07:18:40Z

webpack bundles can combine modules of any format: ESM, AMD, CJS, UMD

Related to this issue: When compiling into a ESM the entry module also need to be ESM. Referenced modules can be of any format, but must be "use strict".

wood1986 · 2018-11-09T08:36:33Z

I want to make sure I understand your answer.

webpack bundles can combine modules of any format: ESM, AMD, CJS, UMD

You are saying before the webpack bundling, we can import or require from any format and webpack must understand any kind of import or require

When compiling into a ESM the entry module also need to be ESM

If I use webpack to output a bundle in ESM format, the consumer side can only use native ESM import. If my understanding is correct, this means at the beginning we have to decide either ESM or non ESM (CJS, AMD, UMD...) target. If it is ESM world, webpack does not need to include webpackBootstrap __webpack_require__. The missing part on webpack side is creating <script type="module" src="module.mjs"></script> for static and dynamic import. Am I correct?

Referenced modules can be of any format, but must be "use strict".

You are saying not only creating the <script type="module" src="module.mjs"></script> but also prepending use strict for the module.mjs

sokra · 2018-11-11T10:55:36Z

When compiling into a ESM the entry module also need to be ESM

I'm referring only the the entry module. That's the first module in the graph. All other modules can be in any format. (But when using any non-ESM format we need to add a small module runtime to the bundle. It's not the same as webpackBootstrap, but similar.)

Javascript loaded via <script type="module"> is always in strict mode, and it's not possible to leave strict mode. So technically in such a bundle we are not able to run non-strict code. That's why I saying all non-ESM code include in such a bundle must use "use strict". There will probably a way to force strict mode, but this could result in behavior change and will emit a warning.

The missing part on webpack side is creating <script type="module" src="module.mjs"></script> for static and dynamic import.

That's already possible. The missing part is an alternative output format which allows to export (via ESM export) from a bundle.

Note that it's already possible to run bundles with <script type="module">, but it's not possible that these bundles have exports.

If my understanding is correct, this means at the beginning we have to decide either ESM or non ESM (CJS, AMD, UMD...) target.

You don't have to decide that. You can create two bundles, one in ESM and one in UMD. They need to be consumed differently, but can contain the same code.

wood1986 · 2018-11-13T08:49:56Z

I want to make sure if my direction is same as your expectation based on your reply

For example, I have two entries A.jsx and B.jsx. Currently, webpack will output 3 js files and they are A.js, B.js and common.js. common.js is the shared code for A.jsx and B.jsx.

In order to support native export, webpack will output 5 files which includes previous 3 js files I have mentioned. The rest of files are A.mjs and B.mjs. These two files will contain some webpackBootstrap code to load the module and then export it in es6 syntax.

Am I correct?

sokra · 2018-11-14T12:51:45Z

No it would still output 3 files A.js, B.js, common.js

A.js and B.js would import { ... } from "./common.js" and exports the same exports that your entrypoint exports. It also contains all the code unique for the module graph of A resp. B. If needed (because you are using CJS/AMD modules something similar to webpackBootstrap would be included next to the ESM code in A.js and B.js (next to => it won't wrap it as currently).

You are free to change the extension to .mjs but browser don't care about that anyway.

wood1986 · 2018-11-14T20:28:38Z

I really appreciate your patient for the explanation. I will have a try

wood1986 · 2018-11-16T08:06:22Z

Currently, the UMD output (template webpackBootstrap code) is purely in es5 syntax. If we put the es6 export in the same file, it may break in runtime on certain environment

For example, I use webpack to output a lib for node and browser to run. Node is partially support es6 module and IE does not support it.

sokra · 2018-11-16T14:43:30Z

It's not possible to put ESM exports into UMD. Your file is either UMD or ESM.

namedgraph · 2019-03-20T00:49:26Z

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.

So what is the workaround for this, can you be more specific? I'm new to webpack, so "rollup" doesn't say anything to me.

webpack-bot · 2019-09-18T14:41:56Z

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.

webpack-bot · 2019-10-03T17:11:57Z

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

levitomer · 2020-01-12T22:57:22Z

Have been reading the comments here but didn't got an clear statement of what should I do in order to resolve this case:

Tried to run a script that loads my app, and got into this error:

SyntaxError: The requested module 'file:///Users/tomerlevi/Github/bali/foundation/webpack/webpack.dev.js' does not provide an export named 'default'
    at internal/main/run_main_module.js:17:11
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! serverless-graphql@0.0.0 start: `npm run generate:config:local && MOCKED_DATABASE=true env-cmd foundation/environment/security.env.local node -r esm ./foundation/devServer --ignore app --exec babel-node`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the serverless-graphql@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tomerlevi/.npm/_logs/2020-01-12T22_50_58_054Z-debug.log```

herrfugbaum mentioned this issue Nov 11, 2018

ES6 Example doesn't work herrfugbaum/cato.js#6

Open

webpack-bot added the inactive label Sep 18, 2019

webpack-bot closed this as completed Oct 3, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

wood1986 commented Nov 2, 2018 •

edited

sokra commented Nov 3, 2018

wood1986 commented Nov 3, 2018

sokra commented Nov 3, 2018

wood1986 commented Nov 3, 2018

sokra commented Nov 3, 2018

wood1986 commented Nov 4, 2018

sokra commented Nov 5, 2018

wood1986 commented Nov 9, 2018 •

edited

sokra commented Nov 11, 2018

wood1986 commented Nov 13, 2018

sokra commented Nov 14, 2018

wood1986 commented Nov 14, 2018

wood1986 commented Nov 16, 2018 •

edited

sokra commented Nov 16, 2018

namedgraph commented Mar 20, 2019

webpack-bot commented Sep 18, 2019

webpack-bot commented Oct 3, 2019

levitomer commented Jan 12, 2020

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

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

Comments

wood1986 commented Nov 2, 2018 • edited

sokra commented Nov 3, 2018

wood1986 commented Nov 3, 2018

sokra commented Nov 3, 2018

wood1986 commented Nov 3, 2018

sokra commented Nov 3, 2018

wood1986 commented Nov 4, 2018

sokra commented Nov 5, 2018

wood1986 commented Nov 9, 2018 • edited

sokra commented Nov 11, 2018

wood1986 commented Nov 13, 2018

sokra commented Nov 14, 2018

wood1986 commented Nov 14, 2018

wood1986 commented Nov 16, 2018 • edited

sokra commented Nov 16, 2018

namedgraph commented Mar 20, 2019

webpack-bot commented Sep 18, 2019

webpack-bot commented Oct 3, 2019

levitomer commented Jan 12, 2020

wood1986 commented Nov 2, 2018 •

edited

wood1986 commented Nov 9, 2018 •

edited

wood1986 commented Nov 16, 2018 •

edited