I'm trying to run webpack on my postinstall script in my package.json when I push to heroku but I am getting the following error.
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in 'C:\project\Node'
When I run the command locally I get no issues. Below is my webpack config - i have tried using Loader to fix the resolving issue but to no avail?
my webpack.config.js Code
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './js/app.js',
output: {
path: __dirname,
filename: 'js/bundle.js'
},
watch: true,
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015','react']
}
}
]
},
};
Related
When I try npm run start I get the below error. It's a file path issue and I'm having trouble figuring it out.
Error: Child compilation failed:
Entry module not found: Error: Can't resolve '/Users/Dylan/Desktop/Programming /Projects/Remote Tech Jobs/remotetechjobs/src/index.html' in '/Users/Dylan/Des ktop/Programming/Projects/Remote Tech Jobs/remotetechjobs':
Error: Can't resolve '/Users/Dylan/Desktop/Programming/Projects/Remote Tech Jo bs/remotetechjobs/src/index.html' in '/Users/Dylan/Desktop/Programming/Project s/Remote Tech Jobs/remotetechjobs'
EntryModuleNotFoundError: Entry module not found: Error: Can't resolve '/Users /Dylan/Desktop/Programming/Projects/Remote Tech Jobs/remotetechjobs/src/index. html' in '/Users/Dylan/Desktop/Programming/Projects/Remote Tech Jobs/remotetec hjobs'
webpack.config.js file
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['babel-polyfill', './src/js/index.js'],
output: {
path: path.resolve(__dirname, 'src'),
filename: 'js/bundle.js'
},
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader:'babel-loader'
}
}
]
}
};
file path in my text editor
My first question here on Stackoverflow :) I'm trying to make an app with Ionic&Vue, and as a CMS I'm using Umbraco. I want to connect the two, which I'm now trying by configuring Webpack, so that Webpack will take my main.ts file that Ionic&Vue created and do stuff with it and put it in the main Umbraco folder as a source file where I can reference Umbraco content.
I'm not having a lot of luck with it unfortunately. I've tried configuring a webpack.config.js file and installing a bunch of libraries like 'vue-loader', 'ts-loader', 'vue-template-compiler', 'vue-style-loader' et cetera. Some stuff is getting compiled, it's just that I keep getting an error that there's a mismatch in versions (vue is #3.0.2 and vue-template-compiler is #2.6.12). Ionic won't work with Vue under version 3 though so I feel like I'm stuck.
So my question: am I missing something? Is it really not possible or is there another way to compile a file from .ts to .js to a folder of my wish?
Edit (webpack config file):
var { HotModuleReplacementPlugin } = require('webpack');
var path = require('path');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = (env, argv) => {
let transpileOnly = argv.transpileOnly === 'true';
return {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundledwebpack.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "ts-loader",
}
]
},
{
// Now we apply rule for images
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
// Using file-loader for these files
loader: "file-loader",
// In options we can set different things like format
// and directory to save
options: {
outputPath: 'images'
}
}
]
},
{
// Apply rule for fonts files
test: /\.(woff|woff2|ttf|otf|eot)$/,
use: [
{
// Using file-loader too
loader: "file-loader",
options: {
outputPath: 'fonts'
}
}
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
},
compiler: '#vue/compiler-sfc'
}
}
]
},
plugins: [
new HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
].concat(transpileOnly ? [
new ForkTsCheckerWebpackPlugin({
reportFiles: ['src/**/*.{ts,tsx,vue}', '!src/**/*.js.vue'],
tslint: true,
vue: true
})
] : [])
,
mode: 'development'
}
}
This sounds more like a vue issue than a Umbraco one. You should be able to do it. After a quick google there is a working project here:
https://github.com/ionic-team/ionic-vue-conference-app
Have you tried explicitly installing packages with version numbers that work, e.g.
npm install #ionic/vue#0.0.4
I was trying to follow the simple Getting Started from (http://webpack.github.io/docs/tutorials/getting-started/).
And I am getting this error when I try to load style.css.
ERROR in ./entry.js
Module not found: Error: Can't resolve 'style' in 'Path to project in my computer'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'style-loader' instead of 'style'.
# ./entry.js 1:0-22
Any ideas ?
I installed css-loader and style-loader locally using mpm as explained in tutorial.
npm install css-loader style-loader
I see node-modules folder created after the installation.
For webpack version >=2.0
Update webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};
Use { test: /.css$/, loader: "style-loader!css-loader" } instead of { test: /.css$/, loader: "style!css!" }
Tried 'Use { test: /.css$/, loader: "style-loader!css-loader" } instead of { test: /.css$/, loader: "style!css!" }' as above but failed, below config works for me:
{
test:/\.css$/,
loader:'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
I have the following webpack.config.ts:
var webpack = require( 'webpack' );
var path = require( 'path' );
module.exports = {
entry: [
'./api/bin/www.ts'
],
output: {
path: path.resolve( __dirname, './dist/api' ),
filename: 'index.js'
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'awesome-typescript-loader' },
{ test: /\.json$/, loader: 'json-loader' }
]
},
resolve: {
extensions: [ '', '.js', '.ts' ]
},
target: 'node',
node: {
console: true,
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};
When I run webpack I get a warning about a dependency:
WARNING in ./~/express/lib/view.js
Critical dependencies:
78:29-56 the request of a dependency is an expression
# ./~/express/lib/view.js 78:29-56
The express server I start with this is no more than a Hello World example and functions as should but I am concerned about this warning.
My googlefu hasn't revealed any passable solutions. I have seen one particular instance of this problem but the solutions were to bypass the warning by not showing it.
Use webpack-node-externals.
const nodeExternals = require('webpack-node-externals');
{
target: 'node',
externals: [nodeExternals()],
}
https://www.npmjs.com/package/webpack-node-externals
For those that only need to remove the express due to the view lib as mentioned here you can also explicitly target express in externals from your webpack config.
externals: [{ 'express': { commonjs: 'express' } }]
My warning only got fixed with:
module.exports =
{
target: 'node',
externals: {
"express": "require('express')"
}
}
Instead of excluding all of the npm dependencies to be bundled with nodeExternals you can also exclude only express by natively requiring it by replacing
import express from 'express';
// Or
const express = require('express');
To
const express = __non_webpack_require__('express');
That will suppress the warning caused by express
I'm really newbie with webpack, so I'm not sure if I'm doing something wrong, I wish use uikit and less with webpack, I've installed the respective loaders like url-loader,file-loader,less-loader
and include in the webpack config
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'scripts')
},
{
test: /\.less$/,
loader: 'style!css!less'
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&minetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
},
{
test: /\.jpe?g$|\.gif$|\.png$|\.wav$|\.mp3$/,
loader: "file-loader"
}
/*, <----I ALSO TRY WITH THIS CONFIG....
{ test: /\.woff$/, loader: "url-loader?prefix=font/&limit=5000&mimetype=application/font-woff" },
{ test: /\.ttf$/, loader: "file-loader" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "file-loader" }*/
]
I include my less file in the entry point of my js file
require("!css!less!../less/main.less")
and my less file looks like
#import "../bower_components/uikit/less/uikit.less";
html{
background-color: red;
}
the directory
when I try run the console shows this:
ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.eot in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
# ./~/css-loader!./~/less-loader!./less/main.less 6:77369-77440 6:77463-77534
ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.woff2 in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
# ./~/css-loader!./~/less-loader!./less/main.less 6:77586-77659
ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.woff in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
# ./~/css-loader!./~/less-loader!./less/main.less 6:77690-77762
ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.ttf in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
# ./~/css-loader!./~/less-loader!./less/main.less 6:77794-77865
webpack: bundle is now VALID.
hope the errors will be much more clear for you and can help me,thank so much
I recommend you to write loaders in a short way
webpack.config.js
loaders: [
... other loaders
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
}
Don't forget
npm install url-loader --save-dev
And checkout variable #icon-font-path it should be
/bower_components/uikit/less/core/icon.less
"../../fonts";