So I have been working with angular fullstack for a while now. I am having an issue with webpack at this point. I need to install an npm module called bb-rest which can be found [here][1].
This module is an extension of Blackboard Learns public API for Developers. When install the module into the project, and add it to the app.js file as I normally do other NPM modules, Webpack throws a fit. It is not able to find module 'fs' and from there more errors come up.
Item | Version
----- | -----
generator-angular-fullstack | 4.2.2
Node | 6.11.3
npm | 5.4.1
Operating System | OS X 10
Item | Answer
----- | -----
Transpiler | Babel
Markup | HTML
CSS | SCSS
Router | ngRoute
Client Tests | Jasmine
DB | SQL
Auth | Y
NPM MODULE: bb-rest
I have looked through many of the previous issues with the error 'Cannot resolve module 'fs'' and have done changes to the config variable in the webpack.make.js file from solutions such as these.
Here
This one as wel
Tried this as well
Last Resort
When I attempt to inject the dependency in the app.js file, webpack upon compiling throws a fit. I've tried the approaches in the links provided above in order to resolve this with no luck. I even tried simply importing the required dependency into my controller, or a specific file where I need it, and webpack goes crazy. I set up a test project with just a simple node/express webapp and that works fine. I'm not too familiar with webpack and it's inner workings so I was wondering if anyone had any similar issues when trying to use third party npm modules in the stack.
Console Error Produced by Webpack upon compiling: pastebin.com/26RmwEUZ
Related
Still somewhat of a beginner in Node, so apologies for what might be a newbie question. I have a small Chrome extension that I built where the only imported node module is one called node-fetch. I've never had trouble running yarn build to build a package that includes all the requisite dependencies. However, when I try to build my current package, yarn throws this error in the console:
🚨 /Users/me/Documents/GitHub/my-project/node_modules/node-fetch/src/index.js:9:17: Cannot resolve dependency 'node:http'
7 | */
8 |
> 9 | import http from 'node:http';
| ^
10 | import https from 'node:https';
11 | import zlib from 'node:zlib';
12 | import Stream, {PassThrough, pipeline as pump} from 'node:stream';
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "build:bg" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
So, this error is coming from the node_modules file myself rather than the code I wrote. Inside the package.json, I only declare this one dependency:
"dependencies": {
"node-fetch": "^3.3.0"
}
I tried manually installing the referenced packages and referencing them in the dependencies but to no avail.
What am I missing?
Tried to yarn build a package with a dependency on the node-fetch module that I import into my code. yarn throwing an error on the node-fetch module itself when I attempt to build.
Reverting to ^2.6.1 resolves the problem. Still interested to learn a better solve.
Ive only been learning Javascript/Typescript since the start of the year as I decided to create a group of microservices that are all linked together. I have my own API created in nestJS and found that whenever I wanted to call the API from each microservice i was repeating the same code over and over again so I moved it all into its own separate package which I can use.
Every other project I have which uses my npm package does not cause any errors and works fine however these projects are done using babel. I decided to implement my new package into my react frontend project but whenever I import the package and try to use it I get an error
SyntaxError: D:\Projects\Node\Lab Maker\redditbot-frontend\node_modules\labmaker-api-wrapper\lib\utils\BaseAPI.js: Missing class properties transform.
I managed to fix this issue by installing the babel class transform package but then was presented with another error.
Failed to compile.
./node_modules/labmaker-api-wrapper/lib/utils/BaseAPI.js 13:9
Module parse failed: Unexpected token (13:9)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| class API {
> APIBase;
| APIUrl = 'http://localhost:3000';
|
I'm not sure what is wrong with my package or what causes this error but if anyone is able to take a look at the source code for my npm module and explain how I would fix this issue that would be helpful. https://github.com/LabMaker/API-Wrapper
this is the npm package https://www.npmjs.com/package/labmaker-api-wrapper
Hi yesterday i shut down my pc and everything was fine. Today when i start npm run watch in my project this error ocurred.
ERROR Failed to compile with 1 errors 12:02:15 PM
This dependency was not found:
* /Users/adrianmindek/Code/Stavebniny/resources/sass/xs_app.scss in multi ./resources/js/app.js ./resources/sass/xs_app.scss
To install it, you can run: npm install --save /Users/adrianmindek/Code/Stavebniny/resources/sass/xs_app.scss
Asset Size Chunks Chunk Names
/js/app.js 1.39 MiB /js/app [emitted] /js/app
ERROR in multi ./resources/js/app.js ./resources/sass/xs_app.scss
Module not found: Error: Can't resolve '/Users/adrianmindek/Code/Stavebniny/resources/sass/xs_app.scss' in '/Users/adrianmindek/Code/Stavebniny'
# multi ./resources/js/app.js ./resources/sass/xs_app.scss /js/app[1]
I don't really know what is it or how to solve it i tried to use older package.json from older dev but nothing changed. Now my sass is no working anymore.
That file xs_app.scss is in folder ..../resources/sass/mobile/xs_app.scss what is weird becouse above in error the mobile folder is missing.
Webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/xs_app.scss', 'public/css');
you can below command just give the project folder permission to write
sudo npm install --unsafe-perm node-sass --save
I have a node.js project that I am compiling with typescript, it just occured to me, that I have a scripts directory for running various non-server tasks, such as a seed file. I can no longer call these files directly because they are now typescript, how do I run them individually? Or what am I supposed to do with them?
For info, I have a directory scripts:
| `~scripts/
| |-masterList.csv
| |-masterList.origin.csv
| `-seed.ts
You can use the ts-node package. It will compile TypeScript files at runtime and execute them as regular JS.
npm i -g ts-node
ts-node scripts/seed.ts
I wrote a very basic express.js app. Then tried to make it one .js file. Browserify compiled the whole thing to a one file. But browserify-compiled code didn't work. As far as I know, browserify just replaces require statements with module codes. Error is:
C:\Users\HP\n\express\app.js:27025
__proto__: http.IncomingMessage.prototype
^
TypeError: Cannot read property 'prototype' of undefined
at Object.__dirname.173.accepts (C:\Users\HP\n\express\app.js:27025:34)
at s (C:\Users\HP\n\express\app.js:1:316)
at C:\Users\HP\n\express\app.js:1:367
at Object.__dirname.170../application (C:\Users\HP\n\express\app.js:26823:11)
at s (C:\Users\HP\n\express\app.js:1:316)
at C:\Users\HP\n\express\app.js:1:367
at Object.__dirname.168../lib/express (C:\Users\HP\n\express\app.js:26154:18)
at s (C:\Users\HP\n\express\app.js:1:316)
at C:\Users\HP\n\express\app.js:1:367
at Object.__dirname.153.express (C:\Users\HP\n\express\app.js:24010:15)
Browserify is designed specifically to package code for a browser.
Node.js supports a number of modules that a browser doesn't which have to be emulated by builtins. These modules will be replaced by a browser-specific shim. Some only supply a subset of the Node API that makes sense to have in a browser.
So you are running an app that has converted all the Node.js modules to support running what it can in a browser, back in Node where the modules are available but are no longer being used.
Try rollup or you could possibly configure babel to work like you need
I had this very same issue but like you said the compile code should work on server side. I solved it from this link:
https://www.linkedin.com/pulse/bundling-nodemodules-your-nodejs-app-one-single-file-xuan-son-nguyen/
Use browserify for bundling and terser for minifying. Starting by installing them globally:
npm install -g browserify
npm install -g terser
Next, we have to add a build script to package.json
...
"scripts": {
...
"build": "browserify --node --ignore-missing index.js | terser > bundle.js"
}
...
Each time you want to promote to production, you have to make a new bundle:
npm run build
A new file called "bundle.js" will be created.
Let there be peace, and there was peace. Happy coding.