i want to create custom web component, so i can reuse this component to another project, it's work locally when i run yarn serve
and then i publish it to npm, but when i import it to another vue project i got this error
Github Page : https://github.com/point-red/vue-point-table
vue.js:634 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'offsetHeight' of null"
found in
---> <PointTable>
<App>
<Root>
anyone can help ? i don't know where is the mistake
Related
I am building a student project. I have tried several times to incorporate Material UI into my project but have had no success. For instance, I am attempting to add "App Bar with Menu" linked here. I have installed npm install #mui/material #emotion/react #emotion/styled #material-ui/icons in React, and copied the code exactly from MUI's example into its own component in my project, but am receiving the following errors:
Compiled with problems:
ERROR in ./src/components/MenuAppBar/MenuAppBar.js 12:0-48
Module not found: Error: Can't resolve '#mui/icons-material/Menu' in '/home/michael/flatiron/phase-5/project-template/frontend/src/components/MenuAppBar'
ERROR in ./src/components/MenuAppBar/MenuAppBar.js 13:0-62
Module not found: Error: Can't resolve '#mui/icons-material/AccountCircle' in '/home/michael/flatiron/phase-5/project-template/frontend/src/components/MenuAppBar'
What am I missing? I don't see any documentation on this AppBar that would tell me I have to install something other than what I've installed, and I pulled up three youtube videos which simply show the user copying the code into a component, as I've done.
I am trying to get web-components work inside vue3 project.
I did following steps. (Try to make super simple way)
I made a new project on vue-cli.
I chose vue3 preview.
After that I tried to execute script, which should generate web-components from existing project components.
vue-cli-service build --target wc-async 'src/components/*.vue'
I get following error:
error in ./src/components/HelloWorld.vue?vue&type=template&id=0dfd15f1&bindings={"label":"props"}?shadow
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Unexpected token ? in JSON at position 17
at JSON.parse (<anonymous>)
at Object.TemplateLoader (C:\git\vue-tests\footest\node_modules\vue-loader-v16\dist\templateLoader.js:37:154)
# ./src/components/HelloWorld.vue?vue&type=template&id=0dfd15f1&bindings={"label":"props"}?shadow 1:0-424 1:0-424
# ./src/components/HelloWorld.vue?shadow
# ./node_modules/#vue/cli-service/lib/commands/build/entry-wc.js
I tested this scenario with vue2 starting template and everything works. Is there something what I dont understand correctly or is it so that this is not working with vue3.
I'm trying to use Google Cloud Text-to-Speech API in Meteor app, but get an error on the Meteor console and crash when trying to use the import function described in the instructions:
("Uncaught TypeError: Cannot convert undefined or null to object at Function.getPrototypeOf (<anonymous>)")
Here's what I've done (in app directory) before starting meteor:
meteor npm install google-tts-api
export GOOGLE_APPLICATION_CREDENTIALS="/data/authenticationinfo.json"
The problems are related to the inclusion of this line at the top of my js file:
import textToSpeech from '#google-cloud/text-to-speech';
This line cause the following Meteor startup error on the console:
"Unable to resolve some modules: "http2" in /app/node_modules/#grpc/grpc-js/build/src/channel.js (web.browser)
If you notice problems related to these missing modules, consider running:
meteor npm install --save meteor-node-stubs
Actually, I ran the above command, but it has no effect. When I run start the app, it crashes quickly with the error :
Uncaught TypeError: Cannot convert undefined or null to object
at Function.getPrototypeOf ()
at module.exports (modules.js?hash=59a3378abff937a73bf3a9865d654fce71b9583a:91277)
at index.js (modules.js?hash=59a3378abff937a73bf3a9865d654fce71b9583a:86991)
at fileEvaluate (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:346)
at Module.require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:248)
at require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:268)
at jwtclient.js (modules.js?hash=59a3378abff937a73bf3a9865d654fce71b9583a:79821)
at fileEvaluate (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:346)
at Module.require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:248)
at require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:268)
I have tested it on a barebones node app, and my Google authentication json file works fine, so that's definitely not the problem.
I realize there are are some Meteor packages for Google TTS, but they're really old and use Google Translate (which won't work for long) instead of the new cloud services.
So, it turns out the import has to happen on the server side, NOT the client side.
I decided to upgrade my modules after updating my mongo engine to wiredtiger. Suddenly the compiler is throwing strange readOnly errors - not only with vuex imports, but components. Here is my console output:
=> Errors prevented startup:
While building for web.browser:
imports/vue/root.vue:70: [vue-component] Error while compiling in tag
<script> col:66: C:/src/app/imports/vue/root.vue:
"mapState" is read-only
imports/vue/home.vue:5: [vue-component] Error while compiling in tag
<script> col:62: C:/src/app/imports/vue/home.vue:
"mainmap" is read-only
imports/vue/login.vue:7: [vue-component] Error while compiling in tag
<script> col:68: C:/src/app/imports/vue/login.vue:
"Template" is read-only
imports/vue/logout.vue:5: [vue-component] Error while compiling in tag
<script> col:73: C:/src/app/imports/vue/logout.vue:
"users" is read-only
Note that I am using the "vue": "git://github.com/mitar/vue.git#meteor", fork of vue in my package.json. Using a stack from the /meteor-vue/vue-meteor github project.
Appreciate any help!
This turned out to be a meteor package version issue. Reverting my meteor versions file to previous state solved it.
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.