I'm creating a website using ember and am currently having difficulty using the 'ember-cli-sheetjs' module in a component titled 'add-student.js'. I cannot seem to call any functions in the documentation using my current code.
To get the module in ember I added it to my dev dependencies inside package.json and then ran the "npm install" command which successfully installed the "ember-cli-sheetjs" module. I then try and use it by writing:
import Ember from 'ember';
import xlsx from 'npm:ember-cli-sheetjs';
//have also tried directly using the sheetjs module after
//installing sheetjs with the command
//npm install xlsx --save-dev
//import xlsx from 'npm:xlsx';
export default Ember.Component.extend({
fileinput: null, //this is set with an input handler in the hbs
actions: {
fileLoaded: function() {
console.log(this.get('fileinput')); //properly outputs the file name
var workbook = xlsx.readFile(this.get('fileinput'));
},
}
However this results an error saying:
add-student.js:134 Uncaught TypeError: _npmEmberCliSheetjs.default.readFile is not a function
I feel like the problem is that its not following the correct path to the function (which exists in the function documentation). If anyone can tell me what I'm doing wrong it would be a huge help.
Link to the module: https://www.npmjs.com/package/ember-cli-sheetjs
If anyone runs into this problem I have figured out a work around.
First in your index.html include the line:
<script src="assets/parsing/dist/xlsx.full.min.js"></script>
Next create a folder inside public (if it doesn't already exist) called assets. Next create a folder inside assets called 'parsing' and a folder in 'parsing' called 'dist'. Next in 'dist' create a file called 'xlsx.full.min.js'.
Next copy and paste the code from: https://raw.githubusercontent.com/SheetJS/js-xlsx/master/dist/xlsx.full.min.js into the xlsx.full.min.js file.
Finally, in whatever component you want to use the sheetjs module in just put the following below your import statement:
/* global XLSX */
This is a work around but it does allow you to use the sheetjs module.
Use Bower
// bower.json
"dependencies": {
"js-xlsx": "^0.11.5"
}
// ember-cli-build.js
module.exports = function(defaults) {
app.import('bower_components/js-xlsx/dist/xlsx.min.js');
}
and in your component as #Russ suggested:
import Ember from 'ember';
/* global XLSX */
Related
I have class components based project (a requirement by company, can't change to function components)
Once I ran elint --fix and started the project again, it gives me this error just for one file.
Parsed request is a module
using description file: C:\Users\Computer\Desktop\shop\package.json (relative paist or is not a directory
C:\Users\Computer\Desktop\shop\src\node_modules doesn't exist or is not a directory
looking for modules in C:\Users\Computer\Desktop\shop\node_modules
The file only contains an exported function that I use elsewhere to dispatch data. I'm not sure why it's looking in node_modules or how to fix this error.
The file looks something like this :
import store, { addToCart } from '../redux/store'
export function addToCartFunc (---props---) {
---code ----
store.dispatch()
}
I have no idea why this was happening, my guess it was recognizing the file as some kind of webpack but I fixed it by importing it as :
import { addToCartFunc } from './addToCartFunc.js'
instead of (like all others):
import { addToCartFunc } from './addToCartFunc'
Following is the entry point to my library, it generates a component with a dynamic tag:
// muvement.js
import { defineComponent, ref, onMounted, h } from 'vue';
const createMuvement = (tag) => {
return defineComponent({
name: `m-${tag}`,
setup(props, context) {
const root = ref(null);
onMounted(() => {
console.log(root.value);
});
return () => h(tag, { ...context.attrs, ref: root }, context.slots);
}
});
};
const muvement = (...tags) => {
const components = {};
tags.map((tag) => (components[`m-${tag}`] = createMuvement(tag)));
return components;
};
export { muvement };
It's expected to be consumed like so:
// Home.vue
<template>
<div>
<m-div>div</m-div>
<m-button>button</m-button>
</div>
</template>
<script>
import { muvement } from "muvement";
export default {
name: "Home",
components: {
...muvement("div", "button")
}
};
</script>
This works as expected when the library code is contained within the Vue app folder (assuming we are now importing from "#/components/muvement.js" instead of "movement").
That is:
-muvement-test-project (scaffolded with vue-cli)
- src
- views
- Home.vue
- components
- muvement.js
I've also published an alpha release that works fine when importing "muvement" after installing it directly from the npm registry (that is, npm install muvement instead of npm link muvement).
The Problem
During development, I want an app to test the library with that is separate from the library's directory.
I've used npm link to link the library to the test app (as I have done with many other projects in the past).
From /path/to/library
$ npm link
From /path/to/test/app
$ npm link muvement
So far so good. The module is available as a symlink in the test app's node_modules folder. So I import { muvement } from "muvement", run npm run serve, and... BOOM.
Everything explodes (see errors below). It's also probably worth noting that trying to import from the full path (i.e. C:/dev/npm/muvment/dist/es/index.js) results in the same issues as npm link does, so I don't think it has anything to do with the symlink directly.
This is what appears in the console:
For pretty much the entire day I have been trying to solve this one issue. I've seen several seemingly similar questions that were solved by settings Webpack's resolve.symlinks to false but that has no effect on my problem. I've read all through the docs and even Vue's source code (here is the offending line for those who are curious).
Since the warning suggests that the error is commonly attributed to async setup I thought maybe webpack was doing something weird that would make my code async. This doesn't seem to be the case as the call stack of both the working attempt and failed attempt are identical.
What's not identical is the scope.
Here is the scope for the example that is working:
And here is the failing one:
(Notice that the target parameter is null during the call to injectHook, which is obviously what prompts Vue to show a warning).
My question is, why does the location of the imported module make such a difference during the execution of the said module?
The library code and build setup are available here:
https://github.com/justintaddei/muvement
The test app is available here:
https://github.com/justintaddei/muvement/tree/example
If I've left out something important, please let me know in the comments. It's been a long day so I'm sure I've probably missed something.
Thank you.
The problem is your app is using two different vue dependencies under the hood - vue requires the same dependency to be used to keep track on reactivity, lifecycle, etc.
When you link a library npm/yarn will use that linked folder node_modules, but your app is using it's dependencies from it's node_modules.
When your app imports vue it will go app/node_modules/vue but when you import from your linked dependency it will be going to linked_dep/node_modules/vue.
app
node_modules
vue
linked library
node_modules
vue
One easy way to debug this issue is to change both vue dependency files with a console.log and check if the console is logging both.
So, I'm trying to import a json file to be able to set some params in my application. The code I'm using to import my json is:
import json from './json/config.json'
export default {
data() {
return {
URL_FILE_IMPORT: json.fileImport,
}
}
}
... and my config.json is very simple so far:
{
"fileImport": "<my_url_goes_here>",
}
The problem is that I'm facing this error:
ERROR Failed to compile with 1 errors
This relative module was not found:
* ./json/config.json in ./src/services/config.js
But I have access to the file, if I click in the ./json/config.json path.
I've seen that there are some differences between some vue.js versions about the json configuration. I'm not 100% sure how to see the version I'm using, but my #vue/cli-service is version 4.2.2. Does anyone knows how to solve it?
So, I've found my solution. It was very simple, I just needed to use
const jsonData = require('../json/config.json');
... and with this I can access jsonData.fileImport
Маке sure the path is correct, if you make import in file ./src/services/config.js with path "./json/data.json" it will look for json in ./src/services/json. Where exactly is your folder /json, if it is in src folder then import should be "../json/data.json". Usually there is alias in web-pack "#" which is to "/src", then import will be "#/json/config.json"
I have several typescript files in my project and one entry file index.ts (output file is created by webpack).
Individual files with logic export nothing.
Eg. file-one.ts:
document.getElementById('btn').onclick = function() {
console.log('Hello world');
}
How can I import files like the one above into main - entry file?
Eg. index.ts:
import `./file-one`
Return ERROR:
ERROR in ./src/index.ts
Module not found: Error: Can't resolve './file-one.ts' in './src/index.ts'
Eg. file-one.ts:
export click() {
console.log('Hello world');
}
How can I import files like the one above into main - entry file?
Eg. index.ts:
import {click} from `./file-one.ts`
document.getElementById('btn').onclick = click;
You should be able to do that without any problem... a module can be imported even if it is not exporting anything.
I noticed that you are using a back-tick here ... it should be a string like import './file-one.ts' ( though a back-tick in that case should raise another error)
Anyway just make sure your webpack configuration can load typescript files, and that the path to your file is correct, and it should work.
I am trying to manually include the #material/drawer npm package into my Ember app. I tried following this guide but I'm running into some weird errors in my Chrome dev console:
Uncaught SyntaxError: Unexpected token *
Uncaught ReferenceError: define is not defined
The first is from the imported node_modules/#material/drawer/index.js file and the second is from my generated shim.
My component code:
import Component from '#ember/component';
import { MDCTemporaryDrawer, MDCTemporaryDrawerFoundation, util } from '#material/drawer';
export default Component.extend({
init() {
this._super(...arguments);
const drawer = new MDCTemporaryDrawer(document.querySelector('.mdc-drawer--temporary'));
document.querySelector('.menu').addEventListener('click', () => drawer.open = true);
}
});
In my ember-cli-build.js:
app.import('node_modules/#material/drawer/index.js');
app.import('vendor/shims/#material/drawer.js');
My generated shim:
(function() {
function vendorModule() {
'use strict';
return {
'default': self['#material/drawer'],
__esModule: true,
};
}
define('#material/drawer', [], vendorModule);
})();
What exactly am I doing wrong? It almost seems as though raw ES6 code got imported rather than compiled into my JS build output.
I also read this SO post but there are too many answers and I'm not sure which to do. It seems this specific answer is what I'm trying to do but not verbatim enough.
Creating a shim only ensures that ember-cli gets an AMD module, which you then can import in your app files.
If the npm package needs a build or transpiling step beforhand, this won't work.
You need a way to get the package build within the ember-cli build pipeline.
Luckily there are addons which can take care of this for you: ember-auto-import and ember-cli-cjs-transform.
You may have also heard of ember-browserify, which does the same thing, but it's deprectaed in favor of ember-auto-import.
I'd suggest you try ember-auto-import:
ember install ember-auto-import
You then should be able to import as you tried:
import { MDCTemporaryDrawer, MDCTemporaryDrawerFoundation, util } from '#material/drawer';
No shim or app.import needed, as ember-auto-import will take care of this for you.