TextGeometry.js and FontLoader.js dependencies were not found - vue.js

I use Trois.js to create Vue.js+Three.js app. I installed Trois.js library:
npm install three#0.127 troisjs
I imported some basic elements to my Vue module, just like Renderer, Scene etc.
import {Renderer, Scene, Camera, Sphere} from 'troisjs'
When I run npm run serve then the error comes up:
These dependencies were not found:
three/examples/jsm/geometries/TextGeometry.js in ./node_modules/troisjs/build/trois.module.js
three/examples/jsm/loaders/FontLoader.js in ./node_modules/troisjs/build/trois.module.js
What's interesting, TextGeometry and FontLoader exist in node_modules under abovementioned directory:
..build/trois.module.js
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
...
I don't know why this error comes up, I reinstalled trois.js package but in vain. Still doesn't work. This is my package.json file:
{
"name": "troisapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"three": "^0.127.0",
"troisjs": "^0.3.3",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0",
"prettier": "^2.2.1"
},
"description": "## Project setup ``` npm install ```",
"main": ".eslintrc.js",
"keywords": [],
"author": "",
"license": "ISC"
}

TextGeometry and FontLoader were moved to the examples with r133. Meaning trois.js expects that you work with a more recent three.js version and not with r127.

Related

Vue.config.js could not recognize require('webpack')

I create a vue3.0 + ts project by CLI, when I add vue.config.js, it always have error on require
const webpack = require('webpack');
const path = require('path');
The errors are
module "d:/learning/vue-3-ts-demo/node_modules/webpack/types"
Require statement not part of import statement`.
I have install webpack 5.65.0
My packages.json:
{
"name": "vue-3-ts-demo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typescript": "~4.1.5",
"webpack": "^5.65.0"
}
}
It is a new vue project and what is the problem?
The errors are
module "d:/learning/vue-3-ts-demo/node_modules/webpack/types"
Require statement not part of import statement`.
For this error, I delt with it by adding '#typescript-eslint/no-var-requires': 0 in.eslintrc.js
rules: {
'#typescript-eslint/no-var-requires': 0
}
I have install webpack 5.65.0
Since my vue CLI is 4.5.14, I reinstall webpack version as 4.x too, and it works finally.

Tailwind error during build with vue project

My Vue2 Tailwind CSS project is running well in dev. But for production I still have an issue :
cross-env NODE_ENV=production && npx tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build
(node:19240) UnhandledPromiseRejectionWarning: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
I tryed to use PostCSS8 and also the Compat 7 Version that are mentionned in many stackoverflow posts, but this absolutely does nothing.
Any way to make it works under Vue 2 ?
Here is my package.json :
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build:local": "SET NODE_ENV=production && npx tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build",
"build": "cross-env NODE_ENV=production && npx tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"bootstrap": "^5.0.1",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"tldts": "^5.7.38",
"vue": "^2.6.14",
"vue-cookies": "^1.7.4",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#tailwindcss/postcss7-compat": "^2.2.7",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-pwa": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"postcss": "^7.0.36",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.8",
"vue-template-compiler": "^2.6.11"
}
}
i'm having the same issue.
If you install tailwind compat version at 2.1.4 it will work, but i need some fixes and functionalities added later.
For you to try this fix, change on your package.json
- "#tailwindcss/postcss7-compat": "^2.2.7"
+ "#tailwindcss/postcss7-compat": "2.1.4",
If someone can get it to work above 2.1.4 please respond here.

Vue 3 Storybook

I have successfully installed Storybook for Vue, but it doesn't seem to handle Vue 3 components very well.
I believe this is because the Vue version is #vue/cli 4.5.11 when I run "vue -V" & the Storybook is 6.1.17 when I run "start-storybook -V"
I don't get how this works. Am I on Vue 3? How do I get Storybook to understand my Vue 3 components?
Here is my package.json file:
{
"name": "component-library",
"version": "0.1.0",
"private": true,
"description": "Component Library",
"repository": {
"type": "git",
"url": ""
},
"license": "MIT",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"dependencies": {
"#storybook/theming": "^6.1.18",
"#vue/composition-api": "^1.0.0-rc.2",
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#storybook/addon-actions": "^6.1.11",
"#storybook/addon-essentials": "^6.1.11",
"#storybook/addon-links": "^6.1.11",
"#storybook/addons": "^6.1.18",
"#storybook/vue": "^6.1.11",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-unit-jest": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/test-utils": "^1.0.3",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^1.19.1",
"vue-template-compiler": "^2.6.11"
}
}
Right now, you are on Vue version 2.6.11, which isn't Vue 3.
You can easily upgrade your project with the Vue CLI command:
vue add vue-next
After that make sure to upgrade Storybook:
npx sb#next init
You can checkout the blog post by Storybook about the Vue 3 integration.

"exports is not defined" error in brand new Vue.js 3 project

I am creating a Vue project with VueCli v4. Actually I did it like hundreds of times before but today I got an error.
I am creating with "vue create live-chat"
Then I pick Vue 3, Babel and Router.
When everything is created I go to subfolder and run "npm run serve" as usual.
Everything gets compiled without a problem but when I go to http://localhost:8080, I got this error
vue-router.esm-bundler.js?6c02:2306 Uncaught ReferenceError: exports is not defined
at Module.eval (vue-router.esm-bundler.js?6c02:2306)
at eval (vue-router.esm-bundler.js:3375)
at Module../node_modules/vue-router/dist/vue-router.esm-bundler.js (chunk-vendors.js:1236)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (index.js?a18c:1)
at Module../src/router/index.js (app.js:1219)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (main.js:12)
I used the same command yesterday without a problem. This is my package.json:
{
"name": "live-chat",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"firebase": "^8.1.2",
"vue": "^3.0.0-0",
"vue-router": "^4.0.0-0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0-0"
}
}
This is the folder I create:
C:\Users\Bugra\Documents\GitHub\Frontend\Udemy\Build Web Apps with Vue JS 3 and Firebase\Section 13 - PROJECT BUILD - Live Chat Room with Authentication\live-chat
Can you please help me?
*Edit
I have put the Udemy instructor's package.json file and it worked. Only difference is firebase version. Still it would be great if you know the reason.
"name": "live-chat",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"firebase": "^8.0.1",
"vue": "^3.0.0-0",
"vue-router": "^4.0.0-0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0-0"
}
}
I encountered the same issue. Changing to the following versions & re-running yarn or npm install worked for me:
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.3"
},
Note: I scaffolded the app via npx #vue/cli create my-app then added the vue-router dependency.

Vue.js: Not Getting CSS Reference of External Component datetimepicker in the dist Folder

I have used an external component datetimepicker in my component and it works fine as shown below when I run the project.
But while building for production as web component to get the min.js files inside dist directory, not getting CSS reference of that external component datetimepicker in the received js files inside the dist directory. It does not render styles of the datetimepicker field. It is displaying like below. Is there any solution for that?
I have executed below command:
$ npm install vuejs-datetimepicker
And used below code for that
<td align="left">
<datetime format="DD-MM-YYYY h:i:s" width="280px" v-model="dateTime"></datetime>
</td>
import datetime from 'vuejs-datetimepicker';
export default {
components: {
datetime
}
}
And I used the command npm run build to build as web component.
Attaching my package file below:
{
"name": "ABC",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --target wc-async --name common-apps
./src/App.vue",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vuejs-datetimepicker": "^1.1.13",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.2.0",
"#vue/cli-plugin-eslint": "^4.2.0",
"#vue/cli-plugin-unit-jest": "^4.2.0",
"#vue/cli-plugin-vuex": "^4.2.0",
"#vue/cli-service": "^4.2.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/test-utils": "1.0.0-beta.31",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.1.2",
"prettier": "^1.19.1",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
I fixed this issue just by executing the command npm install style-loader css-loader --save in the terminal.