Module not found: Error: Cannot resolve module - javascript

I have created a simple project which uses babel and webpack. I have checked it in here
https://github.com/abhitechdojo/MovieLensReact.git
In my root folder I have two files script1.js and script2.js. My webpack.config.js looks like
module.exports = {
entry : {
main: [
'script1.js', 'script2.js'
]
},
output : {
filename: 'public/main.js'
},
"module" : {
"loaders" : [
{
"test": /\.jsx?/,
"exclude": /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
but when I run webpack. it cannot find any javascript files
ERROR in multi main
Module not found: Error: Cannot resolve module 'script1.js' in /Users/abhishek.srivastava/MyProjects/MovieLensReact
# multi main
ERROR in multi main
Module not found: Error: Cannot resolve module 'script2.js' in /Users/abhishek.srivastava/MyProjects/MovieLensReact
# multi main

In nodejs, when you call require("script1.js") it won't search in the current folder.
You have to use require("./script2.js"), to specify that the file is in the current folder.
In your case, modify the config file with main: ['./script1.js', './script2.js'].

Related

How to include multiple paths in Webpack module rules? It keep giving error for another file

I am trying to include multiple paths into Webpack module rules. Initially it gave me error for ./src/bootstrap.js, So I included the same in rules, now it gives me error for ./src/App.js. When I try to include it in same way, it breaks badly and gives error for many other files.
Can some please tell me how can I include /node_modules/mfe-react/index.js and all files in src folder ?
module.exports = {
module: {
rules: [
{
test: /\.*?js$/,
exclude: /node_modules/,
include: ['/node_modules/mfe-react/index.js',
path(__dirname, "..", "src", "bootstrap.js")
],
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-react", "#babel/preset-env"],
plugins: ["#babel/plugin-transform-runtime"],
},
},
},
],
},
Error:
ERROR in ./src/App.js 13:12
Module parse failed: Unexpected token (13:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Build Error on importing images with react

I import images like this below:
import StepIcon from '../../public/images/icon_step.png'
and it works with no problem but when I run build I get the error below, guess I gotta fix webpack setting but I have no idea. how can i solve this problem?
Error
error in ./public/images/icon_step.png
Module build failed (from ./node_modules/file-loader/dist/cjs.js):
TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be one of type string, Buffer, TypedArray, or DataView. Received type function
at Hash.update (internal/crypto/hash.js:64:11)
at getHashDigest (/mnt/c/Users/wbvco/Desktop/Project Baby/styled-react-boilerplate/node_modules/loader-utils/lib/getHashDigest.js:48:8)
at url.replace (/mnt/c/Users/wbvco/Desktop/Project Baby/styled-react-boilerplate/node_modules/loader-utils/lib/interpolateName.js:96:11)
at String.replace (<anonymous>)
at Object.interpolateName (/mnt/c/Users/wbvco/Desktop/Project Baby/styled-react-boilerplate/node_modules/loader-utils/lib/interpolateName.js:93:8)
at Object.loader (/mnt/c/Users/wbvco/Desktop/Project Baby/styled-react-boilerplate/node_modules/file-loader/dist/index.js:27:36)
# ./src/components/signupstep.js 35:0-57 511:11-19
# ./src/pages/signup.js
# ./src/app.js
# ./src/index.js
# multi react-hot-loader/patch ./src/index.js
webpack Setting
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
}]
},
I think it's due to image relative path issue, can you try the below methods.
Simple method you should follow, see here for more info.
By using webpack
Please update the webpack like below
module: {
rules: [
{
test: /\.(jpe?g|gif|png|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000
}
}
]
}
],
},
Then you can import the images from public folder to react component
import image from '../../public/assets/images/logo.png'
<img src={image}/>
By using require method
Also you can try this by install url-loader and file-loader
npm install url-loader file-loader --save-dev
Then update the webpack config as
module: {
loaders: [
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
]
}
and finally
<img src={require('./PATH_TO_IMAGE/IMAGE.png')}/>

Webpack throws syntax error for JSX

When I attempted to use webpack to compile my react jsx code, I received the following error:
ERROR in ./client/index.js
Module parse failed: C:\Users\Gum-Joe\Documents\Projects\bedel/client\index.js Unexpected token (6:11)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:11)
at Parser.pp.raise (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:920:13)
at Parser.pp.unexpected (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1483:8)
at Parser.pp.parseExprAtom (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:330:12)
at Parser.pp.parseExprSubscripts (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:225:19)
at Parser.pp.parseMaybeUnary (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:204:17)
at Parser.pp.parseExprOps (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:151:19)
at Parser.pp.parseMaybeConditional (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:133:19)
at Parser.pp.parseMaybeAssign (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:110:19)
at Parser.pp.parseExpression (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:86:19)
at Parser.pp.parseReturnStatement (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1854:26)
at Parser.pp.parseStatement (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1719:19)
at Parser.pp.parseBlock (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1991:21)
at Parser.pp.parseFunctionBody (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:607:22)
at Parser.pp.parseMethod (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:576:8)
at Parser.pp.parseClassMethod (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:2137:23)
at Parser.pp.parseClass (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:2122:10)
# ./client/index.js 1:0-20
.babelrc:
{
"presets": ["es2015", "react"]
}
webpack.config.js:
// Webpack config
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// Use client as our root
context: __dirname + "/client",
// Entry file
entry: "./index.js",
// Resolve
resolve: {
extensions: ['', '.js', '.jsx']
},
// Output to /build
output: {
path: path.join(__dirname, "build", "js"),
filename: "bundle.js"
},
loaders: [
{ test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
],
// Plugins
plugins: [
// HTML
new HtmlWebpackPlugin({
title: 'Bedel',
filename: path.join(__dirname, 'views', 'index.ejs'),
template: path.join(__dirname, 'client', 'templates', 'index.ejs')
})
]
};
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React</p>;
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
I have installed all the babel presets required, as well as babel-core.
I have looked at the following answers already:
babel-loader jsx SyntaxError: Unexpected token
React, babel, webpack not parsing jsx code
Edit: After commenting out my jsx syntax, the outputting bundle.js does not appear to have been transformed by babel (i.e. I can see ES6 code in it)
Edit: Sorry for the inconvenience, but app.jsx was a solution that I tried that involved putting the logic that should be in index.js into a separate file.
Edit: Here is a list of the solutions I tried that did not work:
Copy .babelrc to client/.babelrc
Change test to test for .js instead of .js
Separate app logic into separate file (app.js)
Put presets to use in webpack config
Also, I have pushed my code to my GitHub repo (https://github.com/Gum-Joe/bedel). Feel free to have a look at it.
You configured the loader to only pass .jsx files through Babel:
test: /\.jsx$/
However, your file has the extension .js. Either rename the file or update the test expression to /\.jsx?$/.
In addition to updating the test, you need to rename .babel.rc to .babelrc (no . before rc). Otherwise Babel thinks that there is no configuration file and won't load any presets.
The loaders property must exist within the module property. Webpack Loaders
module.exports = {
// ...
// Output to /build
output: {
path: path.join(__dirname, "build", "js"),
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
]
},
//...
};
You need to use react-preset with babel, like here:
loaders: [{
test: /\.(js|jsx)$/,
loader: 'babel',
query: {
presets: [
'es2015',
'react'
]
}
}]
I'm having this issue as well, and if you're using Windows and Node 6.x, the only workaround I've found for now seems to be to use Node 4 LTS or 5 instead. Without knowing the root cause, the problem seems to stem from some combination of using JSX, Webpack, Babel, Acorn JS, Node 6, and Windows.
https://github.com/coryhouse/pluralsight-redux-starter/issues/2
https://github.com/danmartinez101/babel-preset-react-hmre/issues/32
Can you try wrapping the entire element in brackets "()"?
return (<p>...</p>)

How to include oasis.js from Bower in a webpack build?

I'm using webpack to build my project and I'm having trouble getting it to include oasis.js, specifically https://raw.githubusercontent.com/tildeio/oasis.js/4c657d15a89c532382d2d174783f5c3660111765/dist/oasis.js as pulled in by Bower since there isn't an npm module available for it.
My webpack configuration looks like:
'use strict';
const BowerWebpackPlugin = require('bower-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/index.js',
output: {
path: 'www',
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.html$/, loader: 'html-loader' },
{ test: /\.svg$/, loader: 'file-loader' }
]
},
plugins: [
new BowerWebpackPlugin({ excludes: [/oasis\.amd\.js$/] }),
new HtmlWebpackPlugin()
]
};
and my ./app/index.js which pulls in Oasis looks like:
'use strict';
var oasis = require('oasis.js');
When I run webpack -d, I get error a series of error messages like:
ERROR in ./bower_components/oasis.js/dist/oasis.js
Module not found: Error: Cannot resolve module 'oasis/xhr' in /Users/jeffreycharles/projects/dev-container/bower_components/oasis.js/dist
# ./bower_components/oasis.js/dist/oasis.js 2983:0-3092:4 3680:0-3780:4
ERROR in ./bower_components/oasis.js/dist/oasis.js
Module not found: Error: Cannot resolve module 'oasis/connect' in /Users/jeffreycharles/projects/dev-container/bower_components/oasis.js/dist
# ./bower_components/oasis.js/dist/oasis.js 2983:0-3092:4 3093:0-3189:4
ERROR in ./bower_components/oasis.js/dist/oasis.js
Module not found: Error: Cannot resolve module 'oasis/logger' in /Users/jeffreycharles/projects/dev-container/bower_components/oasis.js/dist
# ./bower_components/oasis.js/dist/oasis.js 2983:0-3092:4 3093:0-3189:4 3217:0-3404:4 3453:0-3679:4 3680:0-3780:4
ERROR in ./bower_components/oasis.js/dist/oasis.js
Module not found: Error: Cannot resolve module 'oasis/version' in /Users/jeffreycharles/projects/dev-container/bower_components/oasis.js/dist
# ./bower_components/oasis.js/dist/oasis.js 2983:0-3092:4
which I find odd since I can see define("oasis/xhr", on line 4961 in the oasis file and the other modules that webpack is saying it can't resolve are all in that same file I linked to.
I've also tried setting noParse and using the script-loader to load Oasis but then it complains about RSVP not being defined. This isn't an issue when I load Oasis using a script tag in my HTML (in fact it all works properly when I do that).
How do I get Webpack to build and include Oasis.js in my project?

Webpack: node_modules/css/index.js didn't return a function

I'm trying out webpack for the first time and used this tutorial to get started and include react.js.
After finishing the steps and installing the style and css module I keep getting an error that the css module didn't return a function.
This is my index.jsx:
/** #jsx React.DOM */
'use strict';
require('../css/normalize.css');
var React = require('react');
var Hello = require('./Test/Hello');
React.render(<Hello />, document.getElementById('content'));
And my webpack config file:
module.exports = {
entry: './ui/src/index.jsx',
output: {
path: __dirname + '/build-ui',
filename: 'app.js', //this is the default name, so you can skip it
//at this directory our bundle file will be available
//make sure port 8090 is used when launching webpack-dev-server
publicPath: 'http://localhost:8090/assets'
},
module: {
loaders: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony'
},
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.scss$/,
loader: "style!css!sass"
}
]
},
externals: {
//don't bundle the 'react' npm package with our bundle.js
//but get it from a global 'React' variable
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx']
}
};
When webpack tries to bundle the project it always states the following error:
ERROR in Loader /Users/Johannes/Documents/Development/holmes/node_modules/css/index.js didn't return a function
# ./ui/src/index.jsx 5:0-31
I don't know what to do about that. Has anyone encountered that issue? And how can I solve it?
EDIT: My directory looks as follows:
holmes/
ui/
css/
normalize.css
src/
Test/
Hello.jsx
index.jsx
index.html
package.json
webpack.config.js
This error is caused by a css module inside node_modules. Since you've specified the css-loader in your config, webpack tries to lookup that loader inside node_modules and finds another module called css which doesn't look like a loader (hence the error message).
To avoid confusion you should simply add the -loader postfix to each loader. Omitting the -loader postfix is just a convenience feature by webpack, but unfortunately it's the culprit of that error in your case.
loaders: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader"
}
Update: Starting with webpack 2, you can't omit the -loader postfix anymore. We decided to do this to prevent errors like this.
I had a similar issue with react-flexbox-grid. In my case, the solution was installing css-loader and style-loader npm modules:
npm install css-loader style-loader --save-dev
I also came across a similar issue using node-noop.
Fortunately, using null as a replacement worked when I added enzyme and react-addons-test-utils to a project.

Categories