Deno: Bundle: Skypack Module Error

Created on 11 Nov 2020  路  7Comments  路  Source: denoland/deno

Describe the bug

Input code

import { cong } from 'https://cdn.skypack.dev/tinh?dts';

console.log(cong(1, 2)); // deno run result: 3

Run Result

3

Bundle Result

console.log(cong(1, 2));

Bundle Expected Result

function cong(a, b) {
    return a + b;
}

console.log(cong(1, 2));

Version
1.5.2

bug swc

Most helpful comment

cc/ @kdy1

A minimal reproduction:

example.ts

import { u } from "./v.js";

console.log(u("a"));

u.js

function u(str) {
  return str;
}

export { u };
export default null;
export const __esModule = true;

v.js

export * from "./u.js";
export { default } from "./u.js";

All 7 comments

cc/ @kdy1

A minimal reproduction:

example.ts

import { u } from "./v.js";

console.log(u("a"));

u.js

function u(str) {
  return str;
}

export { u };
export default null;
export const __esModule = true;

v.js

export * from "./u.js";
export { default } from "./u.js";

@kdy1 i have same issue:

deno bundle entry.js output.js

entry.js

import {useCounter} from './e.js';

console.log(useCounter)

e.js

export * from "./r.js";

r.js

import React from "https://cdn.esm.sh/v4/[email protected]/esnext/react.js";

function useCounter() {
    return React.useState(0)
}

export {useCounter}

output.js

...REACT CODE...
console.log(useCounter);

should be:

...REACT CODE...
function useCounter() {
    return React.useState(0);
}
console.log(useCounter);

a little change of r.js:

```javascript {2}
import React from "https://cdn.esm.sh/v4/[email protected]/esnext/react.js";

export function useCounter() {
return React.useState(0)
}
```
now it works as expected, i guess it is the tree-shaking bug?

@ije I've just tried this:
UPDATE: Re-tried with a bit of variation

deps/react.ts

import { default as _React } from "https://esm.sh/[email protected]?no-check";
export const React = _React;

It still has error in browser:

Uncaught ReferenceError: __react is not defined

in public/assets/js/client.js

var require = (name)=>{
    switch(name){
        case "react":
            return __react;
        default:
            throw new Error("[esm.sh] Could not resolve \"" + name + "\"");
    }
};

UPDATE: it seemed parts of React are found in resulting JS, but the React namespace itself is lost.

client.js.zip

@quaos you can use esm.sh's bundle mode:

import React from 'https://esm.sh/[react,react-dom]/react'
import ReactDOM from 'https://esm.sh/[react,react-dom]/react-dom'
export {React, ReactDOM}

this should work

@ije Now there's a little progress! But the ReactDOM is still not found:

deps/react.ts

import React from 'https://esm.sh/[react,react-dom]/react?no-check';
import ReactDOM from 'https://esm.sh/[react,react-dom]/react-dom?no-check';
export {React, ReactDOM}

Browser console

Uncaught ReferenceError: ReactDOM is not defined
    at client.js:5890

client.js.zip

please try:

import _React from 'https://esm.sh/[react,react-dom]/react'
import _ReactDOM from 'https://esm.sh/[react,react-dom]/react-dom'
export const React = _React
export const ReactDOM = _ReactDOM

i guess swc can not handle the export {React, ReactDOM} very well currently.

please try:

import _React from 'https://esm.sh/[react,react-dom]/react'
import _ReactDOM from 'https://esm.sh/[react,react-dom]/react-dom'
export const React = _React
export const ReactDOM = _ReactDOM

i guess swc can not handle the export {React, ReactDOM} very well currently.

Umm ... seemed this way cannot be used as Namespace...

import { React } from "../deps/react.ts";
console.log("React=", React);
console.log("React.FC=", React.FC);

// Here Deno complains:  Cannot find namespace 'React':
export const NotesList: React.FC<NotesListProps> = ({ }) => {
// ...
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

CruxCv picture CruxCv  路  3Comments

kitsonk picture kitsonk  路  3Comments

ry picture ry  路  3Comments

benjamingr picture benjamingr  路  3Comments

ry picture ry  路  3Comments