I am trying to include sequence.js in my index.js file and I get the following error:
ERROR in ./src/js/sequence.js Module not found: Error: Cannot resolve
module 'imagesLoaded' in /home/jdellaria/Desktop/Musicpack/src/js #
./src/js/sequence.js 1144:95-143
ERROR in ./src/js/sequence.js Module not found: Error: Cannot resolve
module 'Hammer' in /home/jdellaria/Desktop/Musicpack/src/js #
./src/js/sequence.js 1144:95-143 Here is my Configuration
webpack.config.js
// var webpack = require('webpack');
var path = require('path');
// webpack.config.js
var config = {
entry: './src',
resolve: {
root: path.resolve('./src'),
extenstions: ['', '.js'],
moduleDirectories: ['node_modules']
},
output: {
path: './dist',
filename: 'my-app.js'
},
externals:[
require('webpack-require-http')
],
module:
{
loaders:
[
{ test: /\.css$/, loaders: ['style', 'css'] }, // Note that the order is important here, it means that 'style-loader' will be applied to the ouput of 'css-loader'
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, query: {presets: ['es2015']}},
// { test: /\.js$/, loaders: ['babel'] }, // note that specifying 'babel' or 'babel-loader' is equivalent for Webpack
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(jpe?g|png|gif|svg)$/, loader: 'url-loader?limit=10000&name=[path][name].[ext]'},
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]
}
}
module.exports = config;
index.js
require("!style!css!./css/styley.css");
require("./js/sequence.js");
console.log('Hello Webpack!');
document.write("It works.");
var greet = require('./greet'); // Import the greet function
greet('Webpack Jon');
index.html
<html>
<head>
<script type="text/javascript" src="./dist/my-app.js"></script>
</head>
<body>
</body>
</html>
Sequence.js uses AMD modules, and its looking to resolve those in the node_modules directory. Instead of referencing script directly in the /js folder, install it as a node module:
npm install sequencejs
Then require it like this in your index.js
require("sequencejs");
Related
I am trying to create my react application from scratch but my webpack.config.js is giving me errors saying [webpack CLI ] failed to load
Below is the webpack.config.js code
const HtmlWebPackPlugin = require(“html-webpack-plugin”);
const htmlPlugin = new HtmlWebPackPlugin({
template: “./src/index.html”,
filename: “./index.html”
});
module.exports = {
mode: ‘development’,
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: “babel-loader”
}
},
{
test: /\.css$/,
use: [“style-loader”, “css-loader”]
}
]},
plugins: [htmlPlugin]
};
Above is the code giving me errors in the webpack.config.js
Well I'm using amberframework and it have built-in webpack building the issue is that when I'm trying to import an image via scss it can't handle the image file and can't find as I understand it.
The thing is most of the source cod located in folder called src and so are the assets. During build step it should transfer the files to the public folder but it doesn't and instead output this weird error.
The error:
ERROR in ./src/assets/stylesheets/main.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './images/transparent.jpg' in '/Users/niko/code/blog/src/assets/stylesheets'
at factoryCallback (/Users/niko/code/blog/node_modules/webpack/lib/Compilation.js:282:40)
at factory (/Users/niko/code/blog/node_modules/webpack/lib/NormalModuleFactory.js:237:20)
at resolver (/Users/niko/code/blog/node_modules/webpack/lib/NormalModuleFactory.js:60:20)
at asyncLib.parallel (/Users/niko/code/blog/node_modules/webpack/lib/NormalModuleFactory.js:127:20)
at /Users/niko/code/blog/node_modules/async/dist/async.js:3888:9
at /Users/niko/code/blog/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Users/niko/code/blog/node_modules/async/dist/async.js:1062:13)
at /Users/niko/code/blog/node_modules/async/dist/async.js:969:16
at /Users/niko/code/blog/node_modules/async/dist/async.js:3885:13
at resolvers.normal.resolve (/Users/niko/code/blog/node_modules/webpack/lib/NormalModuleFactory.js:119:22)
at onError (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:65:10)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/niko/code/blog/node_modules/tapable/lib/Tapable.js:252:11)
at /Users/niko/code/blog/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/niko/code/blog/node_modules/tapable/lib/Tapable.js:252:11)
at innerCallback (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/niko/code/blog/node_modules/tapable/lib/Tapable.js:249:35)
at resolver.doResolve.createInnerCallback (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at afterInnerCallback (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:168:10)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/niko/code/blog/node_modules/tapable/lib/Tapable.js:252:11)
# ./src/assets/stylesheets/main.scss
ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/assets/stylesheets/main.scss
Module not found: Error: Can't resolve './images/transparent.jpg' in '/Users/niko/code/blog/src/assets/stylesheets'
# ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/assets/stylesheets/main.scss 7:83-118
# ./src/assets/stylesheets/main.scss
The code webpack file:
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
let config = {
entry: {
'main.bundle.js': './src/assets/javascripts/main.js',
'main.bundle.css': './src/assets/stylesheets/main.scss'
},
output: {
filename: '[name]',
path: path.resolve(__dirname, '../../public/dist'),
publicPath: '/dist'
},
resolve: {
alias: {
amber: path.resolve(__dirname, '../../lib/amber/assets/js/amber.js')
}
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(png|svg|jpg|gif)$/,
exclude: /node_modules/,
use: [
'file-loader?name=/images/[name].[ext]'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
exclude: /node_modules/,
use: [
'file-loader?name=/[name].[ext]'
]
},
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['env']
}
}
]
},
plugins: [
new ExtractTextPlugin('main.bundle.css'),
],
// For more info about webpack logs see: https://webpack.js.org/configuration/stats/
stats: 'errors-only'
};
module.exports = config;
This part of the error code tells us what's wrong. The relative path is incorrect.
Module not found: Error: Can't resolve './images/transparent.jpg' in '/Users/niko/code/blog/src/assets/stylesheets'
It's looking for /Users/niko/code/blog/src/assets/stylesheets/images/transparent.jpg
When you reference the jpg from the sass file, it should be one more folder back with a dot dot slash. ../images/transparent.jpg. Instead of starting to look in stylesheets, it will look from assets.
I'm working on an Electron app which requires the code highlighting feature. I installed highlight module as a node dependency and use webpack to bundle all the code into the app.bundle.js.
However, when I launch the Electron app, I notice an error from the highlight module complaining
Uncaught Error: ENOENT: no such file or directory, scandir '//vendor/highlight.js/languages/'
Inside app.bundle.js, the highlight module still uses the vendor/highlight.js/languages/ to search for its utilities files which I thought should be included into app.bundle.js with their paths updated.
var Highlight = module.exports
, fs = __webpack_require__(336)
, hljs = __webpack_require__(408).hljs
, langRelPath = "vendor/highlight.js/languages/"
, langPath = __dirname + "/" + langRelPath
, reEndsWithJs = /\.js$/i
, loadedMap = {}
, availableMap = {}
;
It's my first time to use webpack, so it might be caused by some webpack misconfigurations. I paste the webpack.config.js for your convenience.
'use strict'
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: [
'./app/app.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
include: [path.resolve(__dirname, 'app')],
exclude: /node_modules/,
loaders: ['babel?presets[]=es2015,presets[]=react']
}, {
test: /\.(scss|css)$/,
loaders: ['style', 'css', 'sass']
}, {
test: /\.json/,
loader: 'json'
}, {
test: /\.(png|jpg)$/,
loader: 'url-loader'
}, {
test: /\.html$/,
loader: 'html'
}, {
test: /\.txt$/,
loader: 'text'
}]
},
target: 'electron'
};
Does anyone have some idea for this?
（Everything works fine when not bundle by webpack.）
Thank you in advance:)
If I add .jsx to require('./StringOption') it works but I thought the resolve section of my webpack.config.js is supposed to allow me to require with no extension. What am I doing wrong?
Also why do I need ./ infront when it resides in the same directory as index.jsx?
Error message after running webpack:
ERROR in ./src/index.jsx
Module not found: Error: Cannot resolve module 'StringOption' in /Users/Mike/packages/chrome-extension-options/src
# ./src/index.jsx 5:19-42
index.js:
'use strict'
var React = require('react')
var ReactDOM = require('react-dom')
var StringOption = require('./StringOption');
ReactDOM.render(<StringOption id="test" name="Test" />, document.getElementById('content'))
webpack.config.js file:
var path = require("path");
module.exports = {
entry: './src/index.jsx',
output: {
path: path.resolve(__dirname, "dist"),
filename: 'index.js'
},
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'jsx-loader',
exclude: /node_modules/
}
]
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
resolve: {
extensions: ['', '*.js', '*.jsx']
}
};
Directory structure:
- src/
- index.jsx
- StringOption.jsx
- dist/
- index.js
- react.js
- react-dom.js
First of all ./StringOption says that it should search in the same directory. Unlike other places we need to specify from where we need to import a file in react jsx.
Secondly,
In resolve you need not use resolve explicitly, just use babel-loader or else use resolve as
resolve: {
extensions: ['', '.js', '.jsx']
}
or
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
include the following in your webpack.config.js so that you need not to worry about js and jsx extension.
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
// include: __dirname + '/src',
include: path.join(__dirname, '/src'),
loader: 'babel-loader',
query: {
presets: ['react','es2015']
}
}]
I have this webpack.config.js:
module.exports = {
entry: './src/admin/client/index.jsx',
output: {
filename: './src/admin/client/static/js/app.js'
},
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
optional: ['runtime']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
};
...yet I still get this error:
$ webpack -v
Hash: 2a9a40224beb025cb433
Version: webpack 1.10.5
Time: 44ms
[0] ./src/admin/client/index.jsx 0 bytes [built] [failed]
ERROR in ./src/admin/client/index.jsx
Module parse failed: /project/src/admin/client/index.jsx Line 1: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| import React from 'react';
| import AdminInterface from './components/AdminInterface';
I have:
Installed webpack globally and locally
Installed babel-loader, babel-core, and babel-runtime
Installed babel-loader globally, just in case
Why the hell is webpack seemingly ignoring babel-loader? Or does babel-loader not work with modules?
Update:
It looks like babel handles the input file just fine. When I run:
./node_modules/babel/bin/babel.js ./src/admin/client/index.jsx
...it outputs ES5 as expected. Therefore, it seems to me like somehow webpack isn't properly loading babel-loader.
This looks like a case of operator error. My webpack.config.js structure was not correct. Specifically, I needed to put the loader details inside of a module section:
module.exports = {
entry: './src/admin/client/index.jsx',
output: {
filename: './src/admin/client/static/js/app.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
optional: ['runtime']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
}
};
I fixed the same problem by including the es2015 and react presets and then adding them to the webpack.config.js file.
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
as explained in this post: https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
my full webpack.config.js file:
module.exports = {
context: __dirname + "/src",
entry: './main',
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react']
}
}
],
resolve: {
extensions: ['.js', '.jsx']
}
}
};
What is the version of your babel?If babel version is up to 6+.You need to identify the preset 'es2015' and 'react' like this
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['react', 'es2015']
}
}
]
}
Don't forget to install these modules:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev