I'm getting this error in my vuejs webApp, hope some one tell me how to solve it:
./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?
type=script&index=0!./src/components/Envio.vue
Module not found: Error: Can't resolve './firebase' in
'C:\Users\#####\Desktop\#####\src\components'
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?
type=script&index=0!./src/components/Envio.vue 17:0-32
# ./src/components/Envio.vue
# ./src/routes.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-
server ./src/main.js
this is the script in my vue file:
<script>
import { db } from './firebase'
export default {
data: {
mensaje: null,
... }
}
</script>
I assume you have installed firebase via a node package manager using npm command. If so, the following import statement should fix the problem.
import { db } from 'firebase'
Related
I am trying to get #next/mdx running with the new app directory. I followed the setup in the Readme of the package but i get the following error message when I try to render an mdx page. I can not find any information on this package what so ever.
Module not found: Can't resolve 'next-mdx-import-source-file'
1 | import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
> 2 | import { useMDXComponents as _provideComponents } from "next-mdx-import-source-file";
3 | function _createMdxContent(props) {
4 | const _components = Object.assign({
5 | h1: "h1",
This error occurs if the file mdx-components.js is not present in the project root directory.
This dependency is not an actual package but rather some next magic which actually imports the mdx-components.js file. In my case I missed out on on the plural.
I am creating an app with react bricks,
Everything was running smoothly until I wanted to import icons and then I ran an authentication, and now one of the main frontend packages is not found in my app.
Module not found: Can't resolve 'react-bricks/frontend'
1 | import { useState } from 'react'
> 2 | import { ReactBricks } from 'react-bricks/frontend'
3 | import type { AppProps } from 'next/app'
4 | import config from '../react-bricks/config'
I have uninstalled icon. I've tried running the following commands:
npm install --save react-bricks
npm install --save react-bricks-ui
I've also deleted and reinstalled node_modules.
This is my package.json:
{
"dependencies":{
"next":"^12.3.1",
"prism-theme-night-owl":"^1.4.0",
"prismjs":"^1.29.0",
"react":"^18.2.0",
"react-bricks":"^2.3.16",
"react-bricks-ui":"^0.1.17",
"react-dom":"^18.2.0",
"react-slick":"^0.29.0"
},
"devDependencies":{
"#types/node":"^18.8.2",
"#types/react":"^18.0.21",
"autoprefixer":"^10.4.12",
"concurrently":"^7.4.0",
"postcss":"^8.4.17",
"tailwindcss":"^3.1.8",
"typescript":"^4.8.4"
}
}
When running ng serve I have this result:
*./src/main.ts - Error: Module build failed
(from./node_modules/#ngtools/webpack/src/ivy/index.js)
../.component.scss:17:100: ERROR: Unterminated string token
*./src/polyfills.ts` - Error: Module build failed
(from./node_modules/#ngtools/webpack/src/ivy/index.js)
../.component.scss:17:100: ERROR: Unterminated string token
This angular version
Angular CLI: 14.0.6
Node: 16.16.0
Package Manager: NPM 8.14.0
OS: win32 x64
Angular: 14.0.6
Package Version
---------------------------------------------------------
#angular-devkit/architect 0.1400.6
#angular-devkit/build-angular 14.0.6
#angular-devkit/core 14.0.6
#angular-devkit/schematics 14.0.6
`#angular/cdk 14.0.5`
#angular/material 14.0.5
#nguniversal/express-engine 7.1.1
#schematics/angular 14.0.6
`rxjs 6.6.7`
typescript 4.6.4
/.component.scss
input[type=text]:disabled {
color: black;
}
.search-row {
.form-group > label {
font-size: 1.1em !important;
color: black;
}
}
.mat-table {
th.mat-header-cell {
font-size: 1.1em !important;
color: black;
}
}//<< here line 17.
#block {
margin: 0% 10%;
}
...
thank you for your help
For anyone landing there, temporarily set optimization: false in your angular.json file. The will allow to see the real error.
In my case it was an unsupported stylesheet import. But it can be any error thrown by Webpack sass-loader.
I added the "path/name" of the scss files in angular.json->projects->project name ->architect->build->options->styles as following then I could find the exact scss issues.
{
...
"projects": {
...
"my-project": {
...
"architect": {
"build": {
...
"options": {
...
"styles": [
...
"src/scss/style.scss",
"src/app/components/playlistDetail/playlist-detail.component.scss",
...
]
}
},
Then I could see Sass error as following.
./src/app/components/items/viewitem/viewitem.component.ts - Error: Module build failed (from ./node_modules/#ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
E:/f2022_indy/front/src/app/components/fan/fan.component.scss:17:100: ERROR: Unterminated string token
./src/app/components/fan/fan.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected whitespace.
╷
89 │ #media screen and(max-width: 767px) {
│ ^
╵
src\app\components\fan\fan.component.scss 89:26 root stylesheet
Run the following command
npx browserslist --update-db
For anyone that still has this issue, you can set optimization: false in your angular.json file and rebuild to see the real error with details and then put optimization: true back.
for me the error was that i had an $dark-color variable that is undefined.
I upgraded angular project from 5.2 to 14, I saw this error and its not displayed from which file the error came from.
I tried optimization: false in angular.json file but it did not work since upgrade converted .angular-cli.json to angular.json and json structure seems to be wrong.
I created a new sample project with angular and moved angular.json file from there to upgraded project folder, then changed optimization: false
This time errors shown are specific with line and file name. I resolved those errors in project css files and able to do ng serve
I want to use pdfMake in deno and not host the pdfMake files and vfs_fonts on my server, by using a CDN line CDNJS or esm.sh.
I have the following code in the to of my app.js file:
import pdfMake from "https://esm.sh/pdfmake"
import * as pdfFonts from "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/vfs_fonts.min.js"
but I get the following errors:
[!] [#0] starting `deno run -A app.js`
Download https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/vfs_fonts.js
Download https://deno.land/x/md5/mod.ts
error: Uncaught TypeError: Cannot read properties of undefined (reading 'pdfMake')
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
^
at https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/vfs_fonts.js:1:21
[E] [daem] app crashed - waiting for file changes before starting ...
I am not sure how to import or load the vfs_fonts from the CDN. Please note that my aim is to use a CDN for getting pdfMake and it's fonts.
I've changed the app.js file so that I only load the pdfmake from the CDN. I then load the fonts seperatly from the CDN into the pdfMake object:
import pdfMake from "https://esm.sh/pdfmake"
pdfMake.fonts = {
Roboto: {
normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf'
},
Merriweather: {
normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-Regular.ttf',
bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-Medium.ttf',
italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-Italic.ttf',
bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-MediumItalic.ttf'
},
}
I tried to use Match.ObjectIncluding in angular2-meteor1.3.1 project.
Based on this file meteor.d.ts, I can successful use
import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
However, when I tried to use
import { Match } from 'meteor/match';
I got error:
/Users/hongbo-miao/.meteor/packages/meteor-tool/.1.3.1.z9fvfj++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:267
throw(ex);
^
Error: Can't find npm module 'meteor/match'. Did you forget to call 'Npm.depends' in package.js within the 'modules-runtime' package?
at Object.Npm.require (/test/.meteor/local/build/programs/server/boot.js:195:17)
at options.fallback (packages/modules-runtime.js:413:18)
at require (packages/modules-runtime.js:98:16)
at meteorInstall.collections.methods.ts (collections/methods.ts:2:1)
at fileEvaluate (packages/modules-runtime.js:158:9)
at require (packages/modules-runtime.js:92:16)
at /test/.meteor/local/build/programs/server/app/app.js:905:1
at /test/.meteor/local/build/programs/server/boot.js:283:10
at Array.forEach (native)
at Function._.each._.forEach (/Users/hongbo-miao/.meteor/packages/meteor-tool/.1.3.1.z9fvfj++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
How can I import Match correctly? Thanks
So it turns out the typings file is wrong. The new typings file is here, which uses
'meteor/check'