I've installed the following library via bower: https://github.com/kaimallea/isMobile/blob/master/isMobile.js
And imported it into my ember-cli project via in ember-cli-build.js:
app.import('bower_components/isMobile/isMobile.min.js');
While it's available via window, I also want to use it directly in Fastboot mode in node.
You can see in the source of the library, that it actually exports itself for Browserify via module.exports = instantiate();, so I tried to import it via
import isMobile from '../bower_components/isMobile/isMobile.min.js';, but that throws
Error: Could not find module "frontend/bower_components/isMobile/isMobile.min.js" imported from "frontend/helpers/is-mobile-test"
I think I'm just missing something obvious.
The mentioned library seems to be available as a node module as well. You can declare it as a fastboot dependency and execute it as mentioned in their docs when the app runs in fastboot mode
Related
I'm trying to use lit-html to save my self some time, but I'm having trouble getting everything set up correctly.
Electron 4.1.1
Node 11.15
As of 5 minutes before posting this, I've run npm install and electron-rebuild, no luck.
I use require() as one would with any other NPM package
var render = require('lit-html').render
var html = require('lit-html').html
console.log(require("lit-html"))
Unfortunately, I'm greeted with this error
In reference to the three lines of code above.
I don't see any problems with my code.
I've tried reinstalling lit-html through NPM to no avail. I would really love to use this library, but first I have to get over this hurdle. If I'm being honest, I don't know if this error is reproducible, but nothing I do seems to fix it. The problem seems to lie with node and the way that imports are handled.
Am I missing something here? Is this a common issue? If so, what can I do to fix it?
You need to transpile lit-html before you can require it
I tested require('lit-html') and I was greeted with this error:
/home/chbphone55/Workspace/test/node_modules/lit-html/lit-html.js:31
import { defaultTemplateProcessor } from './lib/default-template-processor.js';
It clearly states that the error is coming from lit-html/lit-html.js:31 where the line uses ES Module import syntax.
You can transpile it using tools like Babel or similar ones. However, you may want to try using ES Module syntax so you can import lit-html without transpiling it.
Example:
<!-- HTML File -->
<script type="module" src="index.js"></script>
// index.js
import { html } from 'lit-html';
What if you can't use type="module"
If you are unable to use the type="module" method above, you can also use the ESM package.
ESM is a brilliantly simple, babel-less, bundle-less ECMAScript module loader.
Here are a few examples of how to use it:
Using the node require flag (-r) to load esm before everything else
node -r esm index.js
Loading esm in your main file then loading the rest of your code.
// Set options as a parameter, environment variable, or rc file.
require = require('esm')(module/*, options*/)
module.exports = require('./main.js')
I am trying to use swrve web sdk in my ionic project but not able to initialize it. Following is the documentation link
https://docs.swrve.com/developer-documentation/integration/web/#Installing_the_SDK
I have install the SDK using npm command:
npm install #swrve/web-sdk
after that i use the import statement:
import SwrveSDK from "swrvesdk";
in a constructor function i declare it as a following
SwrveSDK.default.createInstance({
appId: <app_id>,
apiKey: "<web_api_key>",
externalUserId: "<external_user_id>",
});
but when i run ionic serve i get following error
ERROR TypeError: Cannot read property 'createInstance' of undefined
Whats the proper way for declaring npm package or web javascript libraries?
The documentation looks wrong. Plain wrong.
Try
import SwrveSDK from "#swrve/web-sdk";
SwrveSDK.createInstance({
appId: <app_id>,
apiKey: "<web_api_key>",
externalUserId: "<external_user_id>",
});
I suspected that they copied and pasted the CommonJS and then forgot to edit it.
Examination of the source code confirms this, the telltale line being
https://github.com/Swrve/swrve-web-sdk/blob/release-1_0/SwrveSDK/src/Swrve.ts#L399
The reason SwrveSDK.default.createInstance looks so suspicious is that the statement import SwrveSDK from " #swrve/web-sdk"; imports the export named default from the main module of the package, binding it to the name SwrveSDK. Of course it is conceivable that the default export could itself have a property named default but the example using CommonJS suggests otherwise.
Note that you may need to set --allowSyntheticDefaultImports and --esModuleInterop.
Also be sure that you are using TypeScript >= 2.7 or an ES module interop aware loader such as SystemJS.
I am trying to get the components imported into a Nuxt project, following the steps here:
https://github.com/viljamis/vue-design-system/wiki/getting-started#using-design-system-as-an-npm-module
Nuxt does not have a main.js (everything is plugin based), so what I have done is create a "plugin" and then do the import code in there like so (Nuxt recommends this for other libraries too and works fine):
vue-design-system.js
import Vue from 'vue'
import system from 'fp-design-system'
import 'fp-design-system/dist/system/system.css'
Vue.use(system)
Then in my config I do (removed other code in config):
nuxt.config.js
module.exports = {
css: [
{ src: 'fp-design-system/dist/system/system.css', lang: 'css' }
],
plugins: [
{ src: '~plugins/vue-design-system', ssr: true }
]
}
When I run npm run dev in my theme, it builds, but I get a warning:
WARNING Compiled with 1 warnings warning in
./plugins/vue-design-system.js 7:8-14 "export 'default' (imported as
'system') was not found in 'fp-design-system'
Seems to have an issue with the generated system.js regarding the export (the command npm run build:system).
In my page on screen I get the following error when trying to use a component in the design system:
NuxtServerError Cannot find module
'fp-design-system/src/elements/TextStyle' from
'/Users/paranoidandroid/Documents/websites/Nuxt-SSR'
If I hard refresh the page, I then get another message:
NuxtServerError render function or template not defined in component:
anonymous
Any idea what's happening here? It would be really great to get this working somehow.
At this current time, I'm not sure if it's a Nuxt issue or a Vue Design System issue. I think the latter, just because the Nuxt setup I have right now is very bare-bones...so it's not something else causing this.
Thanks.
Repository on GitHub:
Here is the repo for my "theme", but in order to get this going, you will need to create a design system separate from this with the same name and follow the steps to use the design system as a local (file) NPM module.
https://github.com/michaelpumo/Nuxt-SSR
console.log of system (from the JS import statement)
As for your first error (""export 'default' (imported as 'system') was not found in 'fp-design-system'"), the UMD built JS from vue-design-system does not export a "default" object. But you can simply workaround the issue by importing it as:
import * as system from 'fp-design-system'
instead of:
import system from 'fp-design-system'
Then another issue comes quickly as you noticed in your comments: "window is not defined", due again to the UMD built JS that expects window to be globally available, instead of the usual trick to use this (which equals window in a browser). Therefore as it is, the build is not comptible with SSR.
You could however slightly rework the built JS by replacing the first occurrence of window by this, but I am not sure if the result will still work.
Most probably you should better keep this module for client rendering only.
It seems Vue is looking for the ES6 pattern for importing module, which you should use for external javascript modules/files.
in ES6 it is
export default myModule
in ES5 it was
module.exports = myModule
Hope it will help.
I'm having trouble updating an older Ember app.
I've ported the code into a new, empty ember app and installed the dependencies. I get no error when I serve the app, but when I inspect the browser console, I see that the app failed to launch.
Uncaught Error: Could not find module `ember/load-initializers` imported from `<my-app>/app`
I've seen a similar SO post that suggested this was caused by issues with ember-cli and jquery. link
However, that post is over a year old and I'm running an up-to-date version of ember along with an newer jquery library. Sure, it's no guarantee, but it seems a bit unlikely that this is still an issue for ember-cli.
My app/app.coffee file is pretty basic (no additions)
`import Ember from 'ember'`
`import Resolver from 'ember/resolver'`
`import loadInitializers from 'ember/load-initializers'`
`import config from './config/environment'`
Ember.MODEL_FACTORY_INJECTIONS = true
App = Ember.Application.extend
modulePrefix: config.modulePrefix
podModulePrefix: config.podModulePrefix
Resolver: Resolver
loadInitializers(App, config.modulePrefix)
`export default App`
From the console, I can verify that my app is using the expected jquery version:
$ Ember.$.fn.jquery
"3.2.0"
However, from the command line, I get a different version.
$ bower jquery -v
1.8.0
I'm not sure whether that's meaningful or a red herring.
At any rate, my ember-cli is fairly recent.
ember-cli: 2.12.0
I've added links to the package.json and bower.json files, in case they contain any clues.
At this point, I'm not really sure how to troubleshoot the issue. The depency
import Resolver from './resolver'
import loadInitializers from 'load-initializers'
Update those line app.js file and try it
If you haven't done this already, in the app.js, switch
import loadInitializers from 'ember/load-initializers'
over to
import loadInitializers from 'ember-load-initializers'
they changed the naming conventions of loadInitializers recently.
Meteor application directory layout:
imports/
api/
collections/
MyCollectionFile.js
packages/
mypackage/
mypackageMain.js
I can export anything from the package file and use it inside the application, that's ok. But how can I use "import" in the package, like the other way around?
// mypackageMain.js
if (Meteor.isServer) {
require ('/imports/api/collections/MyCollectionFile.js');
};
OR
import '/imports/api/collections/MyCollectionFile.js';
I tried using the path '../../imports/api/collections/MyCollectionFile.js' but it simply does not work. I can not access this file from a package.
I get the following Error for both the import and the require:
W20160618-23:25:59.486(3)? (STDERR) Error: Cannot find module '../../imports/api/collections/MyCollectionFile.js'
W20160618-23:25:59.487(3)? (STDERR) at require (packages/modules-runtime/.npm/package/node_modules/install/install.js:85:1)
Figured out that this was not possible.
However, moving the collections to a package and exporting them would make the collections available to other packages and the application.
I've also been running in to this issue and have found two solutions, both are sub-par though.
Install the thing you want to import as a npm package. $npm install --save ./imports/<the thing>.
Use npm link to create a link to the thing you want to import.
Both solutions require that you have a package.json in the directory you want to import and both won't be transpile the code and just run it against the provided version of node.
A possible solution for the transpile issue would be using a loader plugin, or somehow provide a additional configuration to System.js to tell it to transpile the code on import.