I am building a react app with firebase library v7.15.5 and when I'm importing 'firebase/auth', it works fine but it throws me warnings in a terminal:
WARNING in ./node_modules/#firebase/auth/dist/auth.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\DeparturesSchedule\node_modules\#firebase\auth\dist\ [synthetic:es6\promise\promise] ' file: Error: ENOENT: no such file or directory, open 'D:\Projects\DeparturesSchedule\node_modules\#firebase\auth\dist\ [synthetic:es6\promise\promise] '
# ./node_modules/firebase/auth/dist/index.esm.js 1:0-24
# ./src/utils/firebase/firebase.ts
# ./src/store/actions/appProps/index.ts
# ./src/pages/schedule/index.tsx
# ./src/components/app/index.tsx
# ./src/index.tsx
# multi ./src/index.tsx
WARNING in ./node_modules/#firebase/auth/dist/auth.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\DeparturesSchedule\node_modules\#firebase\auth\dist\ [synthetic:es6\util\arrayiterator] ' file: Error: ENOENT: no such file or directory, open 'D:\Projects\DeparturesSchedule\node_modules\#firebase\auth\dist\ [synthetic:es6\util\arrayiterator] '
# ./node_modules/firebase/auth/dist/index.esm.js 1:0-24
# ./src/utils/firebase/firebase.ts
# ./src/store/actions/appProps/index.ts
# ./src/pages/schedule/index.tsx
# ./src/components/app/index.tsx
# ./src/index.tsx
# multi ./src/index.tsx
WARNING in ./node_modules/#firebase/auth/dist/auth.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\DeparturesSchedule\node_modules\#firebase\auth\dist\ [synthetic:es6\util\makeiterator] ' file: Error: ENOENT: no such file or directory, open 'D:\Projects\DeparturesSchedule\node_modules\#firebase\auth\dist\ [synthetic:es6\util\makeiterator] '
# ./node_modules/firebase/auth/dist/index.esm.js 1:0-24
# ./src/utils/firebase/firebase.ts
# ./src/store/actions/appProps/index.ts
# ./src/pages/schedule/index.tsx
# ./src/components/app/index.tsx
# ./src/index.tsx
# multi ./src/index.tsx
WARNING in ./node_modules/#firebase/auth/dist/auth.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\DeparturesSchedule\node_modules\#firebase\auth\dist\ [synthetic:util\defineproperty] ' file: Error: ENOENT: no such file or directory, open 'D:\Projects\DeparturesSchedule\node_modules\#firebase\auth\dist\ [synthetic:util\defineproperty] '
# ./node_modules/firebase/auth/dist/index.esm.js 1:0-24
# ./src/utils/firebase/firebase.ts
# ./src/store/actions/appProps/index.ts
# ./src/pages/schedule/index.tsx
# ./src/components/app/index.tsx
# ./src/index.tsx
# multi ./src/index.tsx
WARNING in ./node_modules/#firebase/auth/dist/auth.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\DeparturesSchedule\node_modules\#firebase\auth\dist\ [synthetic:util\global] ' file: Error: ENOENT: no such file or directory, open 'D:\Projects\DeparturesSchedule\node_modules\#firebase\auth\dist\ [synthetic:util\global] '
# ./node_modules/firebase/auth/dist/index.esm.js 1:0-24
# ./src/utils/firebase/firebase.ts
# ./src/store/actions/appProps/index.ts
# ./src/pages/schedule/index.tsx
# ./src/components/app/index.tsx
# ./src/index.tsx
# multi ./src/index.tsx
WARNING in ./node_modules/#firebase/auth/dist/auth.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\DeparturesSchedule\node_modules\#firebase\auth\dist\ [synthetic:util\polyfill] ' file: Error: ENOENT: no such file or directory, open 'D:\Projects\DeparturesSchedule\node_modules\#firebase\auth\dist\ [synthetic:util\polyfill] '
# ./node_modules/firebase/auth/dist/index.esm.js 1:0-24
# ./src/utils/firebase/firebase.ts
# ./src/store/actions/appProps/index.ts
# ./src/pages/schedule/index.tsx
# ./src/components/app/index.tsx
# ./src/index.tsx
# multi ./src/index.tsx
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
4 modules
i ｢wdm｣: Compiled with warnings.
This is the code of the file, where I initialize firebase modules:
import app from 'firebase/app';
import 'firebase/database';
import 'firebase/auth';
const config = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
databaseURL: process.env.DB_URL,
storageBucket: process.env.STORAGE_BUCKET,
};
app.initializeApp(config);
const database = app.database();
const auth = app.auth();
export { database, auth };
Tried to remove node_modules and reinstall all, but it doesn't solve the problem. Maybe I should import it in a different way or configure webpack or tsconfig? I don't know.
Thanks for help.
If you absolutely need the source-maps (which i don't think you really do since your solution was to disable them), you can add an exclude rule for firebase (or just firebase/auth). Example (building on your own):
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader",
exclude: /node_modules\/#firebase/ //to exclude firebase from source-map
exclude: /node_modules\/#firebase\/auth/ //to just exclude firebase auth from source-map
},
Note: only use one of the exclude rules above
If u don't want to see this warnings anymore a possible solution is add this fix editing the file node_modules/react-scripts/config/webpack.config.js, and pasting this after the line performance: false,
ignoreWarnings: [
// Ignore warnings raised by source-map-loader.
// some third party packages may ship miss-configured sourcemaps, that interrupts the build
// See: https://github.com/facebook/create-react-app/discussions/11278#discussioncomment-1780169
/**
*
* #param {import('webpack').WebpackError} warning
* #returns {boolean}
*/
function ignoreSourcemapsloaderWarnings(warning) {
return (
warning.module &&
warning.module.resource.includes('node_modules') &&
warning.details &&
warning.details.includes('source-map-loader')
);
},
],
i found this on https://github.com/facebook/create-react-app/pull/11752#issuecomment-1146687183
As I investigated these warnings, I noticed some of them mentioned polyfills (although not all). Older webpack versions used to include polyfills for node.js core modules by default. From webpack 5 this is not the case. This may be related to these warnings.
Reference: https://github.com/facebook/create-react-app/issues/11756
In my case, using webpack 4 instead of webpack 5 got rid of the warnings and did not break anything. This may be a solution, as long as your code does not require webpage 5+.
If you want to try this solution, you need to:
Remove the following dependency from your package.json:
"react-scripts": "5.0.0",
(your version may be higher)
Add the following dependency to your package.json:
"react-scripts": "4.0.3",
Delete your node_modules folder
Run npm install
First, go to Storage,
https://console.firebase.google.com/project/
select your project name
then go to Storage
then
Rules tab and change allow read, write: if false; to true; as shown bellow.
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}
for more understanding
see the picture
Solved the problem by removing these lines of code from webpack.config
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
},
Related
have same issues withe web pack project can you please help me to resolve that one. I didn't use react-scripts because it's web pack project. i have migrated react-bootstrap 1.6.4 to 2.1.1
Current Version: 2.1.1
the errors are:
ERROR in ./node_modules/react-bootstrap/esm/SplitButton.js Module
parse failed: Unexpected token (101:2) You may need an appropriate
loader to handle this file type. | renderMenuOnMount, |
rootCloseEvent, | ...props | }, ref) => /#PURE/_jsxs(Dropdown, { |
ref: ref, # ./node_modules/react-bootstrap/esm/index.js 67:0-55 #
./src/containers/Layout.jsx # ./src/routes/index.jsx #
./src/containers/App.jsx # ./src/index.jsx # multi
(webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server
react-hot-loader/patch babel-polyfill whatwg-fetch ./src/index.jsx
the issue did not occur in react-bootstrap#2.0.0-alpha.1
I am working with an app using electron-vue. In windows, yarn run dev just works fine. But then I decided to switch to Ubuntu 18.04 and now everytime I executed yarn run dev, it returns like this:
ERROR in ./node_modules/iaccs-login/router/OneTimePassword.js
Module not found: Error: Can't resolve '../components/OneTimePassword' in '/mnt/d/iaccs/iaccs-base/node_modules/iaccs-login/router'
# ./node_modules/iaccs-login/router/OneTimePassword.js 4:15-55
# ./src/renderer/router/index.js
# ./src/renderer/main.js
# multi ./.electron-vue/dev-client ./src/renderer/main.js
ERROR in ./node_modules/iaccs-front-office-otc-voucher/router/index.js
Module not found: Error: Can't resolve '../components/OtcVoucher' in '/mnt/d/iaccs/iaccs-base/node_modules/iaccs-front-office-otc-voucher/router'
# ./node_modules/iaccs-front-office-otc-voucher/router/index.js 4:15-50
# ./src/renderer/router/FrontOffice.js
# ./src/renderer/router/index.js
# ./src/renderer/main.js
# multi ./.electron-vue/dev-client ./src/renderer/main.js
ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/iaccs-front-office-withdrawal/components/Withdrawal.vue
Module not found: Error: Can't resolve '../constants/Withdrawal' in '/mnt/d/iaccs/iaccs-base/node_modules/iaccs-front-office-withdrawal/components'
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/iaccs-front-office-withdrawal/components/Withdrawal.vue 9:0-92
# ./node_modules/iaccs-front-office-withdrawal/components/Withdrawal.vue
# ./node_modules/iaccs-front-office-withdrawal/router/index.js
# ./src/renderer/router/FrontOffice.js
# ./src/renderer/router/index.js
# ./src/renderer/main.js
# multi ./.electron-vue/dev-client ./src/renderer/main.js
ERROR in ./src/renderer/mixins/Auth.js
Module not found: Error: Can't resolve '../store/Modules' in '/mnt/d/iaccs/iaccs-base/src/renderer/mixins'
# ./src/renderer/mixins/Auth.js 1:12-63
# ./src/renderer/main.js
# multi ./.electron-vue/dev-client ./src/renderer/main.js
ERROR in ./src/renderer/store/index.js
Module not found: Error: Can't resolve './Modules' in '/mnt/d/iaccs/iaccs-base/src/renderer/store'
# ./src/renderer/store/index.js 5:0-32
# ./src/renderer/main.js
# multi ./.electron-vue/dev-client ./src/renderer/main.js
I already checked the files and nothing is missing. Is there something I did wrong?
Thanks!
SOLVED!
It turns out to be a very simple issue. I've been using windows for too long, I forgot that Linux is case-sensitive with the directory and file names. I just renamed my directories and files based on my code and yarn run dev now works!
Running webpack on a project which includes winston, produces a number of warnings (see below). Webpack is automatically including non-javascript files due to a lazy-loading mechanism in a dependency, logform.
You can see what's happening here - see the exposeFormat function: https://github.com/winstonjs/logform/blob/master/index.js
Webpack can't figure out which files to include, so it includes them all, including the README.md files, and attempts to process them with Typescript. I know that webpack's ContextReplacementPlugin should help me, but I can't get it to work.
I've tried adding this to my plugins list in webpack.config.js:
new webpack.ContextReplacementPlugin(/logform/, /(.*)\.js/)
I thought this should include all .js files in the folder. This gets rid of the warnings at build time, but at runtime, I get an error from webpack indicating that an attempt to require one of those files fails.
What am I doing wrong?
Warnings produced by Webpack
WARNING in ./node_modules/logform/index.d.ts
Module build failed: Error: Typescript emitted no output for //Users/aneil/code/project/node_modules/logform/index.d.ts.
You should not need to recompile .ts files in node_modules.
Please contact the package author to advise them to use --declaration --outDir.
More https://github.com/Microsoft/TypeScript/issues/12358
at successLoader (/Users/aneil/code/project/node_modules/ts-loader/dist/index.js:39:15)
at Object.loader (/Users/aneil/code/project/node_modules/ts-loader/dist/index.js:21:12)
# ./node_modules/logform sync ^\.\/.*$
# ./node_modules/logform/index.js
# ./node_modules/winston/lib/winston.js
# ./src/logger.ts
# ./src/services/pipeline/handlers.ts
WARNING in ./node_modules/logform/CHANGELOG.md
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| # CHANGELOG
|
| ### 1.4.2
# ./node_modules/logform sync ^\.\/.*$
# ./node_modules/logform/index.js
# ./node_modules/winston/lib/winston.js
# ./src/logger.ts
# ./src/services/pipeline/handlers.ts
WARNING in ./node_modules/logform/README.md
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| # logform
|
| An mutable object-based log format designed for chaining & objectMode streams.
# ./node_modules/logform sync ^\.\/.*$
# ./node_modules/logform/index.js
# ./node_modules/winston/lib/winston.js
# ./src/logger.ts
# ./src/services/pipeline/handlers.ts
WARNING in ./node_modules/logform/LICENSE
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| MIT License
|
| Copyright (c) 2017 Charlie Robbins & the Contributors.
# ./node_modules/logform sync ^\.\/.*$
# ./node_modules/logform/index.js
# ./node_modules/winston/lib/winston.js
# ./src/logger.ts
# ./src/services/pipeline/handlers.ts
Runtime errors after I add the ContextReplacementPlugin
Serverless: GET /api (λ: GraphQLPlayground)
Serverless: The first request might take a few extra seconds
Serverless: Error while loading GraphQLPlayground
[ 'Error: Cannot find module "./combine".',
'at webpackContextResolve (webpack:///./node_modules/logform_sync_(.*)\\.js?:39:11)',
'at webpackContext (webpack:///./node_modules/logform_sync_(.*)\\.js?:32:11)',
'at Function.get (webpack:///./node_modules/logform/index.js?:27:101)',
'at eval (webpack:///./src/logger.ts?:34:20)',
I figured the best way to solve this was to address the issue directly in the logform library, so I submitted this PR: https://github.com/winstonjs/logform/pull/24
In migrating from beta 31 to rc.1 in my Angular-CLI app, I am now getting some compilation errors, as it pertains to some of my custom icons/images. This is the error I'm getting:
ERROR in ./src/app/ui/nav-menu.component.css Module not found: Error:
Can't resolve './app/img/home-icon.svg' in
'/Users/mk/Documents/abc/src/app/ui' #
./src/app/ui/nav-menu.component.css 6:3777-3813 #
./src/app/ui/nav-menu.component.ts # ./src/app/app.module.ts #
./src/main.ts # multi webpack-dev-server/client?http://localhost:4200
./src/main.ts
Specifically, what does it indicate when the error states "can't resolve"? Does that imply the item isn't where the app is looking for it? Or something else?
If you are using angular-cli put static files such as images, fonts etc.. in assets folder and refer them in you HTML files as follows
<img src="assets/sample.jpg" alt="some alt">
After section 8 (user accounts) in Meteor Angular 2 tutorial (social app) nothing is shown on the browser and in F12 I get this error:
install.js:85 Uncaught Error: Cannot find module 'meteor/accounts-base'require # install.js:85meteorInstall.node_modules.angular2-meteor-accounts-ui.build.login-buttons.js # login-buttons.js:13fileEvaluate # install.js:153require # install.js:82meteorInstall.node_modules.angular2-meteor-accounts-ui.build.index.js # index.js:5fileEvaluate # install.js:153require # install.js:82meteorInstall.client.imports.parties-list.parties-list.js # parties-list.ts:6fileEvaluate # install.js:153require # install.js:82meteorInstall.client.imports.parties-list.parties-list.ts # parties-list.ts:1fileEvaluate # install.js:153require # install.js:82meteorInstall.client.app.js # app.ts:6fileEvaluate # install.js:153require # install.js:82(anonymous function) # parties.ts:22
The referenced meteor/accounts-base module is a direct dependency of the accounts-password package. Step 8 of the Socially - A Meteor-Angular Tutorial App tutorial requires the installation of the accounts-password package, which will in turn install the accounts-base package. Make sure you've run the following:
meteor add accounts-password
To make sure it's installed, look in your .meteor/versions file for a matching accounts-base#X.X.X line.