Is there any problm is the following steps.
1- Suppose i have a js file rough1.js with the code shown below
export function exp1(a,b) {
return a * b
}
2- I've another file rough2.js
export var x = exp1(1,2);
3- In index.js I imported previous two script as shown below
import {exp1} from './rough1';
import {x} from './rough2';
Now when i perform npm run build it shows in console that
Uncaught ReferenceError: exp1 is not defined
So how to resolve this issue? How i will get my index.js to work with no error (recognising the imported value from one file in another)?
As far as i can see you need to use this statement in rouge2.js
import {exp1} from './rough1';
Thanks
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'
In the simple example below im getting the following error :
ReferenceError: Cannot access 'shared' before initialization
but if i change the export default 2 to a function it will work. Why is this behaviour?
index.js
import a from "./testA.js";
export default 2;
testA.js
import shared from "./index.js";
console.log(shared);
export default function () {}
I checked this both with webpack (code transpiled to es5) and with native modules in Chrome. With transpiled code it just logs undefined.
It only gives an error with native modules no matter if the export is a function or number.
This is because, as the error implies, the default export of index.js isn't initialized by the time you're trying to console.log it.
It's equivalent to doing something like:
console.log(a);
const a = 2;
shared will be initialized when 2nd line in index.js is executed, but the execution of index.js stops on line 1 and waits till execution of testA.js is done.
When compiled to es5, there's a different problem because the partially completed module is passed to another, so whatever wasn't initialized by that time ends up as undefined.
I want to use imageToZ64() from zpl-image module
I have installed it using: npm install zpl-image
and then I import it: import './../../../node_modules/zpl-image';
but when I use the fucntion like this let res = imageToZ64(canvas);
i'm getting : Uncaught (in promise) ReferenceError: imageToZ64 is not defined
I tried to import it like this: import { imageToZ64 } from './../../../node_modules/zpl-image/zpl-image';
but the problem is this function uses other functions from pako.js which is another js file in the zpl-image.
my question is how to import the module in a way that I can be able to access all the functions?
I highly recommend you read the README here : zpl-image repo GitHub
In order to use this with Node.js :
const imageToZ64 = require("zpl-image").imageToZ64;
Or :
const { imageToZ64, rgbaToZ64 } = require("zpl-image");
If you are trying to use it in the browser read generic browser usage
since you already installed it via npm there is a demo file in node_modules/zpl-image/zpl-image.html ,you can open it in the browser, read its content, and understand how the code works which is the purpose of the demo file.
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'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 */