I installed nuxt as PWA then I installed parse client from
npm i nuxt-parse
after that i added in nuxt.config.js
['nuxt-parse', {
appID: "blablabla",
javascriptKey: "blablabla",
serverUrl: "https://parseapi.back4app.com"
}
after that when i use
this.$parse.User.logIn('username', 'password'))
it returns Error: You need to call Parse.initialize before using Parse.
please any help
I solved this issue when changed name of appid from appID to appId this is an issue in this pod
from['nuxt-parse', {
appID: "blablabla",
javascriptKey: "blablabla",
serverUrl: "https://parseapi.back4app.com"
}
to['nuxt-parse', {
appId: "blablabla",
javascriptKey: "blablabla",
serverUrl: "https://parseapi.back4app.com"
}
Related
Hi I am receiving the error that the project root is invalid. I will also add that I am using expo alongside my project.
This happens when executing the command npx expo export:web
Also happens when executing the command npx expo build
webpack.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin"],
};
};
metro.config.js
(Not sure if metro is relevant as I believe it is more for development purposes...)
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
react-native.config.js
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
web: {},
},
assets: ["./assets/fonts"], // stays the same
};
npm start works fine and everything works accordingly in the browser. The goal is to build this for production and begin hosting on a web server.
I am hoping that I am simply missing a location to a directory in a config file but any insight is appreciated.
First, just run it with expo start, after it started press w.
I am trying to get my first Jest Test to pass with React and Babel.
I am getting the following error:
SyntaxError: /Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton/TransportButton.less: Unexpected token
> 7 | #import '../variables.css';
| ^
My package.json config for jest look like this:
"babel": {
"presets": [
"es2015",
"react"
],
"plugins": [
"syntax-class-properties",
"transform-class-properties"
]
},
"jest": {
"moduleNameMapper": {
"^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
"^[./a-zA-Z0-9$_-]+\\.png$": "RelativeImageStub"
},
"testPathIgnorePatterns": [
"/node_modules/"
],
"collectCoverage": true,
"verbose": true,
"modulePathIgnorePatterns": [
"rpmbuild"
],
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react/",
"<rootDir>/node_modules/react-dom/",
"<rootDir>/node_modules/react-addons-test-utils/",
"<rootDir>/node_modules/fbjs",
"<rootDir>/node_modules/core-js"
]
},
So what am I missing?
moduleNameMapper is the setting that tells Jest how to interpret files with different extension. You need to tell it how to handle Less files.
Create a file like this in your project (you can use a different name or path if you’d like):
config/CSSStub.js
module.exports = {};
This stub is the module we will tell Jest to use instead of CSS or Less files. Then change moduleNameMapper setting and add this line to its object to use it:
'^.+\\.(css|less)$': '<rootDir>/config/CSSStub.js'
Now Jest will treat any CSS or Less file as a module exporting an empty object. You can do something else too—for example, if you use CSS Modules, you can use a Proxy so every import returns the imported property name.
Read more in this guide.
I solved this by using the moduleNameMapper key in the jest configurations in the package.json file
{
"jest":{
"moduleNameMapper":{
"\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
"\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
}
}
}
After this you will need to create the two files as described below
__mocks__/styleMock.js
module.exports = {};
__mocks__/fileMock.js
module.exports = 'test-file-stub';
If you are using CSS Modules then it's better to mock a proxy to enable className lookups.
hence your configurations will change to:
{
"jest":{
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
}
}
But you will need to install identity-obj-proxy package as a dev dependancy i.e.
yarn add identity-obj-proxy -D
For more information. You can refer to the jest docs
UPDATE who use create-react-app from feb 2018.
You cannot override the moduleNameMapper in package.json but in jest.config.js it works, unfortunately i havent found any docs about this why it does.
So my jest.config.js look like this:
module.exports = {
...,
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(scss|sass|css)$": "identity-obj-proxy"
}
}
and it skips scss files and #import quite well.
Backing my answer i followed jest webpack
Similar situation, installing identity-object-proxy and adding it to my jest config for CSS is what worked for me.
//jest.config.js
module.exports = {
moduleNameMapper: {
"\\.(css|sass)$": "identity-obj-proxy",
},
};
The specific error I was seeing:
Jest encountered an unexpected token
/Users/foo/projects/crepl/components/atoms/button/styles.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.button { }
^
SyntaxError: Unexpected token .
1 | import React from 'react';
> 2 | import styles from './styles.css';
If you're using ts-jest, none of the solutions above will work! You'll need to mock transform.
jest.config.js
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
roots: [
"<rootDir>/src"
],
transform: {
".(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest-config/file-mock.js",
'.(css|less)$': '<rootDir>/jest-config/style-mock.js'
},
};
file-mock.js
module.exports = {
process() {
return `module.exports = 'test-file-stub'`;
},
};
style-mock.js
module.exports = {
process() {
return 'module.exports = {};';
}
};
I found this working example if you want more details.
Solution of #import Unexpected token=:)
Install package:
npm i --save-dev identity-obj-proxy
Add in jest.config.js
module.exports = {
"moduleNameMapper": {
"\\.(css|less|scss)$": "identity-obj-proxy"
}
}
Update: Aug 2021
If you are using Next JS with TypeScript. Simply follow the examples repo.
Else you will be wasting days configuring the environment.
https://github.com/vercel/next.js/tree/canary/examples/with-jest
I added moduleNameMapper at the bottom of my package.json where I configured my jest just like this:
"jest": {
"verbose": true,
"moduleNameMapper": {
"\\.(scss|less)$": "<rootDir>/config/CSSStub.js"
}
}
I have a Nuxt project. Everything is OK when I generate a static page.
However, I need to send a POST request to the other server.
I tried to use both a proxy in nuxt.config.js and just direct query, but after deploy to the ngnix eventually, nothing works.
Please help.
UPDATE. Steps to reproduce.
Create Nuxt App including axios and proxy
Configure your proxy for other webservice:
proxy: {
'/api': {
target: 'http://example.com:9000',
pathRewrite: {
'^/api': '/',
},
},
changeOrigin: true,
},
call this service somewhere in the code:
const result = await this.$axios.post('/api/email/subscribe', {email: email})
run "yarn dev" and test the service. It works locally properly.
run 'nuxt generate' and deploy the static code hosting service, for example, hosting.com
run your page which calls the above-mentioned service.
As a result, instead of making POST call to the hosting.com/api/email/subscribe, it calls localhost:3000/api/email/subscribe.
Be sure to install the nuxt versions of axios and proxy in your project #nuxt/axios and #nuxtjs/proxy
after that in your nuxt.config.js add axios as module plus this options for axios and proxy:
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
//more modules if you need
],
/*
** Axios module configuration
*/
axios: {
proxy: true,
// See https://github.com/nuxt-community/axios-module#options
},
proxy: {
'/api/': {
target: process.env.AXIOS_SERVER, // I use .env files for the variables
pathRewrite: { '^/api/': '' }, //this should be your bug
},
},
now you can use axios in any part of the code like this
const result = await this.$axios.post('/api/email/subscribe', {email: email})
it will internally resolve to AXIOS_SERVER/email/subscribe without cause cors issues.
EXTRA: test enviroments in local using multiples .env files
you can configure .env for dev and .env.prod for production, after that in local you can use yarn build && yarn start for test your app with your production enviroment. You only need add this at the top of your nuxt.config.js file
const fs = require('fs')
const path = require('path')
if (process.env.NODE_ENV === 'production' && fs.existsSync('.env.prod')) {
require('dotenv').config({ path: path.join(__dirname, `.env.prod`) })
} else {
require('dotenv').config()
}
By definition on the Nuxt docs page what nuxt generate does is: Build the application and generate every route as a HTML file (used for static hosting).
Therefore, using proxy is out of question here. Take note that you path is not even being rewritten.
And probably the result you're looking for is not hosting.com/api/email/subscribe (wit /api), but hosting.com/email/subscribe.
Nevertheless, if you use nginx then I don't think you should use Nuxt's proxy option. Nginx is built just for that so point your API calls there and in nginx config file just declare where it should point further.
I'm trying to install Vue froala on my Laravel project.
I followed the exact instruction provided here: https://github.com/froala/vue-froala-wysiwyg but I get:
Cannot find module 'babel-runtime/core-js/json/stringify
Not sure if I have to touch the webpack.mix.js. I only try to add jQuery required by Froala. So now it looks like that:
const mix = require('laravel-mix');
mix.webpackConfig(webpack => {
return {
resolve: {
extensions: ['.js', '.vue'],
alias: {
'#':__dirname + '/resources'
}
},
plugins: [
// ...
// Jquery loader plugin.
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
}
})
I found people fixing a similar problem manually installing babel-runtime as a package.json dependancy. I did, but it didn't work.
Any help?
Based on a recommendation, I used:
import VueFroala from 'vue-froala-wysiwyg/dist/vue-froala.min.js'
... which worked for me.
I'm trying to implement Passport strategies into a sails hook, like this I can share on multiple project.
When I try to log I have this error :
Error: passport.initialize() middleware not in use
at IncomingMessage.req.login.req.logIn (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails-hook-passport/node_modules/passport-github/node_modules/passport-oauth/node_modules/passport/lib/passport/http/request.js:30:30)
at /Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails-hook-passport/api/controllers/AuthController.js:163:11
at Strategy.strategy.success (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails-hook-passport/node_modules/passport/lib/middleware/authenticate.js:194:18)
at verified (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails-hook-passport/node_modules/passport-twitter/node_modules/passport-oauth1/lib/strategy.js:169:16)
at returnResults (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/basic.js:168:9)
at /Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/basic.js:74:16
at /Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/operations.js:82:7
at Object.async.each (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/async/lib/async.js:121:20)
at /Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/operations.js:425:11
at /Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/operations.js:564:5
at Object.async.each (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/async/lib/async.js:121:20)
at _buildChildOpts (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/operations.js:453:9)
at _execChildOpts (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/operations.js:421:8)
at /Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/operations.js:80:10
at bound (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/lodash/dist/lodash.js:957:21)
at applyInOriginalCtx (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/utils/normalize.js:421:80)
I read that I have to add some middleware in config/http.js
middleware: {
passportInit : require('passport').initialize(),
passportSession : require('passport').session(),
order: [
'startRequestTimer',
'cookieParser',
'session',
'passportInit',
'passportSession',
'myRequestLogger',
'bodyParser',
'handleBodyParserError',
'compress',
'methodOverride',
'poweredBy',
'router',
'www',
'favicon',
'404',
'500'
]
}
All it's working after this but I'm under an installable hook and don't want to manually change http.js, is there a way to modify this from the hook ? Or fix the error without adding this.
If I understand correctly, you need to init passport.js in your middleware but want to avoid having to manually edit http.js in each of your projects. To do that you'd create an installable hook like so:
module.exports = function passware(sails) {
sails.config.http.middleware = {
passportInit : require('passport').initialize(),
passportSession : require('passport').session(),
order: [
'startRequestTimer',
'cookieParser',
'session',
'passportInit',
'passportSession',
'myRequestLogger',
'bodyParser',
'handleBodyParserError',
'compress',
'methodOverride',
'poweredBy',
'router',
'www',
'favicon',
'404',
'500'
]
}
return {};
}
To use it you simply copy the hook into your node_modules or npm publish and npm install it in your projects.