I'm building a project using Vue 3 and nodejs. I need to include some configurations that should change depending on where I run the code. I found the config package that seems very promising, but I started to get a huge number of errors during the start of the project.
The first issue regards some missing packages.
Module not found: Error: Can't resolve 'util' ...
Module not found: Error: Can't resolve 'path' ...
Module not found: Error: Can't resolve 'fs' ...
Module not found: Error: Can't resolve 'os' ...
I solved them by adding this code in the config file:
resolve: {
fallback: {
fs: false,
os: false,
util: false,
path: false
}
}
Now the project starts, but I get these warnings:
warning in ./node_modules/config/lib/config.js
Critical dependency: the request of a dependency is an expression
warning in ./node_modules/config/parser.js
require.extensions is not supported by webpack. Use a loader instead.
When I surf to localhost:8080 I get:
Uncaught ReferenceError: process is not defined
Instead of using resolve.fallback, I also tried to install the dependencies:
npm install path fs os util
but I continue to get the error for fs:
Module not found: Error: Can't resolve 'fs' ...
Is there a way to use the config package easily along with Vue 3?
Related
I run into this error when my script import nodejieba.
It named 「Module not found: Can't resolve 'aws-sdk' in 'C:\Users\user\Documents\cchatbigdata\node_modules#mapbox\node-pre-gyp\lib\util'」
At first, the react run well and my script work fine.
then I npm install nodejieba --save-dev
and add import nodejieba from 'nodejieba' in my TestedData.js.
even if I don't use nodejieba's function, my react ran into this error.
I start to search related question about Can't resolve 'aws-sdk'.
most of them encountering this error when using webpack, but I don't use webpack, I just import nodejieba.
I try to understand node-pre-gyp\lib\util under the node_modules.
but it created by React(I using npx create-react-app), so I think if changing the file react may shutdown.
I think something wrong between react and nodejieba.
My browser show those errors, I found they all related to node-pre-gyp\lib\util.
./node_modules/#mapbox/node-pre-gyp/lib/util/s3_setup.js
Module not found: Can't resolve 'aws-sdk' in 'C:\Users\kevin\Documents\cchatbigdata\node_modules\#mapbox\node-pre-gyp\lib\util'
console.<computed> # index.js:1
handleErrors # webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:213
index.js:1
./node_modules/#mapbox/node-pre-gyp/lib/util/s3_setup.js
Module not found: Can't resolve 'mock-aws-s3' in 'C:\Users\kevin\Documents\cchatbigdata\node_modules\#mapbox\node-pre-gyp\lib\util'
console.<computed> # index.js:1
handleErrors # webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:213
index.js:1
./node_modules/#mapbox/node-pre-gyp/lib/util/s3_setup.js
Module not found: Can't resolve 'nock' in 'C:\Users\kevin\Documents\cchatbigdata\node_modules\#mapbox\node-pre-gyp\lib\util'
console.<computed> # index.js:1
handleErrors # webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:213
Maybe node-pre-gyp under the node_modules must to be fixed.
Here is my TestData.js
import {useState, useEffect} from 'react';
import nodejieba from 'nodejieba'; //this line make me run into this error!
...
Thank for your reading and help!
Run npm install util
I don't believe this error has anything to do with nodejieba. You used npx create-react-app and it must be using Webpack 5 now, which does not include polyfills for node.js anymore. An alternate solution is to use https://www.npmjs.com/package/node-polyfill-webpack-plugin but I liked installing just the single util package for my use case.
I'm trying to incorporate the Google Drive API into one of my projects. The Node.js quick start guide requires me to import file-reading and googleapis libraries. However, when I try to do so, I run into issues when importing it into app.module.ts or any components:
Components import code:
import { Injectable } from '#angular/core';
import {google, drive_v3} from 'googleapis'
const drive = google.drive({version: 'v3'});
#Injectable({
providedIn: 'root'
})
export class SubscriptionService {
constructor () {}
}
Error:
ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js
Module not found: Error: Can't resolve 'child_process' in '...\node_modules\google-auth-library\build\src\auth'
ERROR in ./node_modules/google-auth-library/build/src/crypto/node/crypto.js
Module not found: Error: Can't resolve 'crypto' in '...\node_modules\google-auth-library\build\src\crypto\node'
ERROR in ./node_modules/jwa/index.js
Module not found: Error: Can't resolve 'crypto' in '...\node_modules\jwa'
ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js
Module not found: Error: Can't resolve 'fs' in '...\node_modules\google-auth-library\build\src\auth'
ERROR in ./node_modules/google-p12-pem/build/src/index.js
Module not found: Error: Can't resolve 'fs' in '...\node_modules\google-p12-pem\build\src'
ERROR in ./node_modules/googleapis-common/build/src/discovery.js
Module not found: Error: Can't resolve 'fs' in '...\node_modules\googleapis-common\build\src'
ERROR in ./node_modules/gtoken/build/src/index.js
Module not found: Error: Can't resolve 'fs' in '...\node_modules\gtoken\build\src'
ERROR in ./node_modules/agent-base/patch-core.js
Module not found: Error: Can't resolve 'https' in '...\node_modules\agent-base'
ERROR in ./node_modules/https-proxy-agent/index.js
Module not found: Error: Can't resolve 'net' in '...\node_modules\https-proxy-agent'
ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js
Module not found: Error: Can't resolve 'os' in '...\node_modules\google-auth-library\build\src\auth'
ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js
Module not found: Error: Can't resolve 'path' in '...\node_modules\google-auth-library\build\src\auth'
ERROR in ./node_modules/gaxios/build/src/gaxios.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\gaxios\build\src'
ERROR in ./node_modules/google-auth-library/build/src/auth/oauth2client.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\google-auth-library\build\src\auth'
ERROR in ./node_modules/googleapis-common/build/src/apirequest.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\googleapis-common\build\src'
ERROR in ./node_modules/jws/lib/data-stream.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\jws\lib'ERROR in ./node_modules/jws/lib/sign-stream.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\jws\lib'ERROR in ./node_modules/jws/lib/verify-stream.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\jws\lib'ERROR in ./node_modules/https-proxy-agent/index.js
Module not found: Error: Can't resolve 'tls' in '...\node_modules\https-proxy-agent'
How do I properly import the googleapis library in Angular? I've tried adding the following script import to index.html as lots of people online suggest, but it doesn't seem to work (see comments).
<script src="https://apis.google.com/js/api.js"></script>
I have also made sure to perform the following installs:
npm install --save #types/gapi
npm install --save #types/gapi.auth2
npm install --save #types/gapi.client.drive
googleapis (and google-auth-library) is a NodeJS library. You can't use it in front-end projects as is. There're some workarounds - see https://medium.com/angular-in-depth/google-apis-with-angular-214fadb8fbc5 (but I didn't try it personally so can't recommend).
The other lib you mentioned - https://apis.google.com/js/api.js - is the right one, it's for front-end, but it's not modularized, it's just one big script that you need to load via script tag. That's because you cannot import it via import. To make TS compiler happy (providing you already installed types #types/gapi*) add this import in a file where you accessing gapi global object:
/// <reference types="gapi.client. drive" />
I installed xlsx-style in my angular 6 app via yarn and I get errors when I build my app :
ERROR in ../node_modules/xlsx-style/dist/cpexcel.js
Module not found: Error: Can't resolve './cptable' in 'C:\Users\cabannesj\Documents\Virga3\virga-frontend\node_modules\xlsx-style\dist'
ERROR in ../node_modules/xlsx-style/xlsx.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\cabannesj\Documents\Virga3\virga-frontend\node_modules\xlsx-style'
ERROR in ../node_modules/xlsx-style/ods.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\cabannesj\Documents\Virga3\virga-frontend\node_modules\xlsx-style'
I added 'xlsx.core.min.js' in the script section of my angular.json file.
I don't know what is missing to get xlsx-style work with my app.
Trying to include a npm module in my jsx.
My dir structure is something like:
app/
node_modules/
webpack.config.json
package.json
main.js
react/
myreact1.jsx
myreact2.jsx
Note: purposely do not want a package.json & node_modules in react/
I've figured out that I have to do this for webpack2 config:
resolve: {
modules: ["node_modules", path.resolve(__dirname, "node_modules")
}
This forces webpack to first always try ./node_modules, then default to app/node_modules
However, for the module I'm trying to include in myreact.jsx (npm: "request"), this module uses alot of native node libraries like "fs" and "tls", etc.
webpack now gives me this error:
Abbreviated error:
ERROR in ./~/request/lib/har.js
Module not found: Error: Can't resolve 'fs' in '/myproj/app/node_modules/request/lib'
# ./~/request/lib/har.js 3:9-22
# ./~/request/request.js
# ./~/request/index.js
# ../react/myreact1.jsx
# ./app.jsx
# ./main.js
Display-error-details version of the error:
ERROR in ./~/request/lib/har.js
Module not found: Error: Can't resolve 'fs' in '/myproj/app/node_modules/request/lib'
resolve 'fs' in '/myproj/app/node_modules/request/lib'
How do I get webpack to correctly find the native node modules 'fs', 'tls', 'net' etc for 'request' module and the other 3rd party modules it uses inside it's own node_modules?
Thanks for any help
I am trying to use the imdb-api repo (https://github.com/worr/node-imdb-api) in my angular2 project, but can't seem to get it working.
I'm working on the newest angular2 webpack (Angular2 Webpack Starter). I usually know how to get libs working, but this one is just not working :(
Have cloned the Angular2 Webpack starter, and made the Npm install and npm start.. everything works great.
Then I have installed version 2.0.0 of imdb-api like this:
npm install --save imdb-api
It installed with no problems.
In a component, (lets say the about component) , I have imported the module like:
import * as imdb from 'imdb-api';
In the constructor, I am trying to console.log(imdb) to see if it's available.
constructor(public route: ActivatedRoute) {
// var imdb = require('imdb-api');
console.log(imdb);
}
As you see, I also tried using the var imdb = require ...
The problem is all this gives me errors I just can't seem to solve. I am getting the following errors:
ERROR in ./~/request/lib/har.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\Mikkel\Documents\Programmering\angular2-webpack-starter\node_modules\request\lib'
ERROR in ./~/forever-agent/index.js
Module not found: Error: Can't resolve 'net' in 'C:\Users\Mikkel\Documents\Programmering\angular2-webpack-starter\node_modules\forever-agent'
ERROR in ./~/forever-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'C:\Users\Mikkel\Documents\Programmering\angular2-webpack-starter\node_modules\forever-agent'
ERROR in ./~/tough-cookie/lib/cookie.js
Module not found: Error: Can't resolve 'net' in 'C:\Users\Mikkel\Documents\Programmering\angular2-webpack-starter\node_modules\tough-cookie\lib'
ERROR in ./~/tunnel-agent/index.js
Module not found: Error: Can't resolve 'net' in 'C:\Users\Mikkel\Documents\Programmering\angular2-webpack-starter\node_modules\tunnel-agent'
ERROR in ./~/tunnel-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'C:\Users\Mikkel\Documents\Programmering\angular2-webpack-starter\node_modules\tunnel-agent'
I have found a post about the request problem. The imdb-api is using the request-promise, thats why I'm getting the error.
The post you find here: https://github.com/request/request/issues/1529
The suggested to add the following:
console: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty'
to the node object in the webpack.config.js file. Have added it to the webpack dev config, but now I don't see any errors at all, but the application wont load.