Webpack module resolution issues on Windows 10 - npm

I'm having issues with Webpack resolving module names on Windows. The loaders are installed, but the path Webpack is using to try to resolve them is incorrect (notice the fact that it's concatenated the module path to the working directory below). Webpack is being launched with webpack-dev-server.
ERROR in ./~/css-loader?sourceMap&modules&localIdentName=[name]_[local]_[hash:base64:3]!./~/postcss-loader?parser=postcss-scss!./client/src/scripts/components/Main/Main.css
Module build failed: (SystemJS) ENOENT: no such file or directory, open 'C:\Users\Terry\Projects\django-react\C:\Users\Terry\Projects\django-react\node_modules\css-loader\index.js'
Error: ENOENT: no such file or directory, open 'C:\Users\Terry\Projects\django-react\C:\Users\Terry\Projects\django-react\node_modules\css-loader\index.js'
at Error (native)
Error loading C:/Users/Terry/Projects/django-react/C:\Users\Terry\Projects\django-react\node_modules\css-loader\index.js
# ./client/src/scripts/components/Main/Main.css 4:14-225 13:2-17:4 14:20-231
# ./client/src/scripts/components/Main/Main.jsx
# ./client/src/index.js
# multi main
webpack: bundle is now VALID.
Relevant info:
Windows 10
Node 6.6.0
I'm running webpack with babel-node via NPM script
Webpack 2.1.0-beta.22
NPM 3.10.3
EDIT: this usually only happens when I make an edit that triggers a hot reload. Sometimes it happens when I launch webpack-dev-server the first time, but it happens every time I edit the source.

Not sure if you ever figured this out, but I was running into the same exact error with the malformed node_modules path when using webpack on Windows 10. I was very disappointed to find that nobody was able to solve this since this particular error does not seem to be documented anywhere else.
In my own debugging I found that this error only happens with webpack loader modules, so I dug into webpack to track down where the error was coming from. After some digging it turned out that this was caused by the loader-runner package used by webpack. It attempts to use System.import to resolve the loader module, with a fallback on require when System.import is not available. In my case, the malformed node_modules path was being generated by System.import via systemjs. It appears that the systemjs implementation of System.import has a bug when absolute paths are used on Windows, and since webpack passes an absolute path for loaders, it throws an error.
I was able to work around this by editing my local copy of loader-runner, and comment out the System.import, forcing it to use require instead. This is, of course, not a good long term solution by any means so I am still looking for something better. I just tried switching to yarn to see if maybe this is an npm dependency issue, but this workaround should get you up and running if you're still getting these errors on Windows.

Related

Blazor Javascript isolation with NPM dependencies

I'm trying to use the new Blazor Javascript isolation feature. I'm importing my own JS file as per the example ExampleJsInterop.cs. It works until I try to import an NPM module from within my script. In my package.json I have set up a dependency on interactjs, and in my script I have added import interact from 'interactjs'; at the top.
I'm getting a Failed to resolve module specifier "interactjs" error. I'm not sure how to get past that.
Previously I was using Webpack to bundle my script and dependencies together into a single file that is added into my index.html as a tag. This was working fine, but I'm not sure how to continue using NPM packages with JS isolation.
Thanks!
A bit late, but I've just finished solving a similar issue.
The npm files are installed to the hidden node_modules folder. This isn't available to your script when you are running your app, unless you do something to make it available. however, even if you copied the interactjs file into your scripts folder it would still not work if it was an npm file. Those are meant to run in nodejs not a browser. So you would still need to use your bundler. I tried webpack, but had some issues with certain files so ended up with snowpack instead. I just finished a bunch of articles on javascript interop - part 4 deals with npm
I forgot that I left this question open for almost a year!
I ended up solving it using Snowpack to bundle the NPM package into the Blazor wwwroot folder. Credit goes to this article for pointing me in the right direction: https://nbarraud.github.io/js-in-blazor.html

Intellij/Webstorm Yarn - Cannot find Package unless on root

I am trying to add packages via yarn inside of intellij. I can get it to install the package fine, and I can even get it to move the packages to my own custom folder via --modules-folder "ExternalLibs".
The issue I am having is, unless I allow yarn to install on the root and under the node_modules folder, it won't recognize that there is a package.
Is there a way to point the package.json to look in the custom path?
You can try setting NODE_PATH environment variable pointing to your folder location in Node.js run configuration template: Run | Edit Configurations..., expand Templates node, select Node.js configuration, specify NODE_PATH in Environment variables field
Please see https://youtrack.jetbrains.com/issue/WEB-19476#focus=streamItem-27-2819977.0-0
Note that, though the modules in require() calls will actually be resolved, you will still see warnings about non-installed packages due to WEB-25792; you have to disable JavaScript | General | Missing module dependency inspection to get rid of the warnings

This dependency was not found: * .components/table in ./node_modules/babel-loader/lib

Trying to add bootstrapVue to my project has scrambled my dependencies in my webpack Vuejs project. Everything was dandy until I tried to implement this npm install and subsequent change to "webpack.config.js". Immediately everything began to fall apart. The dev server couldn't compile for various reasons, so I did 'npm uninstall style-loader css-loader'. That didn't help. Eventually I came across a solution that involved removing my changes to the "webpack.config.js" file. Cool, now I could at least run my project again.
Somewhere along the line my node_modules/babel-loader/package.json file started giving me problems. Inside, the bundleDependencies: has a value of false. VS Code is telling me it should be an array of package names. Okay, I'm not sure how I can remedy this warning, so I ignore it.
I added a new .vue component to my src/components file named 'Table.vue' to use within my main App.vue. Added my import Table from ".components/table"; line to my App.vue file. Now my dev server fails to compile for this reason: terminal error.
In this project, I've already installed: axios, vue-axios, sass-loader, node-sass, webpack, bootstrap, bootstrap-vue. I'm pretty new to all of this so any help would be greatly appreciated. Worst case scenario I just start from scratch and copy paste my code.

NPM on LEMP cannot find module, wrong path

Total Linux noob here. I am trying to configure a Pleroma development environment on DO droplet. Installed LEMP, installed SSL, installed PostgreSQL, installed Pleroma, so far so good.
Then I installed Node, NPM, cloned Pleroma-FE (apparently it installs in /user/pleroma-fe folder). I am following the very brief build instructions here:
https://git.pleroma.social/pleroma/pleroma-fe
When I get to the command in those build instructions: npm run build
I am getting error: Error: Cannot find module '/user/build/build.js'
It's because actual path to the build file is /user/pleroma-fe/build/build.js
Apologies if this is a duplicate. I see other questions about this.
Fixing npm path in Windows 8 and 10
and the reply seems to set the PATH. This answer might apply to my situation. But my question is: it is clearly already looking in a well defined path (which is different from all the other questions, which don't seem to have well defined path in the error message). But it is the wrong path. How do I make it look in the correct path?
I tried the npm command and specified the complete path, and every variation. and none worked. So it seems fixing the path won't fix this problem.
Sorry I do not currently know enough Linux to be able to fix this. I tried to tag this with Pleroma but I don't have enough reputation to create a new tag. Any help is much appreciated. Thanks in advance.
I continued to work on this with some help of a Linux admin on Fiverr and the Pleroma developers chat with success, thanks to all.
The solution did not involve changing the path. There were several different things going on. First, I needed to change directory into the development project source folder:
cd pleroma-fe
Once I did that, npm found the build module. Next issue was Node was very old and I needed to get the latest version. I used the instruction here for NodeJS (10):
https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions
Next issue was npm was missing some modules. This was fixed with:
npm install
After that the build completed with no errors.
npm run build
After a successful build, you will see a list of files that have changed as a result of the build.
Next issue is that simple changes in HTML text were not live, ie. not reflected in the refreshed web page. This is fixed by copying all the resulting build files to the production folder using rsync. In my case the command was:
rsync -av /user/pleroma-fe/dist/ /home/pleroma/pleroma/priv/static/
Pleroma is a neat Twitter-like user interface to ActivityPub fediverse, it includes a Mastodon UI as well, and thanks to the developers for making it free and open source.

dygraphs minification build error in a create-react-app project

I have added dygraphs to a large, existing project which was created with create-react-app. Everything runs well, I am importing dygraphs using the common syntax:
import Dygraph from 'dygraphs';
However when I try to build my project with npm run build the ES6 bits of dygraphs cause the build to fail:
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file:
..dev/node_modules/dygraphs/src/dygraph-utils.js:325
Read more here: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
Following the link and looking at line 325 the minifier is tripping over the ES6 => operator. Looking under node_modules/dygraphs, there are src and src-es5 directories. I renamed src to src-es6 and created a symlink:
src -> src-es5
Everything runs and builds just fine using this method but it doesnt seem like the best solution. The link provided suggests ejecting from the create-react-app rig and handling the build myself but that is not an option.
Any suggestions on a more proper way to handle this? Is there a specific way to import Dygraph from the es5 src directory instead?
I can confirm that the workaround as suggested by #danvk works fine.
All you need to do is go to package.json at location - node_modules/dygraphs/package.json and change module value from index to index.es5 and the build works just fine.
It's a bit of a hack, till the time this gets resolved. There is already a ticket opened for this