I'm using nuxt-env to access my env variables in vue-components and jest to test the components. But for the tests this.$env is undefined. Is there a way to configure jest to use the nuxt-env variables?
my nuxt.config.js :
['nuxt-env', { // Environment variables for runtime
keys: [
'FOO'
]
}],
the usage in vue components:
<script>
export default {
data: function() {
return {
bar: this.$env.FOO
}
}
}
</script>
Currently the jest-test for the component returns the following error:
Error: [Vue warn]: Error in data(): "TypeError: Cannot read property 'FOO' of undefined"
Related
I would like to use nuxt/content for some content from a database. When starting the development environment with npm run dev I get the following message
ERROR Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
and
[Vue warn]: Failed to resolve component: nuxt-content
my config
//nuxt.config.ts
export default defineNuxtConfig({
modules: [
'#nuxtjs/tailwindcss',
'#pinia/nuxt',
'#nuxt/content',
],
imports: {
dirs: ['stores'],
},
buildModules: [
'#nuxt/postcss8',
'#pinia/nuxt',
],
build: {
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
css: [
'#/assets/style/main.scss',
],
})
When i remove the module #nuxt/content the error message also disappears.
By the way, I use vite in this project.
I'm trying to use CanvasJS inside my project. I'm using RequireJS to manage the modules, and have this in the main script:
define(['domReady',"canvasjs","common-functions"], function(domReady,CanvasJS) {
domReady(function () {
window.CanvasJS = CanvasJS;
init_page_select();
});
});
This is what I have in my requireJS config file for the path:
"paths": {
// other stuff here
"canvasjs": "node_modules/canvasjs/dist/canvasjs.min"
},
I can see the canvasjs.min.js file being grabbed fine - but then I get this weird error:
ReferenceError: intToHexColorString is not defined[Learn More] canvasjs.min.js:7:7042
[33]</n.prototype.render https://www.test.org/2018/js/lib/node_modules/canvasjs/dist/canvasjs.min.js:7:7042
[28]</n.prototype.render https://www.test.org/2018/js/lib/node_modules/canvasjs/dist/canvasjs.min.js:5:14150
n/this.render https://www.test.org/2018/js/lib/node_modules/canvasjs/dist/canvasjs.min.js:8:17771
init_page_select https://www.test.org/2018/js/lib/spot_view_stats.js:83:2
<anonymous> https://www.test.org/2018/js/lib/spot_view_stats.js:4:3
domReady https://www.test.org/2018/js/lib/domready.js:105:13
<anonymous> https://www.test.org/2018/js/lib/spot_view_stats.js:2:2
execCb https://www.test.org/2018/js/lib/require.js:5:12859
check https://www.test.org/2018/js/lib/require.js:5:6575
enable/</< https://www.test.org/2018/js/lib/require.js:5:9031
bind/< https://www.test.org/2018/js/lib/require.js:5:812
emit/< https://www.test.org/2018/js/lib/require.js:5:9497
each https://www.test.org/2018/js/lib/require.js:5:289
emit https://www.test.org/2018/js/lib/require.js:5:9465
check https://www.test.org/2018/js/lib/require.js:5:7169
enable/</< https://www.test.org/2018/js/lib/require.js:5:9031
bind/< https://www.test.org/2018/js/lib/require.js:5:812
emit/< https://www.test.org/2018/js/lib/require.js:5:9497
each https://www.test.org/2018/js/lib/require.js:5:289
emit https://www.test.org/2018/js/lib/require.js:5:9465
check https://www.test.org/2018/js/lib/require.js:5:7169
enable https://www.test.org/2018/js/lib/require.js:5:9358
init https://www.test.org/2018/js/lib/require.js:5:5716
h https://www.test.org/2018/js/lib/require.js:5:4287
completeLoad https://www.test.org/2018/js/lib/require.js:5:12090
onScriptLoad https://www.test.org/2018/js/lib/require.js:5:13014
I'm invoking it with:
var chart = new CanvasJS.Chart("thegraph",
{
title:{
text: impressionText
},
theme: "theme2",
axisX: {
valueFormatString: "MMM-DD-YYYY",
labelAngle: -50
},
axisY:{
valueFormatString: "#0",
title: impressionText
},
data: [
{
type: "line",
showInLegend: true,
legendText: legendText,
dataPoints: dataPoints
}
]
});
chart.render();
Interestingly, if I tell it to load canvasjs.js instead of canvasjs.min.js, I get another error:
ReferenceError: intToHexColorString is not defined[Learn More]
OK so the problem seemed to be my version. For some reason "npm install canvasjs" was installing 1.8.1, but 2.2 was out. As per their request, I updated it to 2.2 and it sorted the problem. It seems weird npm is running such an outdated version though
I have a project to be upgraded from babel v6 to babel v7. To make it work is not hard, but I met some problems in unit testing code.
For working code foo.js like below.
import foo from './bar';
export {foo};
When I try to mock it in unit testing code.
import * as Foo 'path/to/foo.js';
Foo.foo = jest.fn().mockReturnValue('whatever');
It fails with error:
TypeError: Cannot set property foo of #<Object> which has only a getter
It turns out that babel v7 do transpilation different from v6. It compiles foo.js into:
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "foo", {
enumerable: true,
get: function get() {
return _bar.default;
}
});
Since foo is defined as a getter-only property of exports, it cannot manipulate the exported foo any more.
For the time being, I just change foo.js to avoid such transpilation. I'm wondering whether this is any babel config to disable such transpilation. Any ideas?
In Babel 7, you can disable this behaviour by enabling "loose" mode in #babel/preset-env. If you only want this behaviour for your test environment, you can further scope the configuration in your babelrc/babel.config.js.
babel.config.js
module.exports = {
env: {
production: {
presets: [
[
'#babel/preset-env',
{ loose: false },
],
],
},
test: {
presets: [
[
'#babel/preset-env',
{ loose: true },
],
],
},
},
}
See loose transformation.
My suspicion that Babel use to transpile properties differently than it does now. Properties that only define a getter are expected to throw a TypeError when using "use strict", otherwise no error is given.
Example Class
class TestClass
{
constructor ()
{
this._propOne = "JUMP";
}
get propOne ()
{
return this._propOne;
}
set propOne (value)
{
this._propOne = value;
}
get propTwo ()
{
return "HOW HIGH";
}
}
const testClass = new TestClass();
console.log(customer.propOne);
customer.propOne = "10 Feet!";
console.log(customer.propOne);
customer.propTwo = "20 Feet!";
Babel 6.x Log
> JUMP
> 10 Feet!
> HOW HIGH
> HOW HIGH
Babel 7.x Log
> JUMP
> 10 Feet!
> HOW HIGH
> Uncaught TypeError: Cannot set property propTwo of #<TestCustomer> which has only a getter
I have a little Node Express packaged application with the following webpack.config.js:
module.exports = {
target: 'node',
entry: './server.js',
output: {
filename: 'node-server.min.js'
}
}
When i run node node-server.min.js the application works fine but, when i load the file from Electron i am getting the following error message:
Uncaught Error: Could not find package.json up from: / at
Function.pkginfo.find (node-server.min.js:6373) at
Function.pkginfo.read (node-server.min.js:6390) at module.exports
(node-server.min.js:6341) at Object. (node-server.min.js:6403) at
Object.styles (node-server.min.js:6408) at webpack_require
(node-server.min.js:20) at Object. (node-server.min.js:14624) at
Object. (node-server.min.js:14699) at Object.
(node-server.min.js:14701) at webpack_require (node-server.min.js:20)
I am loading node-server.min.js file with a script tag.
Any ideas ?
I am struggling to load packery.js with require.js. The script is been loaded but I am getting the following error in the console, even if packery is not initialized on the page.
Uncaught TypeError: Cannot read property 'prototype' of undefined : packery.pkgd.js:486
And 486th row is this:
var EventEmitter = window.EventEmitter;
for ( var prop in EventEmitter.prototype ) {
Uncaught TypeError: Cannot read property 'prototype' of undefined
docReady[ prop ] = EventEmitter.prototype[ prop ];
}
That's the latest version of packery which i've just downloaded from the github.
Anyone experiencing the same issue? Thanks...
Here is a way to load:
1) define a path to your script:
require.config({
paths: {
.....
"jquery" : "path/to/jquery.js"
"packery" : "path/to/packery.js"
.....
}
2) define dependencies in shim section
shim:{
"packery" : ["jquery"]
}
3) Include library in module dependencies array and use it on callback
define(
[
"jquery",
"packery"
],
function($){
$('.some').packery
}
);