I'm following a lecture on Angular With Webpack.
I am trying to add the less loader and keep getting an error.
ERROR in ./src/app.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../style.less in D:\projects\dev\webpack-angular-demo/src
# ./src/app.js 3:0-24
My webpack.config.js is :
module.exports = {
context: __dirname + '/src',
entry:'./app.js',
module:{
loaders:[
{
//create working environment for es6 need to npm i babel-loader babel-core babel-preset-es2015 -D
//https://github.com/babel/babel-loader
test:/\.js$/,
exclude:'/node_modules',
loader:'babel',
query: {
presets: ['es2015']
}
},
{
//take less convert to css and inject to style tag need to: npm i css-loader less-loader less style-loader -D
//https://github.com/webpack/less-loader
test:/\.less$/,
exclude:'/node_modules',
loader:"style!css!less"
}
]
}
};
My app.js is:
import '../style.less';
class Log{
constructor(){
console.log("sdfsdf");
}
}
new Log();
Inside the src directory i have the app.js , index.html and style.less files.
finally , this is my package.json file:
{
"name": "webpack-angular-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"css-loader": "^0.23.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
any idea why i'm getting this error ?
Thanks
i had the exact same problem like you. i managed to solve that with tiny change.
path.join(__dirname, 'src')
instead of using:
__dirname + '/src/
now, make sure that your webpack.config.js look like:
var path = require('path');
module.exports = {
context: path.join(__dirname, 'src'),
...
and when I import the style.less i used like above
import './style.less';
If all files are in the same directory (src), the first line in app.js should be:
import './style.less';
Related
I'm trying to get more familiar with modern javascript and am following a tutorial. Early setup includes running a file from another file. I have a server.js file with a simple 'import './config'; command. As a test that repo setup is correct, I should be able to run 'babel server.js'. But I keep returning the error shown below. How do I troubleshoot so that I can successfully run babel commands?
myName#SE-C02YNKJ9LVCF in ~/Linkedin_Learning/modern_javascript_app_example (main) > babel src/server.js
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '#babel/plugin-proposal-class' imported from /Users/myName/Linkedin_Learning/modern_javascript_app_example/babel-virtual-resolve-base.js
at new NodeError (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:2795:5)
at packageResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3451:9)
at moduleResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3485:18)
at defaultResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3524:13)
at /usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3547:14
at Generator.next (<anonymous>)
at asyncGeneratorStep (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:63:103)
at _next (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:65:194)
at /usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:65:364
at new Promise (<anonymous>) {
code: 'ERR_MODULE_NOT_FOUND'
}
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '#babel/plugin-proposal-class' imported from /Users/myName/Linkedin_Learning/modern_javascript_app_example/babel-virtual-resolve-base.js
at new NodeError (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:2795:5)
at packageResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3451:9)
at moduleResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3485:18)
at defaultResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3524:13)
at /usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3547:14
at Generator.next (<anonymous>)
at asyncGeneratorStep (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:63:103)
at _next (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:65:194)
at /usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:65:364
at new Promise (<anonymous>) {
code: 'ERR_MODULE_NOT_FOUND'
Things I've tried so far
as per tutorial, tried updating my bash_profile w/ 'export PATH=$PATH:./node_modules/.bin'
tried setting it in global PATH variable
setting all devDependencies in package.json file that mention #babel to consistent version.
After updating package.json file, new error is below:
ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/robertgorowsky/Linkedin_Learning/modern_javascript_app_example/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///Users/myName/Linkedin_Learning/modern_javascript_app_example/babel.config.js:1:1
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:541:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)
When I run babel --version, it returns '7.19.3 (#babel/core 7.19.3)' matching package.json file.
contents of files:
content.js
console.log('config test')
server.js
import './config';
package.json
{
"name": "modern_javascript_app_example",
"version": "1.0.0",
"description": "Learning fullstack JavaScript Dev with MongoDB, Node.js, React.js",
"main": "index.js",
"type": "module", //added this line after first answer
"scripts": {
"start": "nodemon --exec babel-node server.js --ignore public/",
"dev": "webpack -wd"
},
"repository": {
"type": "git",
"url": "git+https://github.com/rgorowsky/modern_javascript_app_example.git"
},
"author": "",
"license": "GPL-3.0",
"bugs": {
"url": "https://github.com/rgorowsky/modern_javascript_app_example/issues"
},
"homepage": "https://github.com/rgorowsky/modern_javascript_app_example#readme",
"dependencies": {
"express": "^4.18.1",
"mongodb": "^4.10.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#babel/node": "^7.19.1",
"#babel/core": "^7.19.3",
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/preset-env": "^7.19.3",
"#babel/preset-react": "^7.18.6",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.5",
"eslint": "^8.23.1",
"eslint-plugin-react": "^7.31.8",
"nodemon": "^2.0.20",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('public'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /|.js$/,
exclude: /.node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
};
babel.config.js
module.exports = {
presets: ['#babel/react', '#babel/env'],
plugins: ['#babel/plugin-proposal-class-properties'],
};
A picture of my repo file structure for reference:
please do the following step
add "type": "module" in package.json
{
"name": "modern_javascript_app_example",
"version": "1.0.0",
"description": "Learning ...",
"main": "index.js",
"type": "module",
"scripts": {
and use import './content.js'; not import './config'; in serer.js file
I'm, trying to generate a bundle from a javascript to get some requests from Amazon Selling Partner API. Actually, I have a mockup of a getOrders request which works in Node.js by using the
[amazon-sp-api client package] (https://www.npmjs.com/package/amazon-sp-api#setting-credentials-from-environment-variables).
As I need to get the script working in Oracle Netsuite, I would need to copy that script to the Netsuite account as a unique-file bundle.
So, I have generated the bundle I need but it launches a TypeError when trying to execute it as a unique file with Node. Indeed, the error header looks like this:
...readdirSync(__dirname + '/resources').reduce((eps, ep) => {
^
TypeError: readdirSync is not a function
It appears to be some issue about my webpack.config.js as I'm using a basic config and it probably requires specific details to lead with the dependencies.
There is a dependency I use in my script, which at once use third-party dependencies:
const SellingPartnerAPI = require('amazon-sp-api');
My webpack.config.js looks like this:
const path = require('path');
//const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//This property defines where the application starts
entry:'./app.js',
//This property defines the file path and the file name which will be used for deploying the bundled file
output:{
path: path.join(__dirname, '/dist'),
filename: 'get_orders.js'
},
//Setup loaders
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
// Setup plugin to use a HTML file for serving bundled js files
plugins: [
/* new HtmlWebpackPlugin({
template: './src/index.html'
})*/
]
}
And the package.json is this:
{
"name": "orders-importer-bundle",
"version": "1.0.0",
"description": "Project to create a test blundle to import orders from Amazon to Netsuite using SP-API and SuiteScript.",
"main": "app.js",
"scripts": {
"pack": "webpack-dev-server --mode development --open --hot",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "node ./app.js"
},
"repository": {
"type": "git",
"url": "main"
},
"keywords": [
"webpack",
"bundle",
"netsuite",
"amazon",
"sp-api"
],
"author": "Roberto Carlos Rodriguez",
"license": "ISC",
"dependencies": {
"amazon-sp-api": "^0.7.1"
},
"devDependencies": {
"#babel/cli": "^7.17.6",
"#babel/core": "^7.17.7",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"babel-core": "^6.26.3",
"babel-loader": "^8.2.3",
"html-webpack-plugin": "^5.5.0",
"babel-preset-env": "^1.7.0",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
}
}
I have a new project and setup webpack to use as a module bundler but when I start the webpack-dev-server using npm start script , I got an error
Error can't find module :
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:571:15)
at Function.Module._load (internal/modules/cjs/loader.js:497:25)
at Module.require (internal/modules/cjs/loader.js:626:17)
at require (internal/modules/cjs/helpers.js:20:18)
although I wrote everything correct and I don't get the point of why this happened ? can any one tell me why this happen ?
this is my package.json file
{
"name": "simple-webpack-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config ./webapck.common.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.1",
"style-loader": "^0.21.0",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
}
}
and this is my webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin') ;
module.exports = {
entry:{
index:'./src/index.js',
app:'./src/app.js'
},
output: {
path: path.join(__dirname,'dist'),
filename: "[name].js"
},
module: {
rules: [
{
test :/\.css$/,
use:['style-loader','css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin(
{
chunks:['app'],
template:'./index.html'
}
)
],
devServer: {
port:4000
}
}
I tried your project setup in my IDE and I think I found the solution of your problem , I think you wrote the wrong config name in package.json file
your file in the disk called webpack.common.js
the file name in package.json webapck.common.js
so to solve the problem
change the file name in package.json to webpack.common.js instead of webapck.common.js this will solve the problem I think , change the package.json start script to
"start": "webpack-dev-server --config ./webpack.common.js"
I am trying to include my css in the server hosted by webpack-dev-server. For that to happen, I apparently have to use style-loader and css-loader together, in order to bundle the css into the JavaScript.
I can't get it to work.
I follow the instructions here, yet I get the following error:
ERROR in ./src/index2.js
Module not found: Error: Can't resolve 'main.css' in C:\Users\magnusga\Downloads\Programming\TestPrograms\test\src'
# ./src/index2.js 1:0-27
# multi (webpack)-dev-server/client?http://localhost:8080 ./src/index2.js
I know for certain that main.css is in the same folder as index2.js
My Settings
index2.js
import css from 'main.css';
// ...much more code
webpack.config.js
module.exports = {
entry: {
app: './src/index2.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader']
}
],
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development',
template: 'src/index.html',
inject: 'head'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index2.js",
"dependencies": {
"rxjs": "^5.5.6"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.17",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^2.30.1",
"postcss-loader": "^2.1.3",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"buildb": "babel src --watch --out-dir built --copy-files",
"watch": "webpack --watch",
"start": "webpack-dev-server",
"build": "webpack"
},
"author": "",
"license": "ISC"
}
One Fix
One fix is to use import css from './main.css'; instead of import css from 'main.css'; (note the ./ infront of the file name).
That does not feel right though, because the css-loader site shows that it should be the latter, not the former.
Is it a typo in the docs?
Thank you.
It is not really a typo. If you import it like this:
import css from 'main.css';
Webpack thinks, that you want to import a module, and searches for this file under node_modules. This is necessary, when you for example installed the bootstrap package and want to import its css. So when your css file comes from a dependency, you import that dependency like this. But when you want to import a lokal file, always use relative paths.
So it must be: import css from './main.css';
Further Reading:
https://webpack.js.org/concepts/module-resolution/#module-paths
https://webpack.js.org/configuration/resolve/#resolve-modules
Problem
So, i'm working a web app using Webpack and ES6. When I try to run Webpack, it tells me that it can't resolve "app.js". I've looked all across the internet for a solution, but I just couldn't find one, can someone help me?
The Full error is:
ERROR in ./assets/js/main.js
Module not found: Error: Can't resolve 'app.js' in 'C:\Users\sidna\Dropbox\Dev Stuff\Web Apps\Mondrian Generator\assets\js'
# ./assets/js/main.js 4:0-17
webpack.config.js
module.exports = {
entry: './assets/js/main.js',
output: {
filename: 'assets/js/build.js',
},
watch: true,
module: {
loaders: [
{
test: /\.scss$/, loader: "style-loader!css-loader!sass-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
],
}
};
app.js (Empty)
main.js
// SCRIPTS
require("app.js");
// STYLES
require("../css/large.scss");
package.json
{
"name": "mondrian-generator",
"version": "1.0.0",
"description": "Create your own Mondrian",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"dependencies": {
"css-loader": "^0.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.4.1"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.4.0",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"script-loader": "^0.7.0",
"webpack": "^2.4.1"
}
}
When the import is neither an absolute path (starting with /) nor explicitly a relative path (starting with ./ or ../), it is resolved as a module, which means it's Loading from node_modules Folders.
Your app.js is not in node_modules, so you need to change it to a relative path (assuming it's in the same directory as main.js):
require("./app.js");
Webpack follows the import behaviour of Node.js, but it also allows you to change it with the resolve.modules option.