search

embroider-build / ember-auto-import

Zero config import from npm packages
Other
360 stars 109 forks source link

how to import a babel webpack plugin ? #298

Open oliverlj opened 4 years ago

oliverlj commented 4 years ago

I'm trying to add bigint-money dependencies but i got thier error :

Built at: 07/17/2020 11:26:31 PM
                                      Asset      Size         Chunks                    Chunk Names
          chunk.app.55afc6938f608dcd68be.js    10 KiB            app  [emitted]         app
        chunk.tests.4402c4aa1f5cd53e6f5c.js   9.3 KiB          tests  [emitted]         tests
  chunk.vendors~app.71e4db76c0ec28d80e37.js   365 KiB    vendors~app  [emitted]  [big]  vendors~app
chunk.vendors~tests.00bed183d3bcc9b2ecdc.js  42.1 KiB  vendors~tests  [emitted]         vendors~tests
Entrypoint app [big] = chunk.vendors~app.71e4db76c0ec28d80e37.js chunk.app.55afc6938f608dcd68be.js
Entrypoint tests = chunk.vendors~tests.00bed183d3bcc9b2ecdc.js chunk.tests.4402c4aa1f5cd53e6f5c.js
[0] multi /tmp/broccoli-287939JHSjF3cH6iGD/cache-404-bundler/staging/l.js /tmp/broccoli-287939JHSjF3cH6iGD/cache-404-bundler/staging/app.js 40 bytes {app} [built]
[1] multi /tmp/broccoli-287939JHSjF3cH6iGD/cache-404-bundler/staging/l.js /tmp/broccoli-287939JHSjF3cH6iGD/cache-404-bundler/staging/tests.js 40 bytes {tests} [built]
[../../../../../../tmp/broccoli-287939JHSjF3cH6iGD/cache-404-bundler/staging/app.js] /tmp/broccoli-287939JHSjF3cH6iGD/cache-404-bundler/staging/app.js 1.45 KiB {app} [built]
[../../../../../../tmp/broccoli-287939JHSjF3cH6iGD/cache-404-bundler/staging/l.js] /tmp/broccoli-287939JHSjF3cH6iGD/cache-404-bundler/staging/l.js 50 bytes {app} {tests} [built]
[../../../../../../tmp/broccoli-287939JHSjF3cH6iGD/cache-404-bundler/staging/tests.js] /tmp/broccoli-287939JHSjF3cH6iGD/cache-404-bundler/staging/tests.js 830 bytes {tests} [built]
[./node_modules/@glimmer/tracking/dist/modules/es2017/index.js] 62 bytes {vendors~app} [built]
[./node_modules/bigint-money/dist/index.js] 411 bytes {vendors~app} [built]
[./node_modules/dexie/dist/dexie.mjs] 172 KiB {vendors~app} [built]
[./node_modules/fast-memoize/src/index.js] 2.46 KiB {vendors~app} [built]
[./node_modules/focus-trap/index.js] 8.23 KiB {vendors~app} [built]
[./node_modules/intl-messageformat-parser/lib/index.js] 378 bytes {vendors~app} [built]
[./node_modules/intl-messageformat/lib/index.js] 303 bytes {vendors~app} [built]
[./node_modules/lodash.castarray/index.js] 1.56 KiB {vendors~tests} [built]
[./node_modules/lodash.last/index.js] 785 bytes {vendors~tests} [built]
[./node_modules/lodash.omit/index.js] 36.9 KiB {vendors~tests} [built]
    + 19 hidden modules

ERROR in ./node_modules/bigint-money/dist/util.js 16:24
Module parse failed: Identifier directly after number (16:24)
You may need an appropriate loader to handle this file type.
| exports.PRECISION = BigInt(exports.PRECISION_I); // Multiplication factor for internal values
| 
> exports.PRECISION_M = 10n ** exports.PRECISION;
| var Round;
| 
 @ ./node_modules/bigint-money/dist/index.js 17:13-30
 @ /tmp/broccoli-287939JHSjF3cH6iGD/cache-404-bundler/staging/app.js
Build Error (Bundler)

webpack returned errors to ember-auto-import

I saw @babel/plugin-syntax-bigint could do the job but i don't know how to configure this plugin ?

ef4 commented 4 years ago

I don't think @babel/plugin-syntax-bigint can help us here. That allows babel to parse the code, but it's not babel that is failing here, it's webpack.

Webpack uses acorn as its parser, and there does appear to be an acorn-bigint plugin that can parse bigint, but unforunately webpack doesn't let you add plugins to acorn. See for example https://github.com/webpack/webpack/issues/10216#issuecomment-573329749

However, from some quick testing it looks like the newest webpack builds in support for bigint. It should be enough for us to upgrade the version of webpack that ember-auto-import is using. We have been pinned to a slightly older version due to an npm bug that breaks users of webpack after 4.29.0 (see https://github.com/ef4/ember-auto-import/issues/192#issuecomment-466458116). But it's probably time to just try jumping ahead and hope the dependencies have shuffled enough that the npm bug doesn't bite much.

Let's see if we can release https://github.com/ef4/ember-auto-import/pull/299

oliverlj commented 4 years ago

I have fixed the webpack dependency in my yarn.lock => this is working. ember build as well

now if I build the production env, the build is fine, but when i ask for the route I got this error :

router.js:1250 Error while processing route: savings.saving Cannot convert a BigInt value to a number TypeError: Cannot convert a BigInt value to a number
    at Math.pow (<anonymous>)
    at Object.<anonymous> (http://simulator.services.localhost/assets/vendor-dbb21d81069a221a893d39be61d69783.js:18250:131)
    at o (http://simulator.services.localhost/assets/vendor-dbb21d81069a221a893d39be61d69783.js:18060:13)
    at Object.<anonymous> (http://simulator.services.localhost/assets/vendor-dbb21d81069a221a893d39be61d69783.js:18228:14)
    at o (http://simulator.services.localhost/assets/vendor-dbb21d81069a221a893d39be61d69783.js:18060:13)
    at Object.<anonymous> (http://simulator.services.localhost/assets/vendor-dbb21d81069a221a893d39be61d69783.js:18351:7)
    at o (http://simulator.services.localhost/assets/vendor-dbb21d81069a221a893d39be61d69783.js:18060:13)
    at s.callback (http://simulator.services.localhost/assets/vendor-dbb21d81069a221a893d39be61d69783.js:18071:305)
    at s.exports (http://simulator.services.localhost/assets/vendor-dbb21d81069a221a893d39be61d69783.js:19:21)
    at s._reify (http://simulator.services.localhost/assets/vendor-dbb21d81069a221a893d39be61d69783.js:22:35)
(anonymous) @ router.js:1250
error @ router.js:1187
S @ router.js:1347
c.triggerEvent @ router.js:194
t.trigger @ router_js.js:496
c.transitionDidError @ router.js:216
(anonymous) @ router_js.js:288
b @ rsvp.js:494
y @ rsvp.js:477
p @ rsvp.js:413
t.invoke @ backburner.js:373
t.flush @ backburner.js:263
t.flush @ backburner.js:470
r._end @ backburner.js:1044
_boundAutorunEnd @ backburner.js:684
Promise.then (async)
n @ backburner.js:29
flush @ index.js:43
r._scheduleAutorun @ backburner.js:1263
r._end @ backburner.js:1054
_boundAutorunEnd @ backburner.js:684
Promise.then (async)
n @ backburner.js:29
flush @ index.js:43
r._scheduleAutorun @ backburner.js:1263
r._ensureInstance @ backburner.js:1251
r.schedule @ backburner.js:820
e.schedule @ index.js:371
waitForDOMReady @ application.js:431
init @ application.js:337
r @ index.js:428
g @ core_object.js:98
e.create @ core_object.js:638
(anonymous) @ app-boot.js:3
waiter-manager.js:40 Uncaught (in promise) TypeError: Cannot convert a BigInt value to a number
    at Math.pow (<anonymous>)
    at Object.<anonymous> (waiter-manager.js:40)
    at o (waiter-manager.js:40)
    at Object.<anonymous> (waiter-manager.js:40)
    at o (waiter-manager.js:40)
    at Object.<anonymous> (waiter-manager.js:40)
    at o (waiter-manager.js:40)
    at s.callback (waiter-manager.js:40)
    at s.exports (loader.js:106)
    at s._reify (loader.js:143)

How can I debug this ?

oliverlj commented 4 years ago

error in production was beacuse of ie11 in targets for production build. ticket can be close, i saw no issue with webpack 4.43