ES6 module export build issue 'return' outside of function in webpack@5.0.0-beta.22

[coemans]

• Operating System: macOS
• Node Version: v13.7.0
• NPM Version: 6.14.5
• webpack Version: webpack@5.0.0-beta.22
• terser-webpack-plugin Version: transitive dependency version 3.0.8

Expected Behavior

#2933 triggered me to test the new output.libraryTarget: 'module' feature but unfortunately without success.

Actual Behavior

When running npm install and npm run build the following error occurred:

ERROR in test.js from Terser
'return' outside of function [test.js:60,9]
    at ee (/test/node_modules/terser/dist/bundle.min.js:1:19541)
    at c (/test/node_modules/terser/dist/bundle.min.js:1:28244)
    at /test/node_modules/terser/dist/bundle.min.js:1:32480
    at /test/node_modules/terser/dist/bundle.min.js:1:28976
    at /test/node_modules/terser/dist/bundle.min.js:1:50966
    at ce (/test/node_modules/terser/dist/bundle.min.js:1:51103)
    at gr (/test/node_modules/terser/dist/bundle.min.js:1:339538)
    at minify (/test/node_modules/terser-webpack-plugin/dist/minify.js:166:7)
    at Object.transform (/test/node_modules/terser-webpack-plugin/dist/minify.js:183:18)
    at execFunction (/test/node_modules/jest-worker/build/workers/processChild.js:140:17)

Code

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/test.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'test.js',
    libraryTarget: 'module',
  },
  experiments: {
    outputModule: true,
  },
};

// src/test.js
export class Test { }

How Do We Reproduce?

Download demo.zip, run npm install and npm run build.

[alexander-akait]

@coemans change libraryTarget: 'module', to module: true, we need improve this, having libraryTarget and module is some misleading

[coemans]

@evilebottnawi thank you for the support and feedback. I did the change, the build code is successfully generated but still doesn't contain the export I expected.

You can download the new demo.zip, run npm install and npm run test.

import { assert } from 'chai';

SyntaxError: The requested module '/demo/dist/test.js' does not provide an export named 'Test'
    at Object.<anonymous> (/demo/test/build.test.js:1)
    at Generator.next (<anonymous>)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at requireOrImport (/demo/node_modules/mocha/lib/esm-utils.js:15:12)
    at Object.exports.loadFilesAsync (/demo/node_modules/mocha/lib/esm-utils.js:28:26)
    at Mocha.loadFilesAsync (/demo/node_modules/mocha/lib/mocha.js:386:19)
    at singleRun (/demo/node_modules/mocha/lib/cli/run-helpers.js:149:15)
    at exports.runMocha (/demo/node_modules/mocha/lib/cli/run-helpers.js:186:11)
    at Object.exports.handler (/demo/node_modules/mocha/lib/cli/run.js:319:11)
    at /demo/node_modules/yargs/lib/command.js:241:49
    at process.runNextTicks [as _tickCallback] (internal/process/task_queues.js:62:5)
    at internal/main/run_main_module.js:17:47

Like you said, it is still under development, but I'd expect this to work. Do I have to wait the Webpack v5 release or is there still something wrong?

[alexander-akait]

It is under developers and do not implement fully, but your error is not related to module bundling, why you try to build tests? test.js doesn't contains export { Test }

[coemans]

I thought Webpack v5 would have ES modules output support so all exports from the source would be available from the builded code when (for example) libraryTarget: 'module' is used. I've updated the demo.zip, when you run npm install, npm run test:es6 you'll see the test succeed. When you run npm run test:build the test failed but should succeed.

// test/es6.test.js
import { assert } from 'chai';
import { Test } from '../src/test.js'; // source code with Test class export

describe('ES6 import with source', () => {
  it('import is available', function () {
    const test = new Test();
    assert.isTrue(test.available);
  });
});

// test/build.test.js
import { assert } from 'chai';
import { Test } from '../dist/test.js'; // builded code with Test class export assumption

describe('ES6 import with Webpack build', () => {
  it('import is available', function () {
    const test = new Test();
    assert.isTrue(test.available);
  });
});

Maybe I was confused by the comments in #2933. Is there now a possibility to build code with Webpack and have the exports available or will there be one in the future?

[alexander-akait]

We don't implement fully support ES modules, please be patient. It is only generate valid ES module syntax, but don't generate import/export right now

[coemans]

@evilebottnawi no pressure, i'll wait. Just thought I could already test the functionality in the v5 beta version based on your feedback in #2933 and wanted to report any potential issue.

[alexander-akait]

@coemans We will write about ES modules supporting in changelog when it was ready for tests in wild 👍

[coemans]

I look forward to, thanks!