Meteor 1.3 upgrade warning with react.js - meteor

I'm going through the motions of upgrading a Meteor 1.2 app to 1.3.5.1 and have a large number of console warnings saying something like:
Warning: You are manually calling a React.PropTypes validation function for the direction prop on MosoTabsScroll. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://facebook.github.io/react/warnings/dont-call-proptypes.html for details.
I've read the link, and can't see how it applies to my code, which is pretty straightforward and worked perfectly in Meteor 1.2. For example, here is one of the React classes that is generating warnings:
import React from 'react';
MosoTabsScroll = React.createClass({
propTypes: {
direction: React.PropTypes.string,
active: React.PropTypes.bool
},
getDefaultProps() {
return {
direction: 'left',
active: false,
}
},
render() {
// Set the classNames
var aClasses = 'btn btn-default btn-shadow scroll-';
aClasses += (this.props.active ? "active" : "inactive");
return (
<a className={aClasses} onClick={this.props.onClick}>
<i className={"fa fa-lg fa-chevron-" + this.props.direction}></i>
</a>
)
}
});
The react package.json under node_modules/react says that it is version 15.3.0.

Not exactly an answer, but I've managed to get past these errors by starting from a fresh meteor directory, copying my files into that new directory, and then manually adding back all of the packages that were needed.
So I would put this down to a conflict with some older packages.

Related

Lazy loading fontawesome icons in vue3 + vite not working in DEV

In my vue3+vite project I'm using the official fontawesome vue3 package (see use with vue).
In order to enable tree-shaking you need to statically load the necessary icons (or possibly all of them) in advance using library.add. See for instance the following App.vue
<script setup>
import { ref, computed } from "vue";
import { library } from "#fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "#fortawesome/vue-fontawesome";
import { definition } from "#fortawesome/free-solid-svg-icons/faTruck";
library.add(definition);
const icon = ref("");
const showIcon = () => { icon.value = `fa-solid fa-truck`; };
</script>
<template>
<button #click="showIcon">Show Truck Icon</button>
<div v-if="icon">
<font-awesome-icon :icon="icon" />
</div>
</template>
here we statically load the truck icon and when you click the button the icon shows up.
What I was trying to do is loading the icons on demand (in this case, only when the button is clicked), using the following code:
<script setup>
import { ref, computed } from "vue";
import { library } from "#fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "#fortawesome/vue-fontawesome";
const modules = import.meta.glob(
"../node_modules/#fortawesome/free-solid-svg-icons/faTruck.js",
{ eager: false, import: "definition" }
);
const icon = ref("");
const showIcon = () => {
Object.values(modules)[0]().then((elem) => {
library.add(elem);
icon.value = `fa-solid fa-truck`;
});
};
</script>
<template>
<button #click="showIcon">Show Truck Icon</button>
<div v-if="icon">
<font-awesome-icon :icon="icon" />
</div>
</template>
But this doesn't work in "develpment" (npm run dev):
it makes a call to http://localhost:5173/node_modules/#fortawesome/free-solid-svg-icons/faTruck.js
then raises an error: Uncaught (in promise) ReferenceError: exports is not defined
while it works fine when the bundle is built (npm run build then for example serve the dist folder with http-server)
I suspect the problem is related to the fact that in development mode faTruck.js module is used "as is", while it is transpiled in the build phase.
Is there a solution?
NOTE:
The example contains only the "truck" because is over-simplified, but actually any icon should be loaded; i.e. the actual path in import.meta.glob should be ../node_modules/#fortawesome/free-solid-svg-icons/fa*.js
Full steps to reproduce the issue:
npm create vue#3 # accepts all defaults
cd vue-project
npm i #fortawesome/fontawesome-svg-core #fortawesome/free-solid-svg-icons #fortawesome/vue-fontawesome
# replace src/App.vue with the one indicated above
# run in dev with
npm run dev
# or build for prod and then expose using http-server
npm run build
npx http-server dist
Explaination
According to the Vite pre-bundling docs:
Vite's dev serves all code as native ESM. Therefore, Vite must convert dependencies that are shipped as CommonJS or UMD into ESM first
But when you use glob import with dynamic variables, your modules will not be pre-bundled. Since #fortawesome/free-solid-svg-icons/faTruck.js is a CommonJS file, it can not be used directly in ESM. And you are right that Vite does transform the module on production build, so it works well on production.
You may think about the optimizeDeps.include option but unfortunately, it does not help in this situation. Even if you add your module to the include list, Vite does pre-bundle your module but it will not use that pre-bundled file for your dynamic import. It still uses the file in node_modules/#fortawesome/free-solid-svg-icons/ folder.
I'm afraid that there is no straightforward solution to your problem. See this issue
Workaround
Just make it work differently on dev and prod.
const showIcon = async () => {
let x = 'faTruck'
let definition
if (import.meta.env.PROD) {
const iconModule = await import(
`../node_modules/#fortawesome/free-solid-svg-icons/${x}.js`
)
definition = iconModule.definition
} else {
const iconModule = await import(`#fortawesome/free-solid-svg-icons`)
definition = iconModule[x]
}
library.add(definition)
icon.value = `fa-solid fa-truck`
}
With this code, you still have the benefit of lazy loading on production and a smooth dev server to work
Another approach
Hard-coding your import list like so:
const showIcon = async (iconName) => {
const listImport = {
faTruck: () => import(`#fortawesome/free-solid-svg-icons/faTruck`),
faWarning: () => import(`#fortawesome/free-solid-svg-icons/faWarning`),
}
const iconModule = await listImport[iconName]()
console.log('iconModule', iconModule)
library.add(iconModule.definition)
}
But I bet you have hundreds of icons in your list so it hardly is an option

Attempted import error: 'styles' is not exported from './styles.scss' (imported as 'styles')

guys
I'm trying to build my react project, but it keeps saying
'Attempted import error: 'styles' is not exported from './styles.module.scss' (imported as 'styles').'
So, I guess I've got wrong settings in my webpack config file but have no idea what's wrong in there. I'm using css module so have tried this way https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules, but didn't work for me.
This is the one of the source file I'm using styles
import styles from "./styles.scss";
import { withRouter } from "react-router";
const ArrowBack = ({ history, onClick }) => {
return (
<button type="button" onClick={onClick || history.goBack} className={styles.arrowBack}>
<span className={styles.bar}></span>
</button>
);
};
export default withRouter(ArrowBack);
Here is my files
webpack config
https://gist.github.com/bbatta38/45695862bdde7928b788420793c006b6
package json
https://gist.github.com/bbatta38/4b91a2b84aaa237b54277b78525f8473
build js
https://gist.github.com/bbatta38/e18792375a107afcfedfeba48bc3fe1e
It's been already two days to find out any ways to make it work. Please help me if you have any idea to resolve this error.
Try
import styles from "./styles.module.scss";
It seems you're missing the 'module' in the file name.
since Gatsby v3 you need to import the style like this:
import * as styles from './styles.module.scss'

Unable to resolve path to module '#aws-amplify/ui-react/styles.css'

I am getting the error:
Unable to resolve path to module '#aws-amplify/ui-react/styles.css'
I am using the amplify authenticator component shown in the following link https://ui.docs.amplify.aws/components/authenticator#quick-start
I had already my backend configured as always and is fine and working.
npx create-react-app exampleapp
npm start
amplify init
amplify add api
amplify push
npm install aws-amplify #aws-amplify/ui-react
amplify add auth
amplify pus
The app.js is configured as follows
import { Amplify } from 'aws-amplify';
import { Authenticator } from '#aws-amplify/ui-react';
import '#aws-amplify/ui-react/styles.css';
import awsExports from './aws-exports';
Amplify.configure(awsExports);
export default function App() {
return (
<Authenticator>
{({ signOut, user }) => (
<main>
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
</main>
)}
</Authenticator>
);
In general the application runs fine and is able to connect with the amplify backend. The problem is that it can not find the css style. It seems that is not in the'#aws-amplify/ui-react'. My Node version is 16.13.1. Also, I am using the last version of the packages at this moment in the package.json
"#aws-amplify/ui-react": "^2.1.5",
"aws-amplify": "^4.3.10"
When I initially saw #senju's answer (upvote it!) I thought, "that will just hide the problem". But no, in my case eslint was the cause of the problem.
Rather than #senju's solution of disabling warnings for all unresolved imports, I suggest just disabling it for the specific import with an eslint-specific comment:
// eslint-disable-next-line import/no-unresolved
import '#aws-amplify/ui-react/styles.css';
Try upgrading aws-amplify to 4.3.11 or above and upgrade to the latest version of #aws-amplify/ui-react. This version is compatible with the latest version of create-react-app which uses Webpack 5. This issue was fixed in aws-amplify here:
https://github.com/aws-amplify/amplify-js/pull/9358
I had the same issue. Changing my eslint setting worked for me.
Here is my .eslintrc
{
"extends": [
"next",
"next/core-web-vitals",
"prettier",
"plugin:testing-library/react",
"plugin:import/recommended",
"plugin:import/warnings",
"plugin:storybook/recommended"
],
"rules": {
"import/no-unresolved": "off", //add
"import/order": [
"error",
{
"alphabetize": {
"order": "asc"
}
}
]
},
"overrides": [
{
"files": ["*.stories.#(ts|tsx|js|jsx|mjs|cjs)"],
"rules": {
"storybook/hierarchy-separator": "error",
"storybook/default-exports": "off"
}
}
]
}
I used the latest version of aws-amplify and still got the error on build. Changing .eslintrc worked.

How to integrate Material Ui with Meteor?

I am trying to integrate Material Ui with meteor and as a sample test tried executing the below but ended up with errors and no Idea how to resolve it. Anyone there to assist me in fixing this. Below are few detail to track.
How I installed ? --> meteor npm install #material-ui/core
How I Integrated code? Through Blaze React component
ExampleTest.js
Template.ExampleTest.helpers({
ExampleContainer() {
return ExampleContainer;
}
});
ExampleContainer.js
const ExampleContainer = withTracker(() => {
---------
})(Example);
Example.js
import React, { Component } from "react";
import { Button } from "#material-ui/core";
class Example extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Button color="primary">Hello World</Button>
</div>
);
}
}
export default Example;
What error did I receive ?
Error: In template "ExampleTest", call to `{{> React ... }}` missing `component` argument.
at Blaze.View.<anonymous> (react-template-helper.js?hash=3fb2a2954362a4acdee8150fb77f0f500dd28206:67)
at blaze.js?hash=cbd85c3fe14949f2d2b9a3b76334f5f0e96d553c:1934
at Function.Template._withTemplateInstanceFunc (blaze.js?hash=cbd85c3fe14949f2d2b9a3b76334f5f0e96d553c:3769)
at blaze.js?hash=cbd85c3fe14949f2d2b9a3b76334f5f0e96d553c:1932............
Any assistance on this ?
It looks like you're using Blaze template engine. You should use React instead.
https://www.meteor.com/tutorials/react/components
Material UI is a UI framework for use with React. It doesn't work with Blaze, and I don't think there is any way to use both Blaze and React in the same page.
To add Material UI to a Meteor/React project, install the package from the command line:
npm install #material-ui/core
And include the Roboto font in the head of your HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
For me this just worked, with nothing special needed for Meteor.
More instructions here: https://material-ui.com/getting-started/installation/

Failed to use react-bootstrap in meteor with Warning: React.createElement: type should not be null, undefined, boolean, or number

I want to use react-bootstrap in meteor. I used meteorhacks:npm and cosmos:browserify by following the instructions at:
https://react-in-meteor.readthedocs.org/en/latest/client-npm/
In myproj_root/packages.json, I added this line:
{
"react-bootstrap": "0.28.3",
"externalify" : "0.1.0"
}
After "meteor run", npm packages were automatically installed based on the command-line output. DropdownButton example works:
var {DropdownButton, MenuItem, Modal} = ReactBootstrap;
renderDropdownButton() {
return (
<div>
<DropdownButton title="Menu">
<MenuItem eventKey="1">New Post</MenuItem>
</DropdownButton>
</div>
);
},
However, when I tried Modal,
NewPostModal = React.createClass({
render() {
return (
<div>
<Modal onRequestHide={() => {}}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
</Modal>
</div>
);
}
});
the following error is thrown:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of NewPostModal
The problem seems to be that Modal.Header, Modal.Title are not recognized. Below are some of my package list info:
Meteor: 1.2.1
react 0.14.3* Everything you need to use React with Meteor
meteorhacks:npm 1.5.0 Use npm modules with your Meteor App
meteorhacks:ssr 2.2.0 Server Side Rendering for Meteor with
meteorhacks:subs-manager 1.6.3 Subscriptions Manager for Meteor
cosmos:browserify 0.9.4* Bundle NPM modules for client side with Brow...
Any help is appreciated.

Resources