Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

The requested module does not provide an export named 'Label' #100

Closed
photonstorm opened this issue Apr 29, 2021 · 4 comments · Fixed by #101
Closed

The requested module does not provide an export named 'Label' #100

photonstorm opened this issue Apr 29, 2021 · 4 comments · Fixed by #101
Assignees
@ellthompson
Labels
enhancement New feature or request

Comments

@photonstorm
Copy link

Describe the bug

Have built PCUI but cannot import anything from the dist build.

To Reproduce

Steps to reproduce the behavior:

  1. Checkout the PCUI repo
  2. npm install (was successful)
  3. npm run build (was successful)
  4. Try importing any of the components and it fails.

I tried a simple script:

import { Label } from './dist/pcui.js';

console.log(new Label());

And get: Uncaught SyntaxError: The requested module './dist/pcui.js' does not provide an export named 'Label'

I also tried from an HTML page:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="module">
            
            import { Label } from './dist/pcui.js';

            console.log(new Label());

        </script>
    </body>
</html>

And got the same result.

Finally, I also tried from node (test.mjs):

import { Label } from './dist/pcui.js';

console.log(new Label());

and get this:

$ node test.mjs
file:///D:/wamp/www/pcui/test.mjs:1
import { Label } from './dist/pcui.js';
         ^^^^^
SyntaxError: Named export 'Label' not found. The requested module './dist/pcui.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from './dist/pcui.js';
const { Label } = pkg;

    at ModuleJob._instantiate (internal/modules/esm/module_job.js:104:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:149:5)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async Object.loadESM (internal/process/esm_loader.js:68:5)

Doing what node suggests may work, but the library clearly needs to access window so it fails at that point instead. I didn't expect PCUI to work in node of course, but I did expect the module to import successfully, but alas it didn't

Expected behavior

The component to be found :)

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser n/a

Any ideas?!

I've attached the pcui dist files that npm run build created in case that helps.

dist.zip
@photonstorm
Copy link
Author

Just to add that I tested this on my Mac tonight (running macOS Big Sur 11.3) and get the same result.

@willeastcott willeastcott added the enhancement New feature or request label Apr 30, 2021
@willeastcott
Copy link
Contributor

dist/pcui.js is an ES5 build. We need to add a module build target. 😄

@photonstorm
Copy link
Author

Ah-ha - well that makes sense! You may want to update your README in the meantime! :) Specifically, this part:

  • ES6 Components: dist/pcui.js
  • React Components: dist/pcui-react.js
  • Data Binding: dist/pcui-binding.js

You can then import the ES6 components into your own .js files and use them as follows:

import { Label } from 'dist/pcui.js';

const helloWorldLabel = new Label({
    text: 'Hello World'
});

@ellthompson ellthompson mentioned this issue Apr 30, 2021
Merged
@ellthompson
Copy link
Contributor

Hi @photonstorm , i've created a PR which updates our webpack config to handle an esm build of PCUI. You can use the .mjs files it outputs to use the module syntax you were expecting.

I'm also updating the readme to reflect that. Thanks for bringing this to our attention!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ellthompson ellthompson

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Webpack ESM build playcanvas/pcui
3 participants
@photonstorm @willeastcott @ellthompson