I put some common code in this local module called 'client-common'. In one of the app project using this common module, I add this to package.json dependencies:
"client-common": "../client-common"
After npm install the module gets copied to node_modules. When I run (it's an Ionic project) ionic serve, it builds all fine, but at runtime in the browser I get
Runtime Error
Cannot find module "client-common"
I'm assuming this is a webpack issue? The question is why is the local module treated differently and not bundled at all?
It seems that I was supposed to supply an index.js in the common module. After adding an index.js duplicated from the existing index.d.ts, exporting everything, it just works now.
Related
I run into this problem pretty frequently while developing react applications. The latest is hwid. I am using yarn to manage dependencies.
I added the module using
yarn add hwid
It added it to the package.json file and gave me no errors. When I run the application, it says it is unable to find the module. The module is there in node_modules and everything seems to be correct and in place. So I tried deleting node_modules and running yarn install. I've done this several times. I tried force cleaning the npm cache. I have run yarn remove and yarn add several times.
I am using the WebStorm IDE. It gives me no errors, and in fact, if I let it resolve the import, it finds it just fine. This seems to only happen to me in react projects. I think, but I'm not sure, that it is usually typescript modules that give me problems.
Is there a magic bullet for this? The module is a pretty critical part of my app, so if I can't resolve it using node and react's import system, I'm going to have to just copy the files into my project. I would really rather not do that for obvious reasons.
Any help is appreciated.
If it's about typescript modules, have you tries also installing types of that modulea?
E.g.yarn add #types/hwid
I've got quite some experience in (web) development (Java, ASP.NET and PHP amongst all), and fairly new to React and Node JS.
Although I did multiple tutorials and read multiple articles, I feel like I'm missing some point here and there. Currently I'm working on a React app which implements a nice HTML template I found.
One React tutorial I did used Webpack for building and deploying the app (local). This works nice, does the job of transpiling ES6 (.jsx) and SASS using babel. So far so good :)
My template has an image slider (Owl Carousel), so I installed the react-owl-carousel module.
This gave me quite some problems with jQuery (also installed as a module).
After several attempts to fix this I decided to move on to another slider module, React Awesome slider.
I used the module as the README.md explained. But upon building it (npm run build), I got an error that the .scss file within react-awesome-slider could not be transpiled. A message like "are you missing a loader".
So I installed sass, node-sass, sass-loader etc etc and configured these in my webpack.config.js.
I also noticed the react-awesome-slider module within node-modules contained a webpack.config.js.
Long story so far, sorry, now to the essence of this question.
In what way can the modules installed (like react-awesome-slider) be considered "black boxes"?
It doesn't feel logical that all the modules get build when building the main app. The "exclude: /node_modules/," config in webpack.config.js prevents this, not?
So why does the react-awesome-slider give an error about .scss transpiling? I had no .scss rule in my webpack config then.
Will all dependend modules automatically get installed when installing a new module? So when I run "npm i react-awesome-slider --save-dev", will its dependencies also be installed? Or is this not necessary? And do I need to update (webpack) configuration after installing a new module? Or is it really black box and "self-containing"?
Any help would greatly be appreciated!!! Maybe there is a good react-webpack sample app on Github or something like that?
That also confusing me for a really long time. Here are some answers to your question.
people publish packages to the NPM, so a module your project depends on
can be pre-builded or source code, it depends. I have checked react-awesome-slider, it's main field in package.json is dist/index.js, directly import it won't cause an issue because there are no SCSS files.If you follow the CSS module usage instruction you have import react-awesome-slider/src/styles and you will find src/styles.js file import ../styled.scss,so webpack will load it with SCSS loader which you have not configured, that's why an error occurred.
while you install modules, npm will go
through its dependency tree, install its dependencies, dependencies'
dependencies, until there's no more dependency module to install. before npm 3.0 the node_module folder is tree structure reflects the dependency tree, but it causes problems that many modules relay on the same dependency, npm will download and save too many same files, after version 3.0 it becomes flat(release note here, search flat keyword).
You don't need to update your webpack config after you install a dependency cause webpack build process will handle it with file dependency tree. You have installed a package and import it in your activation code, file there will be handle( with its package.json main field file as an entry), you have installed a package without using it or import it in a dead file(dead file means you cannot find it from webpack entry file), it will be ignored by webpack as it's dead code.
I have too many confuse until I read npm docs. Good luck to you.
Node modules are build to execute packages.When the are compiled they have proper configuration to handle extensions that are imported in it and when you import something like .scss in your main app then it does not know about that extension then your webpack need rules to include that extensions.
It does exclude node_modules as the are pre-converted pr pre build.
More over webpack is bit tough so developers create CRA Have look at it.
I'm trying to figure out how to get webpack to watch an NPM linked dependency. I've tried to add an explicit entry pointing into the package, and I've tried to both explicitly included it and also not excluding /node_modules/ (which is quite common).
The scenario I want to achieve is as follows: I want to separate out parts of my react-based applications into component libraries (NPM packages).
Both the main package and the dependencies are written in ES6, so I've created a small gulp script that watches for changes in the dependent project, and transpiles its source (src/) to lib.
I've used npm link to wire in the dependent package so that I don't need to pack/publish/reinstall it every time I make a change.
When I make changes to the dependent package, the gulp tasks transpiles the code OK.
It is in the last part I am struggling; getting webpack watch to trigger a re-bundling when the dependency is refreshed by the forementioneds gulp task.
Make sure you transpiler script doesn't delete your old /lib dir, but overwrites files instead.
I had a similar problem with Webpack dev server not seeing changes because I was removing the /lib dir before every transpile.
I have a server.js file that I downloaded from someone's website. The first line is: var express=require('express');
When I try to run this server with "node server.js" I get the following error: "Cannot find module 'express'." The express module is installed in the default node install location:
C:\Users\myname\node_modules\express\
I'm able to successfully run express by executing "node express.js" from the express install location in node_modules. I also tried copying over the express folder and file into my c:\node-testing\ directory where my server.js file is located but I still get the error. Any idea what the problem might be and how to fix?
You can set the NODE_PATH environment variable to tell nodejs to search other paths for globally installed modules that are not in the project directory.
See http://nodejs.org/api/modules.html#modules_loading_from_the_global_folders for details.
On Unix installations there are some built-in default locations, but on Windows, it appears you have to set this environment variable manually to support a global location.
FYI, if you want require to load a module from the project directory, then you have to use
require("./filename");
with the ./ in front of it. That's why it didn't work when you copied it to the project directory. node makes a distinction between loading from the project directory vs. loading from the node_modules directory below and thus requires a different syntax to specify which one you want. Express.js is also not a stand-alone module because it depends on a bunch of other modules so you could not copy only it. I'd recommend using the NODE_PATH option or install express into your project directory (it will end up in a node_modules sub-directory).
Node.js will only search for modules in from the current (and parent) directories. Unlike npm, Node has no concept of "global" modules.
You need to run npm install to install your modules into the directory containing your code.
I'm in the process of developing a Meteor package, that has a dependency on a node module. This module is also, under development, so right now it's just a local folder.
Looking around, it seems that adding
Npm.depends({ "npmmodulename": "x.x.x"});
on the package.js file, it should be enough, but how do I do this, when the npm module is local? I tried adding the path to the module, instead of the version, but I had no luck...
Can this be actually done?
You don't need to specify an Npm.depends clause because your node package is not yet published to npmjs.org so it doesn't matter.
Let's assume your node package is in "my-project/packages/my-package/node-package".
You can reference it from your meteor package like this :
my-project/packages/my-package/server.js :
var nodePackage=Npm.require("../../../../../packages/my-package/node-package");
All the ../.. stuff is needed because the current working directory of a meteor node process is "my-project/.meteor/local/build/programs/server".
Note that using this technique, meteor doesn't take care of building your node package, so you need to manually "npm install" it each time you modify it's inner dependencies.