I'm new into webpack, and I'm having an issue trying to resolve a subdependency.
I'm importing a dependency that is trying to require a module from a specific folder (not the node_modules) (let's call it subdependency). That folder contains two files:
subdependency/package.json
subdependency/build/Release/addon.node
subdependency/lib/src/index.js (this index.js requires the addon.node)
I'm using webpack, and when importing my dependency it was not able to find subdependency.
The subdependency is there but it was not accessible. I added a loader for loading .node files https://www.npmjs.com/package/native-ext-loader and it was still not working; trying to identify what was happening I modified in my build the require path from ./subdependency to ./subdependency/build/Release/addon.node and the file was accessible (so I guess the native ext loader is working fine, but it's not loading other files like the index.js).
I think the problem is that webpack is not able to understand that ./subpdendency is a module, or that I'm not loading it correctly.
Any suggestion or idea is welcome!
I resolved the issue by forking the dependency and switching from node-pre-gyp to prebuildify, since node-pre-gyp doesn't works fine with webpack.
Related
How do I require another module from a different directory without having path issues?
For example,
src/index.js, has a require('../other/main') statement
Oh, there's an error, because in the main.js JS file, there are things like getting files from paths, and it's just a path issue. (e.g. ./SOMEFILE won't work when it's clearly in that other directory path)
But, if I individually on my CLI, to cd other, and npm start (or node main.js), no path issue.
How do I require without having to cd into the directory to make the path work?
But I don't get it, how do I just easily require a JS file but from another directory with a package.json or whatever?
Just use process.chdir(directory) so you don't have path issues. https://nodejs.org/api/process.html#processchdirdirectory
You can use child_process.fork to make a new process of your external JS script (so it runs).
https://nodejs.org/api/child_process.html#child_processforkmodulepath-args-options
We would have to use process.chdir, I cannot find another way.
I am working on rewritting some part of a js library with WebAssembly . The library uses rollup to bundle and the output created was dist/rebound.js . My changes add an additional file rebound.wasm . I didnt use any wasm loader but just the fetch api to bring to load wasm ,
//rebound.js
fetch('rebound.wasm').then(//instantiate)
I use rollup-copy-plugin to copy the wasm file to dist/rebound.wasm. Everything is fine, the dist folder has both js and wasm file. But when I use it in a test project which uses webpack and import rebound from 'rebound' the rebound.js file is present but the rebound.wasm file is not present. The fetch api gives a 404 error.
I feel webpack may be treeshaking it as there is no explicit import statement. How do I make sure rebound.wasm would in the js build?
If you need anymore info please ask.
Issue
Would any Webpack config experts out there be able to tell me why I can't extract my css into the dist folder when running npm run build?
Repo is here: https://github.com/damodog/webpack4-boilerplate
Further info
To summarise, I've been working through the Webpack Guide docs and everything was going well. js and css was getting injected into my index.html file via <link> and <script> tags respectively. I've installed various loaders, plugins etc and split my configs out into common (shared), dev and prod files (as per the docs) and life was good.
I happened to make some tweaks which included looking at code splitting dynamic imports, adding aliases for paths, moving js into js folder etc and noticed when I ran a build npm run build all of a sudden my css wasn't getting added to the dist folder. I reverted my trial changes for the dynamic import stuff and tried reverting the other changes but am still getting the same issue. Annoyingly I hadn't added git at this point so didn't have a clear picture of the 'tweaks' I'd made to locate what I'd changed.
What happens
When I run my watch task npm start the styles.scss file (imported into the main index.js file) get's compiled into css and the resulting app.css file gets injected into the index.html page when viewed in my local host. All gravy.
<link href="css/app.css" rel="stylesheet">
When I run npm run build the css file should get copied over dist folder, a hash id should get added and the css should be minified. This was working (like I said above) and I could see the css file in the build steps (see first Asset below. Btw disregard the difference in js bundled files here compared to the next screenshot. This was when I was playing with code splitting).
Now when I run this the css isn't bundled up (see below).
I think it could be something to do with mini-css-extract-plugin but I've configured this as per the docs using the advanced configuration example (I've split their example out which is in one config file as I have separate config files for dev and prod).
I literally cannot see why this is happening.
Help me SO readers. You're my only help...
I cloned your repo and experimented with it. In your package.json, you've set: sideEffects: false. This causes the imported stylesheets to be lost in the process of tree shaking. This is described in the docs:
A "side effect" is defined as code that performs a special behavior
when imported, other than exposing one or more exports. An example of
this are polyfills, which affect the global scope and usually do not
provide an export.
and
Note that any imported file is subject to tree shaking. This means if
you use something like css-loader in your project and import a CSS
file, it needs to be added to the side effect list so it will not be
unintentionally dropped in production mode
So change your side effects in package.json to "sideEffects: ["./src/scss/styles.scss"] and it will be output to the destination folder when in production mode.
I am trying to bundle css files with webpack extract-text-webpack-plugin it works great with local files that are int (projects)/src/assets/styles, but I also need bootstrap.css from node_modules and if I try adding it to import b from 'bootstrap/dist/css/bootstrap.css'; the plugin just throws an error that sounds something like this "bootstrap.css Unexpected token (7:5) You may need an appropriate loader to handle this file type." If I add '!style!css!' as described in this question
Webpack Error while including bootstrap 3 it does work, but now it is injected in index.html which may slowdown the overall app. So how do you correctly load the bootstrap style from node_modules? I tried copying it with copy-webpack-plugin, but the copying is performed after the loaders have done their job. so any suggestions?
With a bit more research and debuging the problem was in css loader path, which was pointed to the app source directory, that is why it could not access the node_modules.
I have two Angular2 projects using webpack as module bundler and typescript.
Aiming to share code between, I split some of the source code and created a symlink to this 'external' source code from each of this two projects.
After doing this the "symlinked code" can not resolve the imports properly.
below a "hello world" project to shows my concerns.
https://github.com/datracka/angular2-symlink-issue
This project runs straight forward BUT if you remove the given src folder and create a symlink to another src folder with the same source code BUT located at /another/path/src then you get a compiler error:
ERROR in .-shared/src/main.ts
Module build failed: TypeError: Path must be a string. Received undefined
at assertPath (path.js:7:11)
at Object.dirname (path.js:1326:5)
at ensureTypeScriptInstance (/Users/vicensfayos/Projects/angular2-abc/node_modules/ts-loader/index.js:156:103)
at Object.loader (/Users/vicensfayos/Projects/angular2-abc/node_modules/ts-loader/index.js:403:14)
So my question is: what I am missing with symlinks when I "distribute" the source code in another folder out of the project folder itself?
My guess is about configure properly resolving object in webpack https://webpack.github.io/docs/resolving.html to override the node.js loading node_modules algorithm https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders but not luck.
Hopefully somebody can point me in some direction.
I found the answer.
My guess was right. it was about how nodejs resolve the dependencies. https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders
The symlinked code is trying to find the dependencies moving up all the way failing until it finds node_module. But nothing is there. node_module is in the parent project.
Therefore the solution is create another symlink from the symlinked code to the node_modules folder of the parent project to resolve the dependencies.
I have a similar setup but decided to add a path to my tsconfig.json in my main app:
"paths": {
"*": ["*", "node_modules/*"]
}
All the modules required by the source code in the shared symlinked folders are in the main app's node_modules folder. This tells the compiler to look in the main app's node_modules folder before trying to find a node_modules folder further up the tree.