I am trying out webpack with react. I am trying to use babel-loader to transpile jsx files. I receive module not found error while using any webpack loaders/plugins. I have the required plugins installed in node_modules.
The issue seems to be with the path resolution. Somehow it prepends my current directory to the absolute path while resolving dependent plugins.
Here is my a snippet of my webpack.config.js
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
}
}]
}
It gives following error when I run webpack (globally as well as through npm)
ERROR in ../~/react/lib/ReactDOMNullInputValuePropDevtool.js
Module not found: Error: Cannot resolve module '\\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js' in H:\codebase\react-demo\node_modules\react\lib
resolve module \\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js in H:\codebase\react-demo\node_modules\react\lib
looking for modules in H:\codebase\react-demo\node_modules
resolve 'file' or 'directory' \users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js in H:\codebase\react-demo\node_modules
resolve file
H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js doesn't exist
H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.webpack.js doesn't exist
H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.web.js doesn't exist
H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.js doesn't exist
H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.json doesn't exist
resolve directory
H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js\package.json doesn't exist (directory description file)
H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js doesn't exist (directory default file)
[H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js]
[H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.webpack.js]
[H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.web.js]
[H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.js]
[H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.json]
# ../~/react/lib/ReactDOMNullInputValuePropDevtool.js 1:0-102
Here H:\codebase\react-demo\ is my project root directory. I.e node_modules resides in H:\codebase\react-demo\. It is trying to look up for dependency in H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules
Any idea what am I missing?
I could work-around the issue. Initially, my project directories were on a mapped network drive. Moving the project directory to local drive (C:/) resolved the issue. Still not sure why it was causing the issue though.
Related
My Visual Studio Code extension uses the node module highlight.js which comes with a folder full of CSS files. These provide colour schemes for syntax colouring. It has become necessary to bundle some of the CSS files.
It's about bundling an asset
The objective is to bundle a CSS file and at run-time access the file content as a string. If that can be achieved without an import statement that would be perfect. Normally, how exactly one accesses the content of the bundled file would be a separate question, but I have a feeling that content retrieval and how one should go about bundling the asset are closely entwined.
I freely admit to having a weak understanding of WebPack.
The story so far
The bundler is specified in package.json as "webpack": "^5.4.0" but I don't know how to ascertain what is actually present. It is conceivable that there is something wrong with my setup: when I try to run webpack --version on a command prompt in the project folder, it responds
CLI for webpack must be installed.
webpack-cli (https://github.com/webpack/webpack-cli)
We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no):
The first time this happened I responded yes. After a flurry of installation and another try the same thing happened. However, vsce package has no trouble using webpack for a production build and pressing F5 to debug successfully puts together a development build in a dist folder with an unminified file I can examine (which is how I know the file mentioned below is being bundled).
Moving on from there I've modified webpack.config.js like so
//#ts-check
'use strict';
const path = require('path');
/**#type {import('webpack').Configuration}*/
const config = {
target: 'node', // vscode extensions run in a Node.js-context -> https://webpack.js.org/configuration/node/
entry: './src/extension.ts', // the entry point of this extension, -> https://webpack.js.org/configuration/entry-context/
output: {
// the bundle is stored in the 'dist' folder (check package.json), -> https://webpack.js.org/configuration/output/
path: path.resolve(__dirname, 'dist'),
filename: 'extension.js',
libraryTarget: 'commonjs2',
devtoolModuleFilenameTemplate: '../[resource-path]'
},
devtool: 'source-map',
externals: {
vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, -> https://webpack.js.org/configuration/externals/
},
resolve: {
// support reading TypeScript and JavaScript files, -> https://github.com/TypeStrong/ts-loader
extensions: ['.ts', '.js', '.css']
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader'
}
]
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
module.exports = config;
As you can see there are rules and loaders for CSS.
When I add this import
import "../node_modules/highlight.js/styles/atelier-dune-light.css";
webpack happily builds the bundle and when I inspect it I can find the bundled CSS.
However, when I try to load the extension in the extension debug host, it fails to load, with this message.
Activating extension 'pdconsec.vscode-print' failed: document is not defined.
Enabling break on caught exceptions reveals this rather surprising exception.
Exception has occurred: Error: Cannot find module 'supports-color'
Require stack:
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\get-uri\node_modules\debug\src\node.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\get-uri\node_modules\debug\src\index.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\get-uri\dist\index.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\vscode-proxy-agent\out\agent.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\vscode-proxy-agent\out\index.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js
OK, so activation failed because the loader barfed. But WTF does importing CSS have to do with support-color?
Remove the import and it runs just fine. I really don't know how to respond to this; it's not clear to me why a demand for a stylesheet should cause that error. At this point I look to others for guidance and advice.
Remove style-loader from webpack.config.js to fix the error.
Pull the CSS as a string like this. Note the abbreviated path.
const cssPath: string = "highlight.js/styles/atelier-dune-light.css";
const theCss: string = require(cssPath).default.toString();
You do not need the import statement, the use of require will cause Webpack to bundle the files, but you still have to remove style-loader to avoid the loader error.
I have a privately built dependency that is compiled down to commonjs in my project.
Within the dependency itself, it references a file in my project, a vue file. After building with webpack, and using ssr, it seems to have an issue. It fails to load the vue file.
For clarity, folder structure:
node_modules
|
|- dependency
|
|-main.js
src
|
|-pages
|
|-Default.vue
dist
|
|-compiledcode.js <- what webpack compiles
Now in main.js of the dependency, I have const vuefile = require('../../src/pages/Default.vue')
The error as displayed by Node once hosting it via ssr:
<template>
^
SyntaxError: Unexpected token '<'
In my webpack i have the following:
module.exports = {
...
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
...
]
},
plugins: [
new VueLoaderPlugin()
...
]
}
From how I am understanding the error is that vue-loader isn't loading in the file. But I don't even know this is possible to begin with. If there can be clarification on this.
If not possible ..
Is it possible to then add a webconfig to the dependency and make it work that way? If so, how do I get my webpack to interact with the dependencies webpack.
Thanks.
can you please show your whole config?
set webpack resolve (incl extension resolve)
is vue included in main.js? (import vue..)
setup alias to prevent paths like '../../src/pages/..'
I am using webpack 4.32 for node js. So far the code is properly built when i exclude node_modules, but i want node_modules also to be built in webpack so that when moved to cloud there is no need of installing every time.
Excluded node_modules using, externals : [ nodeExternals() ] . Then background node code builds properly without error and runs on npm start.
If i want to include node_module while build , then i added following code,
module: {
rules: [{
test: /\.node$/,
use: 'native-ext-loader'
},
// Support for *.json files.
{
test: /\.json$/,
loader: 'json-loader'
},
// all css required in src/app files will be merged in js files
{
test: /\.(scss|sass)$/,
exclude: root('src', 'style'),
loader: 'raw-loader!postcss-loader!sass-loader'
},
{test: /\.js$/,loader: 'script-loader'}
]
}
If i build using npm run build on node server, its building the file properly, but on npm start i get error " [Script Loader] ReferenceError: require is not defined ".
I have read the official webpack, which says "requires are not parsed in script loader ". Link : https://webpack.js.org/loaders
Is there any other way we can make webpack parse requires ? Any plugins , other loaders, parsers.
Expected output is node_modules should be built with code, when i run server using npm start then the application must run properly without errors.
I've bootstrapped an app with quasar framework (based on vuejs 2). I installed some package which need some dependencies. When i try to use the package (leboncoin-api) i got this error :
These relative modules were not found:
* ./types/other in ./node_modules/mime/index.js
* ./types/standard in ./node_modules/mime/index.js
I have checked in node_modules and those files exist. They are imported in index file in mime looking like this :
'use strict';
var Mime = require('./Mime');
module.exports = new Mime(require('./types/standard'), require('./types/other'));
I tried quickly with create-react-app and the package is working. I've read that it can come from webpack, but i'm struggling to correct it. I have no idea where to look :/
Here is the part of webpack that maybe can help :
extendWebpack(cfg) {
cfg.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
});
},
I tried with and without excluding node_modules, same error
Thanks in advance from the community for the help !
EDIT :
I added to wepack.config
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},
Which change the error to :
This relative module was not found:
./package in ./node_modules/leboncoin-api/node_modules/cheerio/index.js
In a react project I used react-boilerplate but had private modules to include in the frontend that needed transpiling. In order for babel to transpile those I set exclude to the following function in the webpack config that relates to babel:
rules: [
{
test: /\.js$/, // Transform all .js files required somewhere with Babel
// eslint-disable-next-line object-shorthand, func-names
exclude: function (modulePath) {
return /node_modules/.test(modulePath) &&
!/node_modules\/#trade-quorum\/tq-helpers/.test(modulePath);
},
use: {
loader: 'babel-loader',
options: options.babelQuery,
},
},
And it worked perfectly.
Now I used that same trick in a different project but this time, in the resulting bundle tq-helpers is included but not transpiled into ES5 - the ES6 code is directly in the bundle and the build raises an error (more specifically UglifyJS).
There must be a reason around the dependencies to this package that are not the same in the two projects but hard to find. I was wondering whether there is a way to debug in details what babel does for a specific package in order to find the reason.
Thanks you for your help,
Best,
Didier