If running webpack programmatically he doesn't find module - javascript

I want to use webpack-api at my electron app for build external web project.
I decide using webpack API in my app, but webpack can't found the babel-loader.
I created simple repository to reproduce the error: repository
Abstract presentation of the project (A - electron app, B - web project for build)
Error msg:
main.js:1 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'D:\User\B\node_modules\babel-loader\lib\index.js'
at eval (webpack:///./node_modules/loader-runner/lib_lazy_namespace_object?:5)
at eval (main.js:1)
Base structure of both project:
Project A:
- main.js
- node_modules/
- webpack.config.js
Project B:
- main.js
- node_modules/
- webpack.config.js
Every project is independent and has all tool for development(like webpack)
My webpack config in project A for run webpack (if I using '/' in path I get API Schema error at webpack):
module.exports = {
mode: "development",
target: "web",
entry: "D:\\User\\B\\src\\main.js",
context: "D:\\User\\B\\",
output: {
path: "D:\\A",
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js)$/i,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
resolve: {
modules: [
'D:\\User\\B\\node_modules', //the same error if remove this line
],
},
stats: {
errorDetails: true
},
}
Run webpack:
const webpack = require('webpack');
const config = require('./webpack.config');
const compiler = webpack(config);
compiler.run((err, stats) => {
//output errors...
});
Important:
If to try build project B using webpack cli (through npm), no
errors.
Project A based on Electron.
Using library version on both project: babel-loader^8.1.0, #babel/core^7.9.0, webpack^4.42.1, electron^8.2.1(electron only at A project)
Bundle file is created
Bundle js file is using in HTML file

Looks like this server already has other webpack wich running in watch mode and constanlty removing packages. Try to reload the server

Related

How to transpile and minify single file with webpack?

I have a React application, and in my application I'm relying on react-scripts, so the build command is defined like this "build": "react-scripts build", and it works all fine. Now, the point is that inside my src directory I have a JS file called wrapper.js, which is a standalone file, and it is pure JS, no React stuff, but it uses ES6 and some newer features. So, what I want to do is that, I want create a new command, which will transpile and minify this file and will create a standalone copy of it. I thought to use webpack and I created a webpack.config.js file in the root of my project, which looks like this:
const path = require('path');
const MinifyPlugin = require('babel-minify-webpack-plugin');
module.exports = {
mode: 'production',
output: {
path: __dirname + 'build',
publicPath: '/build/',
filename: 'wrapper.js',
},
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, 'src', 'wrapper.js')
],
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
},
plugins: [
new MinifyPlugin()
]
};
And I added the following to my package.json file "wrapper": "webpack". Now, when I run npm run-scripts wrapper, it executes the webpack command, but it throws error. The output looks like this:
> webpack
Hash: 0aa67383ec371b8b7cd1
Version: webpack 4.19.1
Time: 362ms
Built at: 04/06/2019 10:54:46 AM
1 asset
Entrypoint main = wrapper.js
[0] ./src/index.js 223 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.js 22:4
Module parse failed: Unexpected token (22:4)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
> <Root />,
| document.getElementById('root'),
| );
What I see is that the problem is that webpack also tries to transpile and minify other files in my src directory, because it seems it has hit my React app's index.js file. How can I exclude everything? Or more precisely, how can I tell webpack to transpile and minify only the file /src/wrapper.js, and not to touch anything else at all?
Lighter weight alternative could be to create a script in your package.json and use babel-minify, https://babeljs.io/docs/en/babel-minify
package.json
{
...
"scripts": : {
"minify": "minify wrapper.js --out-file wrapper.min.js --mangle.keepClassName"
}
...
}
Add entry object to your webpack.config.js.
module.exports={
entry: './src/wrapper.js',
...
}
webpack points the entry object by default to ./src/index.js.
So if you don't override entry object, webpack will bundle the file in ./src/index.js
Update
To point to a output directory properly
output: {
filename: 'wrapper.js',
path: path.resolve(__dirname, 'build')
}

Making a library importable using webpack and babel

I am trying to publish a package on npm (this one) that I am developing using webpack and babel. My code is written in ES6. I have a file in my sources, index.js, that (for the moment) exports one of my library's core components, it simply goes like this:
import TheGamesDb from './scrapers/thegamesdb';
export { TheGamesDb };
I am using webpack and babel to create a dist index.js that is my package's main file. My webpack.config.js goes like this:
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: {
index: ['babel-polyfill', './src/index.js'],
development: ['babel-polyfill', './src/development.js']
},
output: {
path: '.',
filename: '[name].js',
library: 'rom-scraper',
libraryTarget: 'umd',
umdNamedDefine: true
},
devtool: 'source-map',
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
]
},
target: 'node',
externals: [nodeExternals()]
};
Now when I load my package in another project and try to import my export TheGamesDb simply like this
import { TheGamesDb } from 'rom-scraper';
I get the error
Uncaught TypeError: Path must be a string. Received undefined
It is to be noted that I am importing my library in electron.
Update: Electron seems to be the main problem here and it is not even my library but a dependency that throws this error (only in Electron)
The problem wasn't any of the things in my question but node-expat not working in electron. I switched to an alternative library and it's all right now.

How to get node package consumer directory from node_modules?

I am trying to create a simple node module that creates a set of folders in the app that consumes it. I exported a simple createLayout function that creates the folders. I pushed my changes to git and did an npm i from another folder. Lets call the modules creator and consumer for the sake of explanation. When I try to call createLayout in consumer I am running in to several issues. I am in E:\ drive.
Below is the index.js in creator:
import {sync} from 'mkdirp';
export function createLayout(config) {
sync('./folder1');
}
And index.js in consumer:
var createLayout = require('creator').createLayout;
createLayout();
// with config createLayout({path: __dirname})
This results in creating a folder in E:\ not relative to consumer. So I tried including __dirname:
sync(__dirname + '/folder1');
Once again, this also creates a folder in E:\ not relative to consumer. I searched for bit like in various modules to see how they are doing when they are reading the config file, for instance webpack uses process.cwd. So I tried that too.
sync(process.cwd() + '/folder1');
Same, results in creating a folder in E:\ not relative to consumer. Then I tried to pass the __dirname or cwd through a config object.
// get __dirname from the `consumer` in config.path
sync(config.path + '/folder1');
But it ends up in following error:
Error: EPERM: operation not permitted, mkdir 'E:\'
I tried logging all the values in both creator and consumer:
console.log(__dirname, process.cwd(), config.path)
// creator: / / E:\projects\consumer
// consumer: E:\projects\consumer E:\projects\consumer E:\projects\consumer
I am using webpack with babel to pack the creator, plain js in consumer. I do not know what am I doing wrong. I am pretty new to nodejs ways of working.
Update
I am noticing that this is occurring only when I use webpack to build the creator. A simple module.exports works normally as anyone would expect. So I am including my webpack config file:
module.exports = {
entry: [
'./index.js'
],
output: {
filename: 'creator.js',
path: __dirname + '/dist',
library: 'creator',
libraryTarget: 'umd'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}
]
},
externals: {
fs: 'fs'
}
};
Correct solution is adding this line in config:
target: 'node'
this will make webpack to ignore modules like fs and mkdirp and some other.
Now no longer need to specify externals.
Incorrect solution given before:
Just add mkdirp to externals and it will resolve you problem:
externals: {
fs: 'fs',
mkdirp: 'mkdirp'
}

Karma, webpack, emblem-loader compiled is not defined

We use coffee-script and emblem for templates in project. Webpack is used for bundling and Karma to run tests. I've tried to use emblem-loader for emblem processing with webpack. Here is the repository I created with simple example how to reproduce it.
karma webpack config (coffee-script):
webpack:
module:
loaders: [
{ test: /\.coffee$/, loader: "coffee-loader" },
{ test: /\.emblem$/, loader: "emblem-loader"}
],
resolve:
extensions: ["", ".emblem"]
webpackMiddleware:
noInfo: true
Template is imported via emblemTemplate = require 'template_path.emblem', then trying to do emblemTemplate(context).
Resulting Errors:
in PhantomJS: Can't find variable: compiled
in Chrome: ReferenceError: compiled is not defined
Definitely the problem is with processing the template and not template itself for loader returns function that check if (!compiled) {...}.

How to include oasis.js from Bower in a webpack build?

I'm using webpack to build my project and I'm having trouble getting it to include oasis.js, specifically https://raw.githubusercontent.com/tildeio/oasis.js/4c657d15a89c532382d2d174783f5c3660111765/dist/oasis.js as pulled in by Bower since there isn't an npm module available for it.
My webpack configuration looks like:
'use strict';
const BowerWebpackPlugin = require('bower-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/index.js',
output: {
path: 'www',
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.html$/, loader: 'html-loader' },
{ test: /\.svg$/, loader: 'file-loader' }
]
},
plugins: [
new BowerWebpackPlugin({ excludes: [/oasis\.amd\.js$/] }),
new HtmlWebpackPlugin()
]
};
and my ./app/index.js which pulls in Oasis looks like:
'use strict';
var oasis = require('oasis.js');
When I run webpack -d, I get error a series of error messages like:
ERROR in ./bower_components/oasis.js/dist/oasis.js
Module not found: Error: Cannot resolve module 'oasis/xhr' in /Users/jeffreycharles/projects/dev-container/bower_components/oasis.js/dist
# ./bower_components/oasis.js/dist/oasis.js 2983:0-3092:4 3680:0-3780:4
ERROR in ./bower_components/oasis.js/dist/oasis.js
Module not found: Error: Cannot resolve module 'oasis/connect' in /Users/jeffreycharles/projects/dev-container/bower_components/oasis.js/dist
# ./bower_components/oasis.js/dist/oasis.js 2983:0-3092:4 3093:0-3189:4
ERROR in ./bower_components/oasis.js/dist/oasis.js
Module not found: Error: Cannot resolve module 'oasis/logger' in /Users/jeffreycharles/projects/dev-container/bower_components/oasis.js/dist
# ./bower_components/oasis.js/dist/oasis.js 2983:0-3092:4 3093:0-3189:4 3217:0-3404:4 3453:0-3679:4 3680:0-3780:4
ERROR in ./bower_components/oasis.js/dist/oasis.js
Module not found: Error: Cannot resolve module 'oasis/version' in /Users/jeffreycharles/projects/dev-container/bower_components/oasis.js/dist
# ./bower_components/oasis.js/dist/oasis.js 2983:0-3092:4
which I find odd since I can see define("oasis/xhr", on line 4961 in the oasis file and the other modules that webpack is saying it can't resolve are all in that same file I linked to.
I've also tried setting noParse and using the script-loader to load Oasis but then it complains about RSVP not being defined. This isn't an issue when I load Oasis using a script tag in my HTML (in fact it all works properly when I do that).
How do I get Webpack to build and include Oasis.js in my project?

Categories