fzembow / elements-import-problem-repro

Problem with importing a js module
0 stars 0 forks source link

Importing a js file that uses `import` doesn't seem to work #1

Open fzembow opened 4 years ago

fzembow commented 4 years ago

Not sure why this doesn't work:

elements start
visit http://localhost:3000

result:

  (node:29756) UnhandledPromiseRejectionWarning: /Users/fzembow/src/graphics/node_modules/three/examples/jsm/loaders/SVGLoader.js:1
  import {
  ^^^^^^

  SyntaxError: Cannot use import statement outside a module
      at wrapSafe (internal/modules/cjs/loader.js:1053:16)
      at Module._compile (internal/modules/cjs/loader.js:1101:27)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
      at Module.load (internal/modules/cjs/loader.js:985:32)
      at Function.Module._load (internal/modules/cjs/loader.js:872:16)
      at Module.require (internal/modules/cjs/loader.js:1025:19)
      at require (internal/modules/cjs/helpers.js:72:18)
      at Object.<anonymous> (/Users/fzembow/src/graphics/.elements/dist/app/pages/home/Box.js:19:19)
          -> /Users/fzembow/src/graphics/.elements/dist/app/app/pages/home/Box.tsx:5:1
      at Module._compile (internal/modules/cjs/loader.js:1137:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
  (node:29756) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
  (node:29756) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

The same works fine on webpack

Is there some configuration on module resolution styles that needs to happen here?

cmather commented 4 years ago

@fzembow, The SVGLoader in three/examples/jsm/loaders/SVGLoader from package 'three' has es6 style import statements which will only work with node if that feature is turned on, or if the file is compiled to commonjs.

One option for getting this to work on the server is to turn on node support for the import statement. I think in node 12 it's an experimental feature.

But this still leaves making this work in the browser. And I'm not sure how to do that without compiling the javascript file. Of course, we could just compile all package js files, but this would slow things down tremendously since there are so many package files usually.

I will think about this use case. Let me know if you have any ideas!