Executing This:
node .\node_modules\webpack\bin\webpack.js --config scripts/webpack.config.js --display-error-details
Produces this error.
I am just testing this at the moment, so application.ts just has this
export class Aureus {
constructor() {
alert('1');
}
}
The webpack file looks as follows:
const globule = require("globule");
const path = require("path");
const webpack = require("webpack");
const extractTextPlugin = require("extract-text-webpack-plugin");
const config = {
};
const configuration = {
context: __dirname,
entry: {
"application":
"application.ts",
...globule.find("aureus/**/*.ts", { srcBase: "./scripts" }),
,
"vendor": [
"bootstrap",
"jquery",
"angular",
"moment",
"lodash",
"ramda",
],
},
output: {
path: path.join(__dirname, "../"),
filename: "packed.js"
},
devtool: "source-map",
plugins: [
new webpack.LoaderOptionsPlugin({
debug: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "vendor.js"
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.jquery": "jquery",
}),
],
resolve:
{
alias: {
}
},
module: {
rules: [
{
test: /^((?!\.spec\.ts).)*.ts$/,
use: [
{
loader: "awesome-typescript-loader"
}
],
exclude: /(node_modules)/
},
]
}
};
module.exports = configuration;
I am getting this error?
application.ts is in ./scripts/application.ts
(same directory as webpack.config.js)
ERROR in Entry module not found: Error: Can't resolve 'application.ts' in 'C:\Projects\Github\Aureus\Aureus.Web\scripts'
resolve 'application.ts' in 'C:\Projects\Github\Aureus\Aureus.Web\scripts'
Parsed request is a module
using description file: C:\Projects\Github\Aureus\Aureus.Web\package.json (relative path: ./scripts)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\Projects\Github\Aureus\Aureus.Web\package.json (relative path: ./scripts)
resolve as module
C:\Projects\Github\Aureus\Aureus.Web\scripts\node_modules doesn't exist or is not a directory
C:\Projects\Github\Aureus\node_modules doesn't exist or is not a directory
C:\Projects\Github\node_modules doesn't exist or is not a directory
C:\Projects\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
looking for modules in C:\Projects\Github\Aureus\Aureus.Web\node_modules
using description file: C:\Projects\Github\Aureus\Aureus.Web\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\Projects\Github\Aureus\Aureus.Web\package.json (relative path: ./node_modules)
using description file: C:\Projects\Github\Aureus\Aureus.Web\package.json (relative path: ./node_modules/application.ts)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Projects\Github\Aureus\Aureus.Web\node_modules\application.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Projects\Github\Aureus\Aureus.Web\node_modules\application.ts.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\Projects\Github\Aureus\Aureus.Web\node_modules\application.ts.json doesn't exist
as directory
C:\Projects\Github\Aureus\Aureus.Web\node_modules\application.ts doesn't exist
Unless you provide an actual resolve rule, your imports of anything in the node_modules will default to looking in the folder provided to the context.
Try this rather:
resolve: {
modules: [
/* assuming that one up is where your node_modules sit,
relative to the currently executing script
*/
path.join(__dirname, '../node_modules')
]
}
Also, make sure that you are referencing your entry relative to the context like so:
"application": "./application.ts"
instead of
"application": "application.ts"
Maybe you need to check your package-lock.json, and assumed that your package version is correct
NPM will give this error when your packages version in incorrect.
Here are three tips:
Check Node version: node -v
Make sure that you already install when you enter the root directory: nom i
Check the version in package.json files. You may find some questions.
Like so:
"eslint": "^5.16.0",
Instead of:
"eslint": "^4.4.0",
Related
I'm trying to perform server side rendering and I copied course teacher code,
my src folder structure is /src -> [/client -> index.jsx, /server -> server.js, /shared -> Header.jsx].
I got the following error:
~/Desktop/WEB_COURSE$ npm run dev
> web_course#1.0.0 dev
> env NODE_ENV=development webpack-dev-server
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.100:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/home/timothy/Desktop/WEB_COURSE/public' directory
insignificant alerts ([built] [code generated] and so on) then:
ERROR in main
Module not found: Error: Can't resolve './src' in '/home/timothy/Desktop/WEB_COURSE'
resolve './src' in '/home/timothy/Desktop/WEB_COURSE'
using description file: /home/timothy/Desktop/WEB_COURSE/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: /home/timothy/Desktop/WEB_COURSE/package.json (relative path: ./src)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/timothy/Desktop/WEB_COURSE/src is not a file
.js
Field 'browser' doesn't contain a valid alias configuration
/home/timothy/Desktop/WEB_COURSE/src.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/home/timothy/Desktop/WEB_COURSE/src.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/home/timothy/Desktop/WEB_COURSE/src.wasm doesn't exist
as directory
existing directory /home/timothy/Desktop/WEB_COURSE/src
using description file: /home/timothy/Desktop/WEB_COURSE/package.json (relative path: ./src)
using path: /home/timothy/Desktop/WEB_COURSE/src/index
using description file: /home/timothy/Desktop/WEB_COURSE/package.json (relative path: ./src/index)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/timothy/Desktop/WEB_COURSE/src/index doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/timothy/Desktop/WEB_COURSE/src/index.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/home/timothy/Desktop/WEB_COURSE/src/index.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/home/timothy/Desktop/WEB_COURSE/src/index.wasm doesn't exist
webpack 5.75.0 compiled with 1 error in 10070 ms
This is my webpack.config.js :
const clientConfig = require('./cfg/webpack.client.config');
const serverConfig = require('./cfg/webpack.server.config');
module.exports = [
clientConfig,
serverConfig,
];
This is the webpack.client.config.js :
const path = require('path');
const NODE_ENV = process.env.NODE_ENV;
const IS_DEV = NODE_ENV === 'development';
const IS_PROD = NODE_ENV === 'production';
function setupDevtool() {
if (IS_DEV) return 'eval';
if (IS_PROD) return false;
}
module.exports = {
resolve: {
extensions: ['.js', '.jsx', '.json', '.ts']
},
mode: NODE_ENV ? NODE_ENV : 'development',
entry: path.resolve(__dirname, '../src/client/index.jsx'),
output: {
path: path.resolve(__dirname, '../dist/client'),
filename: 'client.js'
},
module: {
rules: [{
test: /\.[tj]sx?$/,
use: ['ts-loader']
}]
},
devtool: setupDevtool()
};
This is the webpack.server.config.js :
const path = require('path');
const NODE_ENV = process.env.NODE_ENV;
module.exportts = {
target: "node",
mode: NODE_ENV ? NODE_ENV : 'development',
entry: path.resolve(__dirname, '../src/server/server.js'),
output: {
path: path.resolve(__dirname, '../dist/server'),
filename: 'server.js'
},
resolve: {
extensions: ['.js', '.jsx', '.json', '.ts']
},
module: {
rules: [{
test: /\.[tj]sx?$/,
use: ['ts-loader']
}]
},
};
I'm new to webpack, so I don't know how to try to solve this issue on my own at all.
I have built an npm package and published it onto NPM.
When i npm install <my-package> and then import MyPackage from "#Acme/MyPackage"; into react i get the following error.
Module not found: Can't resolve #Acme/MyPackage
Is this becasue of how i have setup my sdk package. You can find the webpack config i use to build it below.
Btw this works if i import the script tag directly in the header, but how can i import it like this without specifically defining the script tag in the header?
webpack.config.js
const path = require('path');
// const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-package.min.js',
libraryTarget: 'umd',
library: 'MyPackage'
},
devtool: 'source-map',
resolve: {
extensions: ['.js'],
},
module: {
rules: [
{
test: /\.(js)$/,
use: 'babel-loader'
}
]
},
node: {
console: false,
global: true,
process: true,
__filename: 'mock',
__dirname: 'mock',
Buffer: true,
setImmediate: true,
fs: 'empty',
net: 'empty',
tls: 'empty'
// See "Other node core libraries" for additional options.
},
plugins: [
// new UglifyJSPlugin({ sourceMap: true }),
new CopyWebpackPlugin([
{ from: 'test/index.html', to: '' }
]),
],
};
It seems like the import doesn't know where to import the package from but since it's already in your node_modules folder I'm going to guess that either you don't have an index.js file or you haven't defined your main entry file for you package.
Every NPM package will look for an index.js file but if you have want to rename it you can actually define it in your package.json
{
"name": "yourpackage",
"version": "x.x.x",
"main": "another-name.min.js",
}
We are trying to migrate from grunt to webpack.
In our project, we use a JS file called boiler to define the frequently accessed core classes.
__boiler__.js
define(function (require) {
return {
Helpers: require('helpers/_helpers_'),
Enums: require('enums/_enums_'),
Context: require('context'),
...
};
});
And Web Pack Config
webpack.config.js
const path = require('path');
module.exports = {
resolve: {
extensions: ['.js', '.scss'],
alias: {
app: path.resolve(__dirname, './dev_files/app'),
Boiler: path.resolve(__dirname, './dev_files/app/core/_boiler_')
}
},
entry: './dev_files/main.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.(html)$/,
use: {
loader: 'html-loader'
}
},
{
test: /\.js$/,
use: ['babel-loader']
}
]
}
};
Then when I tried to do webpack build, it gave me some errors like:
ERROR in ./dev_files/app/core/_boiler_.js
Module not found: Error: Can't resolve 'context' in 'C:\Myproject\dev_files\app\core'
resolve 'context' in 'C:\Myproject\dev_files\app\core'
Parsed request is a module
using description file: C:\Myproject\package.json (relative path: ./dev_files/app/core)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
....
I'm a noob when in JavaScript and WebPack in general. Could someone give me an idea what am I doing wrong here? Thanks.
I assume you are using require for your module loading.
try to export your definition so that it can be found/included by webpack
module.export = (function (require) {
return {
Helpers: require('helpers/_helpers_'),
Enums: require('enums/_enums_'),
Context: require('context'),
// ...
};
});
(webpack.config.js file content below)
I'm trying to make a webpack exclusion on node modules.
I found that using webpack-node-externals works for it but using that on my common config causes this other error:
Require is not defined on reflect-metadata - __webpack_require__ issue
So... I was wondering how can i exclude webpack bundling also on the browser side without getting any issue.
My webpack version: 3.11.0
webpack-config.js
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('#ngtools/webpack').AotPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
var nodeExternals = require('webpack-node-externals');
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
//externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '#ngtools/webpack' },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: [ 'to-string-loader', 'style-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [new CheckerPlugin()]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot.browser.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
exclude: ['./**/*.server.ts']
})
])
});
// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
resolve: { mainFields: ['main'] },
entry: { 'main-server': './ClientApp/boot.server.ts' },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./ClientApp/dist/vendor-manifest.json'),
sourceType: 'commonjs2',
name: './vendor'
})
].concat(isDevBuild ? [] : [
// Plugins that apply in production builds only
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
exclude: ['./**/*.browser.ts']
})
]),
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder,
devtool: 'inline-source-map'
});
return [clientBundleConfig, serverBundleConfig];
};
GOT IT!
Before posting my solution, I'd like to thanks Aluan Haddad for his useful comment in my question above.
As suggested by Aluan, in fact, the problem was related to the need to use also a module loader, more than a module bundler.
So, the steps that I followed are these:
Installing requireJS ==> http://requirejs.org/docs/node.html
Removing externals: [nodeExternals()], // in order to ignore all modules in node_modules folder from my common webpack configuration and adding it under my server configuration (done before my question, but it's a really important step) [see webpack.config.js content in the question]
Adding target: 'node', before my externals point above, under my server side section (done before my question, but it's a really important step) [see webpack.config.js content in the question]
This makes sure that browser side keeps target:'web' (default target), and target becomes node just for the server.
launched webpack config vendor command manually from powershell webpack --config webpack.config.vendor.js
launched webpack config command manually from powershell webpack --config webpack.config.js
That worked for me! Hope It will works also for anyone else reading this question and encountering this issue!
This is a branch off of my previous question and applied suggestions. But I am still having major issues.
I now have my babel transpiler, along with a .babelrc file in place. My import code to import my module looks like this:
var init = require('./app/js/modules/toc');
init();
However I'm getting this:
ERROR in ./app/js/script.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./app/js/modules/toc in /projects/project-root/app/js
# ./app/js/script.js 1:11-42
Webpack config:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./app/js/script.js",
module: {
rules: [{
test: /\.js$/,
use: 'babel-loader'
}]
},
output: {
path: __dirname + "public/javascripts",
filename: "scripts.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
.babelrc
{
"presets": ["es2015"]
}
Gulptask
//scripts task, also "Uglifies" JS
gulp.task('scripts', function() {
gulp.src('app/js/script.js')
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('public/javascripts'))
.pipe(livereload());
});
I'm totally lost...what am I doing wrong?
For my import code I also tried:
import {toc} from './modules/toc'
toc();
UPDATE: As recommended I needed to add resolve to my config. It looks like this now:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./app/js/script.js",
resolve: {
extensions: ['.js']
},
module: {
rules: [{
test: /\.js$/,
use: 'babel-loader'
}]
},
output: {
path: __dirname + "public/javascripts",
filename: "scripts.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
Sadly I still get:
ERROR in Entry module not found: Error: Cannot resolve 'file' or
'directory' ./app/js/script.js in /projects/project-root
Does my file structure need to change?
Whenever you import/require a module without specifying a file extension, you need to tell webpack how to resolve it. This is done by the resolve section inside the webpack config.
resolve: {
extensions: ['.js'] // add your other extensions here
}
As a rule of thumb: whenever webpack complains about not resolving a module, the answer probably lies in the resolve config.
Let me know about any further questions and if this works.
EDIT
resolve directly to the root level of your config:
// webpack.config.js
module.export = {
entry: '...',
// ...
resolve: {
extensions: ['.js']
}
// ...
};
You are specifying an entry point in your webpack config AND in gulp. Remove the entry property in your webpack config.
If you specify it twice, the gulp config will tell webpack to get the file in ./app/js/script.jsand then webpack in ./app/js/script.js which will result in a path like ./app/js/app/js/script.js.
Keep us posted if you fixed it. =)
Given that your script is located at ./app/js/script.js and the requested module is there ./app/js/modules/toc, you would need to call it relatively to your script => ./modules/toc should work.
This is because both your script and module are located in the jsfolder.