We Keep Coding

Webpack loads in wrong from parent folder

I am trying to run a watch command on my Webpack in order to compile my code but I always face an issue with my file. Even trying to change the relative paths with some ../ did not work
ERROR in code
Module not found: Error: Can't resolve '../src/code.ts' in '/Users/giardiv/Lines/f-variables'
ERROR in ui
Module not found: Error: Can't resolve '../src/ui.tsx' in '/Users/giardiv/Lines/f-variables'
ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve '/Users/giardiv/Lines/src/ui.html' in ' /Users/giardiv/Lines/f-variables':
Error: Can't resolve '/Users/giardiv/Lines/src/ui.html' in '/Users/giardiv/Lin es/f-variables'
ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/giardiv/Li nes/src/ui.html' in '/Users/giardiv/Lines/f-variables'
While my folder tree is quite basic, f-variables is the src and other files are directly in it
This is the webpack config
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = (env, argv) => ({
mode: argv.mode === 'production' ? 'production' : 'development',
// This is necessary because Figma's 'eval' works differently than normal eval
devtool: argv.mode === 'production' ? false : 'inline-source-map',
entry: {
ui: "../src/ui.tsx", // "./src/ui.tsx" calls the same error
code: "../src/code.ts" // "./src/code.ts" calls the same error
},
module: {
rules: [
// Converts TypeScript code to JavaScript
{ test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
// Enables including CSS by doing "import './file.css'" in your TypeScript code
{ test: /\.css$/, use: ['style-loader', { loader: 'css-loader' }] },
// Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI
{ test: /\.(png|jpg|gif|webp|svg)$/, loader: 'url-loader' },
],
},
// Webpack tries these extensions for you if you omit the extension like "import './file'"
resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
publicPath: '/',
},
// Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
plugins: [
new HtmlWebpackPlugin({
template: '../src/ui.html',
filename: 'ui.html',
inlineSource: '.(js)$',
chunks: ['ui'],
}),
new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
],
})

Because the paths in entry are wrong in your webpack.config.js file.
It should be set as below since you have webpack.config.js besides src directory.
entry: {
ui: "./src/ui.tsx",
code: "./src/code.ts"
},

React & Webpack: Loading failed for the <script> with source http://localhost:8080/app/bundle.js

I am new in reactjs. I tried to configure react with basic index page including index.js(containing a console.log()) but when i tried to run server index.html showing properly but bundle.js is not loading. I search it a lot but not getting proper answer can any one help me please.
my webpack.config.js is
// Webpack config js.
var webpack = require("webpack");
var path = require("path");
var DIST_VAR = path.resolve(__dirname, "dist");
var SRC_VAR = path.resolve(__dirname, "src");
var config = {
entry : SRC_VAR + "\\app\\index.js",
output: {
path: DIST_VAR + "\\app\\",
filename: "bundle.js",
publicPath : "\\app\\",
},
module: {
rules: [
{
test: /\.js?/,
include: SRC_VAR,
loader: "babel-loader",
query: {
presets: [ "react" , "es2015" , "stage-2"]
}
}
]
}
};
module.exports = config;
Error is showing in console: Loading failed for the with source “http://localhost:8080/app/bundle.js”.
Edit:
Folder Listing added..
Folder PATH listing
Volume serial number is BE9C-4E51
C:.
| package-lock.json
| package.json
| webpack.config.js
|
+---dist
| | index.html
| |
| \---app
| bundle.js
|
+---node_modules
| <Here the node_modules>
\---src
| index.html
|
\---App
index.js

I'll make some assumptions without seeing your project folder structure.
Looks like it could be your publicPath. Unless that's what you intended, the /app folder shouldn't be visible and since your console is showing "localhost:8080/app/bundle.js" that means it's looking for "project-root/src/app/app/bundle.js" instead of "project-root/src/app/bundle.js"
In the webpack docs they're telling you to default to root '/' and looking at my own webpack file thats what mine is currently set to as well.
Reference:
https://webpack.js.org/guides/public-path/
Edit: Here's an example using Webpack 3. Version 4 just came out and this will not work, so I'd be careful where you're getting your config examples from if you are using Webpack 4.
const webpack = require('webpack');
const path = require('path');
module.exports = {
plugins: [
// new webpack.NamedModulesPlugin(),
// new webpack.HotModuleReplacementPlugin()
],
context: path.join(__dirname, 'src'),
entry: [
// 'webpack/hot/dev-server',
// 'webpack-hot-middleware/client',
// 'babel-polyfill',
// 'history',
'./index.js'
],
output: {
path: path.join(__dirname, 'www'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['react-hot-loader/webpack', 'babel-loader']
}],
resolve: {
modules: [
path.join(__dirname, 'node_modules'),
],
},
};

after installing
npm init -y
and
npm install --save-dev webpack webpack-dev-server webpack-cli
and your structure files
src/
build/
webpack.config.js
package.json
go to package.json, and add build command:
"scripts": {
"start":"webpack serve --mode development",
"build":"webpack"
},
in webpack.config.js
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
},
devServer: {
contentBase: path.resolve(__dirname, './build'),
},
};
so,in your build/index.html
<script type="text/javascript" src="./bundle.js"></script>

NPM: Field 'browser' doesn't contain a valid alias configuration

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",

How to force Webpack 3 to throw TypeScript errors?

// index.ts
let a = 1;
a.map();
Webpack doesn't throw this TS error about method "map" on type "number.
Do you know how check these errors automatically during webpack build?
Can't find anything on the internet.
Previously I saw this: https://cloud.githubusercontent.com/assets/376414/7276837/840b4dec-e8da-11e4-8362-c44f531d8cd9.png
How can I get the same output of webpack (TS errors) using webpack 3?
TypeScript thinks it's ok (any valid JS is also valid TypeScript), so, any project could be bundled with any JS error.
If I'm running tsc app/index.ts then I see the error:
app/index.ts(8,3): error TS2339: Property 'map' does not exist on type 'number'.
So, TypeScript compiler throws the error, but webpack (ts-loader I think) ignores it.
I'm using webpack 3.8.1
Here is config:
let path = require('path'),
webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve('app/index.ts'),
output: {
path: path.resolve('dist'),
filename: 'app.js'
},
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'],
alias: {
vue: path.resolve('node_modules/vue/dist/vue.js'),
app: path.resolve('app')
}
},
module:{
rules: [
{ test: /\.tsx$/, use: 'ts-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.pug$/, use: 'pug-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('app/index.pug'),
cache: false
}),
new webpack.LoaderOptionsPlugin({
debug: true
})
]
};

do you ever heard about linting? here's the loader for tslint for webpack

Webpack cannot resolve file or dic

MyAPP:
|--src
　　|--index.js
　　|--content.js
|--webpack.config.js
index.js :
const React = require('react');
const ReactDom = require('react-dom');
const View = require('./content');
ReactDom.render(<View/>, document.body);
content.js :
const React = require('react');
class view extends React.Component {
render() {
return <p> Content </p>
}
}
module.exports = View;
webpack.config.js
module.exports = {
entry: './src/*',
output: {
path: path.join(__dirname, '/build'),
filename: '[name].bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [{
test: /\.js|jsx$/,
loader: ['jsx-loader?harmony'],
exclude: /node_modules/
}]
},
plugins: [commonsPlugin]
}
Problems:
webpack --display-error-details
Hash: c47fe037926d0dc83af7
Version: webpack 1.13.0
Time: 62ms`
Asset Size Chunks Chunk Names
common.js 191 bytes 0 [emitted] common.js
ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./src/* in /Users/xx/WebstormProjects/jianwenji-react
resolve file
/Users/xx/WebstormProjects/jianwenji-react/src/* doesn't exist
/Users/xx/WebstormProjects/jianwenji-react/src/*.js doesn't exist
/Users/xx/WebstormProjects/jianwenji-react/src/*.jsx doesn't exist
resolve directory
/Users/xx/WebstormProjects/jianwenji-react/src/* doesn't exist (directory default file)
/Users/xx/WebstormProjects/jianwenji-react/src/*/package.json doesn't exist (directory description file)
Why webpack can't find that files?

In this case entry should refer to file not to folder,
module.exports = {
entry: './src/index.js'
// ....
}
Note - jsx-loader is deprecated, use babel-loader, babel-preset-react instead