Error on building angular library which uses dynamic imports.
When the library contains a file , which uses dynamic import to import a LazyModule,
import('./lazy/lazy.module').then(({ LazyModule }) => {
const MyComponent = LazyModule.entry;
....
The build will fail throwing error below.
Error: You must set "output.dir" instead of "output.file" when generating multiple chunks.
at error (c:\Development\rollup-test\node_modules\rollup\dist\rollup.js:3410:30)
at normalizeOutputOptions (c:\Development\rollup-test\node_modules\rollup\dist\rollup.js:17107:13)
at getOutputOptions (c:\Development\rollup-test\node_modules\rollup\dist\rollup.js:16865:24)
at Object.write (c:\Development\rollup-test\node_modules\rollup\dist\rollup.js:16957:43)
at Object. (c:\Development\rollup-test\node_modules\ng-packagr\lib\flatten\rollup.js:46:22)
at Generator.next ()
at fulfilled (c:\Development\rollup-test\node_modules\ng-packagr\lib\flatten\rollup.js:4:58)
Please export lazy.module in public-api.ts
Related
I'm trying to use bitcoinjs-lib, but I get errors, I think it has to do with the explanation to use browserify.
For this:
import BIP32Factory from 'bip32';
const tinysecp = require('tiny-secp256k1')
const bip32 = BIP32Factory(tinysecp);
I get the following:
Uncaught TypeError: ecc.isPoint is not a function
at Object.testEcc (testecc.js:5:1)
at BIP32Factory (bip32.js:9:1)
Here's an alternative, and I get a different error:
import { Signer, SignerAsync, ECPairInterface, ECPairFactory, ECPairAPI, TinySecp256k1Interface } from 'ecpair';
const tinysecp: TinySecp256k1Interface = require('tiny-secp256k1');
const bip32: ECPairAPI = ECPairFactory(tinysecp);
Results in following error:
./node_modules/ecpair/src/ecpair.js 66:7
Module parse failed: Unexpected token (66:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| class ECPair {
> __D;
| __Q;
| compressed;
Separately I tried to browserify bitcoinjs-lib and ecpair, but I think I'm doing something wrong.
I think bitcoin-js and tinysec are not going to work as is, because they are using some Node Js Core Features that are not Available at Runtime in an react-native app.
You can take a look at:
https://github.com/novalabio/react-native-bitcoinjs-lib as a substitute
or
https://gist.github.com/coreyphillips/4d45160fed016417a5f583f179c2cbdb a discussion about how to add bitcoin-js to react-native using a shim file
I have a component that uses #stripe/stripe-react-native named NativeCheckout.
This package does not work on web (Chrome), and when I import it I get an error:
Failed to compile
/home/joey/Projects/project/project_frontend/node_modules/#stripe/stripe-react-native/lib/module/components/StripeProvider.js
Module not found: Can't resolve '../../package.json' in '/home/joey/Projects/project/project_frontend/node_modules/#stripe/stripe-react-native/lib/module/components'
So if I run it in my browser, I do not want this component. This component is only rendered on native apps. I have found three alternative ways to import the Component. If my code is working fine then I add any of the follow lines, the above error is happening. I thought this would not load in the problem code.
const loadNative = async () => {
await import("./NativeCheckout")
}
const NativeCheckout = lazy(() => import("./NativeCheckout"));
const NativeCheckout = lazy(() => import("./NativeCheckout"));
Does anyone know a way to make this work?
TIA
I have a folder called functions under src in the same level as store
below code is from account/index.js
import store from 'src/store/index.js'
export async function abc () {
console.log(store.state) //prints undefined
store.commit('account/updateToken', 'asdas')
}
I am getting below error on this code
Uncaught (in promise) TypeError: src_store_index_js__WEBPACK_IMPORTED_MODULE_11__.default.commit is not a function
Is there anything I am missing on how to import store to a .js file?
did you define the store in
store/index.js
you have to
import myStoreName from './myStoreFolderName'
and then in the module section add your store
modules: {
myStoreName,
I was working on a react native project and while perfoming hot reloading app goes into cyclic recursion resulting in maximum call stack exceeded. More details of this issue can be found here
From here I realised that there is something wrong and circular dependencies are getting created.
I decided to give madge a try and see whats going on in the project. After running the command I saw quite a number of circular dependencies.
Now since my project is quite huge debugging that was quite a task so I created a small version of my project containing a single folder.
I created a utils folder in which I have 4 files: -
utils/index.js
utils/device-helper.js
utils/init.js
index.js
For imports I am using babel-module-resolver
utils/init.js
import {deviceInfo} from "utils";
export const init = () => {
// initialising app and calling backend API with device info
};
utils/device-helper.js
import DeviceInfo from "react-native-device-info";
const API_LEVEL = "v0";
export const deviceInfo = () => {
try {
return Object.assign({}, {
apiLevel: API_LEVEL,
deviceId: DeviceInfo.getUniqueID(),
device: DeviceInfo.getDeviceName(),
model: DeviceInfo.getModel(),
osVersion: DeviceInfo.getSystemVersion(),
product: DeviceInfo.getBrand(),
country: DeviceInfo.getDeviceCountry(),
appVersion: DeviceInfo.getVersion(),
manufacturer: DeviceInfo.getManufacturer(),
userAgent: DeviceInfo.getUserAgent(),
buildNumber: DeviceInfo.getBuildNumber(),
bundleId: DeviceInfo.getBundleId()
});
} catch (e) {
// TODO: Report to Bugsnag
return {};
}
};
utils/index.js
export * from "./init";
export * from "./device-info-helper";
index.js
export * from "./utils";
After running madge command I get following :-
tests-MBP:madge-test harkirat$ madge --circular index.js
Processed 4 files (684ms)
✖ Found 1 circular dependency!
1) utils/index.js > utils/init.js
However, if i change utils/init.js to following it works:-
utils/init.js
import {deviceInfo} from "./device-helpers";
export const init = () => {
// initialising app and calling backend API with device info
};
I am not able to understand the cause of this circular dependency. Can someone please help?
Here is link to the repository.
I don't see a .babelrc in the repo, but here is what I think:
In utils/init.js you import using:
import {deviceInfo} from "utils";
That is same as:
import {deviceInfo} from "./utils/index";
In utils/index.js you do a export * from "./init". This export from basically first imports all the contents of ./utils/init and the reexports it.
So:
utils/init.js imports from ./utils/index
./utils/index.js imports from ./utils/init
There is your circular dependency.
I have a small Aurelia app built with Webpack. Under my src folder I have util folder with index.ts inside. In main.ts I turn the feature on like this:
import { Aurelia, PLATFORM } from "aurelia-framework";
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.feature(PLATFORM.moduleName("util"));
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName("app")));
}
util/index.ts:
import { FrameworkConfiguration } from 'aurelia-framework';
export function configure(config: FrameworkConfiguration): void {
config.globalResources([
"./converters",
"./rest"
]);
}
converters and rest are Typescript modules under util.
I'm following the instructions from Aurelia Hub.
When I open the app in the browser I see the following error:
Uncaught (in promise) Error: Unable to find module with ID: util/index
at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:187)
at step (aurelia-loader-webpack.js:36)
at Object.next (aurelia-loader-webpack.js:17)
at aurelia-loader-webpack.js:11
at Promise (<anonymous>)
at webpackJsonp.64.__awaiter (aurelia-loader-webpack.js:7)
at WebpackLoader.webpackJsonp.64.WebpackLoader._import (aurelia-loader-webpack.js:152)
at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:252)
at step (aurelia-loader-webpack.js:36)
at Object.next (aurelia-loader-webpack.js:17)
If I reference the modules directly instead of the feature e.g.
import { Rest } from '../util/rest';
Then I get no errors and the app loads successfully. But I want to have these modules globally available.
Using aurelia-webpack-plugin version 2.0.0-rc.2
Would appreciate your advice.
Take a look at this:
https://github.com/aurelia/templating-resources/blob/master/src/aurelia-templating-resources.js
Edit:
I have gotten it working. The key is that you need to explicitly call PLATFORM.moduleName('./relative/path/to/file') on each path specifically and that the call needs to be made from the file (actually technically the same directory but still...) that calls config.globalResources().
In other words you can't shortcut the following code:
config.globalResources(
PLATFORM.moduleName('./resource1'),
PLATFORM.moduleName('./resource2')
);
Don't try to map the resources to PLATFORM.moduleName or to dynamically construct file names.
You should change your path PLATFORM.moduleName("util") into PLATFORM.moduleName("./util"). Then you can be able to use path relative to your util folder to register your globalResources. Also you can look into here for sample project structure. Also see this line of code, aurelia added /index to moduleName if it not included as it was based on convention.
If you already try using aurelia CLI, the created project under src/resources is registered as a feature.