I'm trying to add this react component to my meteor project:
https://github.com/dancormier/react-native-swipeout
I added this with standard browserify/npmhacks process. When I run the app initial thereafter, I receive this error:
Marks-MacBook-Air:meteor-app markshust$ meteor --settings settings/dev.json
[[[[[ ~/Sites/meteor-app ]]]]]
=> Started proxy.
=> Started MongoDB.
npm-container: updating npm dependencies -- react-native-swipeout, externalify...
=> Errors prevented startup:
While processing files with cosmos:browserify (for target web.browser):
lib/app.browserify.js: Unexpected token (53:6) while parsing file:
/Users/markshust/Sites/meteor-app/packages/npm-container/.npm/package/node_modules/react-native-swipeout/index.js
While processing files with cosmos:browserify (for target os.osx.x86_64):
lib/app.browserify.js: Unexpected token (53:6) while parsing file:
/Users/markshust/Sites/meteor-app/packages/npm-container/.npm/package/node_modules/react-native-swipeout/index.js
=> Your application has errors. Waiting for file change.
When I pull up line 53 of https://github.com/dancormier/react-native-swipeout/blob/master/index.js, it's hitting some jsx. The file is named with a .js suffix, so it appears Meteor is having a problem when it runs into the jsx code.
I'm assuming this is a common problem when using react components from npm with meteor. How does one easily resolve this?
Many thanks!
Mark
packages.json
{
"react-native-swipeout": "2.0.8",
"externalify": "0.1.0"
}
lib/app.browserify.js
Swipeout = require('react-native-swipeout');
lib/app.browserify.options.json
{
"transforms": {
"externalify": {
"global": true,
"external": {
"react": "React.require"
}
}
}
}
react-native-swipeout peer dependencies react-native
so you need add react-native in packages.json or package.js add Npm.depends
meteor 1.3 still use node0.10, but react-native need node 0.12,so react-native-swipeout need waite meteor 1.4 for use
$MONGO_VERSION = "2.6.7"
$NODE_VERSION = "0.10.45"
$NPM_VERSION = "2.15.1"
$PYTHON_VERSION = "2.7.10"
Related
I am attempting to set up a nuxt project with scss. I added the following packages to my project:
"sass": "^1.37.0",
"sass-loader": "10",
and I updated nuxt.config.js to say the following to point to my new scss main file:
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'~/assets/sass/main.scss'
],
I had to use older versions because i was getting errors with certain functions I was using but i managed to get it working correctly on my local machine, and it builds just fine repeatedly as I update code as well.
I am now trying to deploy to staging on a Linux/nginx server and I am getting the following errors when building npm run build:
ERROR in ./assets/sass/main.scss (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./assets/sass/main.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(1:1) postcss-custom-properties: <css input> Unknown word
> 1 | var(--font-size-2)/var(--font-ratio)
| ^
It looks like it's using css builder instead of sass builder! Does anyone know how to fix this? I doublechecked that the files on the server include the sass-loader and that the config is pointing to my .scss file, and i checked the documentation which states that Nuxt will automatically choose the correct loader.
What am I doing wrong?
I'm facing a very strange issue with next-pwa. Whenever I try to build a next-pwa project that includes a custom worker js file, the build fails with the following error:
info - Creating an optimized production build ..buffer.js:333
throw new ERR_INVALID_ARG_TYPE(
^
TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined
at Function.from (buffer.js:333:9)
at writeOut (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:56716:26)
at C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:56735:7
at arrayIterator (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\neo-async\async.js:1:14270)
at timesSync (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\neo-async\async.js:1:5037)
at Object.eachLimit (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\neo-async\async.js:1:14216)
at emitFiles (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:56617:13)
at C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:36508:26
at FSReqCallback.oncomplete (fs.js:184:5) {
code: 'ERR_INVALID_ARG_TYPE'
}
I have tried several things so far to fix this issue:
Clone the repo and updated all dependencies (i thought the issue might be webpack related)
Building the project without a custom worker file (works fine)
Downgrade to Node 10, 12, 14, 15, and re-install dependencies.
I've also tried the to use the code provided in the /example folder of the repo, but the same issue occurs there as well.
I'm not the only one facing this issue so i would appreciate help.
You can test it yourself using Gitpod, just open this link and navigate to the example, install dependencies and try yarn build.
Are you using webpack 5 or 4.x? I faced the same issue with webpack > 5 and fixed the same by passing the future object to withPWA " future: { webpack5: true }".
module.exports = withPWA({ future: { webpack5: true },
pwa: {
disable: false,
dest: "public",
//register: false,
skipWaiting: false,
runtimeCaching
}
})
I am building a project that utilises ServerMiddleware to render some pages client side only (I can't find another way of getting this working well without ServerMiddleware. Problems on refreshing pages and so on...)
The problem: Unfortunately every time I try and deploy to my Firebase Function through 'firebase deploy' I get an error:
Error: Cannot find module '~/serverMiddleware/selectiveSSR.js'
The function builds OK if I exclude the following line. Nuxt/ Vue is not including ~/serverMiddleware/ as part of its build as far as I can see.
Here is the code in nuxt.config.js to reference my serverMiddleware:
serverMiddleware: ['~/serverMiddleware/selectiveSSR.js']
Adding either the directory or path (as above) to the file itself within Build in nuxt.config.js does not help either. Maybe I am doing it wrong?
Everything works perfectly when testing (Not building) locally.
Any ideas on how I can resolve this please?
Thanks!
Ok so for anyone else who hits this, here is how I got around it.
Firstly, I don't know if this is the fault of Firebase Hosting or Nuxt (I would guess Nuxt but I stand to be corrected), but here is what to do....
1) Remove any reference to ServerMiddleware from nuxt.config.js
2) Add the following to nuxt.config.js
modules: [
'~/local-modules/your-module-name'
],
3) Create directory ~/local-modules/your-module-name in your project root
4) In the new directory, create a package.json:
{
"name": "your-module-name",
"version": "1.0.0"
}
and index.js - key thing, this.addServerMiddleware allows you to call middleware server-side
module.exports = function(moduleOptions) {
this.addServerMiddleware('~/serverMiddleware/')
}
5) Create directory ~/serverMiddleware
6) Add your middleware function to index.js in the new directory:
export default function(req, res, next) {
// YOUR CODE
next() // Always end with next()!
}
7) Update package.json with your new local module under "dependencies":
"your-module-name": "file:./local-modules/your-module-name"
Don't forget you need to do this within the functions directory too or Firebase will complain it can't find your new module
I've installed gitlab in my Meteor project with meteor npm install --save gitlab and imported the package in the imports/api/foo.js file with all the following variations (the comment on the front is the log of the Gitlab object):
import Gitlab from 'gitlab'; // {}
import * as Gitlab from 'gitlab'; // { default: {}, [Symbol(__esModule)]: true }
import { Gitlab } from 'gitlab'; // undefined
const Gitlab = require('gitlab'); // {}
const Gitlab = require('gitlab/dist/es5'); // {}
const Gitlab = require('gitlab/dist/latest'); // {}
If I run just console.log(require('gitlab')) with NodeJS, I get the correct result.
How am I supposed to import 'gitlab' from a meteor application?
I tried to reproduce the issue with a clean Meteor 1.8.0.2 project and it is working fine for me:
/server/main.js:
import Gitlab from 'gitlab'
Meteor.startup(() => {
console.log(Gitlab) // [Function: Bundle]
const api = new Gitlab({
url: 'http://example.com', // Defaults to https://gitlab.com
token: 'abcdefghij123456' // Can be created in your profile.
})
console.log(api) // full API as in documentation
})
So what options do you have here?
Make sure you use gitlab on the server
Check the node_modules folder, whether it is really installed there.
Try to reset your project using meteor reset and then start again so all node_modules a rebuild and all Meteor packages are rebuild and the local dev build is rebuild. This will often fix things.
Create a fresh project and start to reproduce the issue step by step, starting from my working example and change the file structure stepwise to the structure of your project.
I am getting started with meteor and react. This is what I have done:
meteor create simple-react
meteor add kadira:flow-router
meteor add kadira:react-layout
mkdir client server lib
mkdir client/components
touch client/head.html
touch lib/routes.jsx
In routes.jsx, I have added the home page route:
FlowRouter.route("/", {
name: "Home",
action(params) {
ReactLayout.render(Home);
}
});
In home.jsx, I have created a simple Home component.
In the browser console, I am getting an error: Unable to find "/".
If I convert the routes.jsx to route.js, then the routes work. But, I am getting the error: Not able to find the Home component in the browser log.
For some reason, the JSX is not being recognized by Meteor and not getting compiled to JS.
I have all the required packages - ecmascript, jsx, react, react-runtime.
Though I added kadira:react-layout, I had to explictly add react to the packages list. Adding react to the packages list fixed it.