In webpack's config file I set 'node_modules' and 'src/js/libs' as folders, where webpack should look for modules. 'jquery-form-styler' is installed via npm and lives in 'node_modules', but according to first error, webpack tries to find module in 'src/js/modules'. Why?
ERROR in ./src/js/modules/forms.js
Module not found: Error: Can't resolve 'jquery-form-styler' in '/Users/ildar.meyker/Sites/html-taxnet/src/js/modules'
# ./src/js/modules/forms.js 5:0-28
# ./src/js/modules/app.js
# ./src/js/main.js
My webpack.config.js content:
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'development',
entry: {
main: './src/js/main.js',
metrics: './src/js/metrics.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'public/js')
},
resolve: {
modules: [path.resolve(__dirname, 'src/js/libs'), 'node_modules']
},
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
optimization: {
splitChunks: {
chunks: "all",
minSize: 0
}
}
};
My files structure:
/node_modules/
/src/
js/
libs/
modules/
app.js
...
forms.js
...
main.js
metrics.js
forms.js starts as:
import $ from 'jquery';
import 'jquery.maskedinput';
import 'jquery-validation/jquery.validate';
import 'jquery-validation/additional-methods';
import 'jquery-form-styler';
...
Where 'jquery' and 'jquery-form-styler' are located in 'node_modules', while other modules in 'src/js/libs'.
Looks like webpack's reference to 'src/js/modules' wasn't due to it's attempt to find module in that folder. An error happened, because package.json in 'jquery-form-styles' had an incorrent main attribute. 'jquery.formstyler.min.js' instead of './dist/jquery.formstyler.min.js'.
Related
I have two HTML pages, each will include it's own bundle. Here is my project structure:
public/
-- dist/
src/
-- firebase/
-- network/
webpack.config.js
Here's my webpack config:
const path = require('path');
const CleanTerminalPlugin = require('clean-terminal-webpack-plugin');
module.exports = {
mode: "development",
entry: {
network: path.resolve(__dirname, 'src') + '/network/index.ts',
firebase: path.resolve(__dirname, 'src') + '/firebase/index.ts'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
path: path.resolve(__dirname, 'public') + '/dist',
},
plugins: [new CleanTerminalPlugin()]
};
I expect this to create two bundles in public/dist with the names firebase.js and network.js. Instead I get an error:
ERROR in main Module not found: Error: Can't resolve './src/' in 'path/to/project/root'
It also says Field 'browser' doesn't contain a valid alias configuration /path/to/project/root/src/index doesn't exist
And repeats that for .tsx, .ts and .js
I don't know why it's looking for an index.* file in my src/. I didn't specify that as an entry file. If I create a src/index.ts it builds, but only makes one bundle called main which is not my expected behavior.
It ended up being a really stupid issue, but I'll post the answer in case someone needs it.
I was invoking webpack with webpack ./src but webpack without the ./src worked as expected.
I've created boilder plate project with webpack, react, typescript etc. but whenever I build my project, webpack throw this errors on my entry point that Cannot resolve other modules (which is just simple Login component)
This is my webpack's error message
ERROR in ./src/index.tsx
Module not found: Error: Can't resolve './components/Login' in '/Users/myname/Desktop/Projects/front/src'
# ./src/index.tsx 6:14-43
This is my index.tsx file
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import Login from './components/Login';
ReactDOM.render(
<BrowserRouter>
<Login />
</BrowserRouter>,
document.getElementById('root')
);
And this is my Login components, which webpack cannot resolve
import * as React from 'react';
export default () => <div>Login</div>;
This is my webpack config and package.json's scripts
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.tsx',
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
useCache: true,
reportFiles: ['src/**/*.{ts,tsx}']
}
},
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'template/index.html'
})
],
mode: 'production',
output: {
path: path.resolve(__dirname, 'build/'),
filename: 'bundle.[hash].js'
},
plugins: [new CleanWebpackPlugin()]
};
package.json's scripts
"scripts": {
"build": "webpack"
},
I tried minimize my project as possible so you can focus on this single problem, why the hack my webpack cannot resolve ordinary component file? you can find this minimized project on https://github.com/sh2045/myproblem
you can just clone it, and run
npm i
npm run build
and you can see error message, please help :(
Instead of using awesome-typescript-loader why don't you try the loader's recommended by webpack for typescript
To fix your problem,
Install this node package npm install --save-dev typescript ts-loader. This is the loader that does ts to js conversion.
You need to remove awesome-typescript-loader and use ts-loader in webpack.config.js. Below is the updated webpack.config.js. You can use this configuration and execute npm run build and verify if your webpack bundles the project without errors
Modified webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.tsx',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader'
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
plugins: [
new HtmlWebpackPlugin({
template: 'template/index.html'
})
],
mode: 'production',
output: {
path: path.resolve(__dirname, 'build/'),
filename: 'bundle.[hash].js'
},
plugins: [new CleanWebpackPlugin()]
};
Note When i downloaded & setup your project from your git, this package npm i acorn --save was missing in your package.json i believe. so i had to install it manually
When I want to create my bundle.js with:
$ ./node_modules/.bin/webpack --config webpack.config.js
I get the following error
ERROR in ./dev/js/source/scripts/components/TextInput.js Module not
found: Error: Cannot resolve module
'source/scripts/components/IconButton' in
/Users/sebastien/Documents/Javascript/Tests/MyApp/dev/js/source/scripts/components
# ./dev/js/source/scripts/components/TextInput.js 4:18-65
ERROR in ./dev/js/source/scripts/components/TextInput.js Module not
found: Error: Cannot resolve module 'source/scripts/SDK/classNames' in
/Users/sebastien/Documents/Javascript/Tests/MyApp/dev/js/source/scripts/components
# ./dev/js/source/scripts/components/TextInput.js 15:17-57
The project tree is the following
/Users/sebastien/Documents/Javascript/Tests/MyApp
- webpack.config.js
- dev
- js
- index.js
- source
- scripts
- components
- TextInput.js
- IconButton.js
- SDK
- classNames.js
In TextInput.js there's the following statement
import IconButton from "source/scripts/components/IconButton";
and my webpack.config.js contains the following
var path = require('path');
var webpack = require('webpack');
module.exports = {
devServer: {
inline: true,
contentBase: './src',
port: 8080
},
devtool: 'cheap-module-eval-source-map',
entry: './dev/js/index.js',
module: {
loaders: [
{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/
},
{
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader'
}
]
},
output: {
path: 'src',
filename: 'js/bundle.min.js'
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin()
]
};
How can I configure webpack to add the path ./dev/js to search for modules? I have tried with:
- modules: [path.resolve(__dirname, "./dev/js"), "node_modules"]
without any success. Can you help?
Regards,
Try
import IconButton from "./source/scripts/components/IconButton";
and see if that helps.
or
import IconButton from "../source/scripts/components/IconButton";
but the first one should probably work. Give it a try.
I am trying to bundle and server a small app I have on a webpack dev server. So far it has been good, however it seems to be unable to locate my jsx files. I have an index in each of my react smart component folders that looks like so :
import Component from './component';
import container from './container';
import reducers from './reducers';
export default {
Component,
container,
Container: container(),
reducers
};
Webpack is complaining when I try to run the bundle and saying
client:47 ./client/ux-demo/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./component in /Users/me/projects/ux-demo/client/ux-demo
resolve file
The only real difference is it is a jsx file, rather than a js file, but I have babel-loader in place.
Here is my webpack.config file
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./client/app.jsx'
],
output: {
path: path.join(__dirname, 'client'),
filename: 'bundle.js',
publicPath: '/client/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel-loader'],
include: path.join(__dirname, 'client')
}, {
test: /\.jsx$/,
loaders: ['react-hot', 'babel-loader'],
include: path.join(__dirname, 'client')
}]
}
};
Unsure what I am doing wrong here, thanks!
You need to tell webpack that resolve .jsx files also
resolve:{
extensions:['.jsx']
}
Update:
I uploaded a sample project to github: https://github.com/guocheng/debug-webpack
In this sample project, I have two identical index.js file. One is under the project root, the other is under /src.
After npm install, run this command webpack-dev-server --config webpack.dev.config.js. You should see this error:
ERROR in ./index.js
Module parse failed: /Users/cheng/Dev/debug-webpack/index.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React, { Component } from 'react';
|
| export default class App extends Component {
# multi main
But if you change Line #9 in the webpack.dev.config.js to ./src/index, the same command will work.
So the location of where I put index.js affects the output.
Any ideas of why this is happening?
Here is my .babelrc file:
{
"presets": ["es2015", "stage-0", "react"],
"plugins": ["transform-decorators-legacy", "transform-runtime"],
"ignore": ["node-modues/**/*.js"]
}
I do have babel-preset-2015, stage-0 and react installed.
I run the webpack-dev-server with this CLI command: node ./webpack/server.js
Here is server.js
const webpack = require('webpack'),
WebpackDevServer = require('webpack-dev-server'),
config = require('./dev.config')
new WebpackDevServer(webpack(config), {
contentBase: './build',
// webpack-dev-server options
hot: true,
historyApiFallback: true,
inline: true,
// webpack-dev-middleware options
noInfo: false,
quiet: false,
lazy: false,
publicPath: config.output.publicPath,
headers: {'Access-Control-Allow-Origin': '*'},
stats: { colors: true }
}).listen(port, ip, function(err, result) {
if (err) {
console.log(err)
}
})
Here is the webpack config file I used:
const webpack = require('webpack'),
path = require('path'),
ExtractTextPlugin = require('extract-text-webpack-plugin')
const PATHS = {
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'build'),
dist: path.join(__dirname, 'dist')
}
module.exports = {
devtool: 'inline-source-map',
entry: {
javascript: [
'webpack-dev-server/client?http://127.0.0.1:5555',
'webpack/hot/only-dev-server',
'./app/index.js'
]
},
output: {
path: PATHS.dist,
filename: 'bundle.js',
publicPath: '/static/'
},
module: {
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel?cacheDirectory'],
exclude: /(node_modules|bower_components)/,
include: path.join(__dirname, 'app'),
},{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader')
},{
test: /\.(woff|woff2|eot|ttf)$/,
loader: 'url-loader?limit=8192&name=fonts/[name].[ext]'
},{
test: /\.(png|jpg|svg)$/,
loader: 'url-loader?limit=8192&name=img/[name].[ext]'
}]
},
cssnext: {
browsers: 'last 2 versions'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin(
'bundle.css',
{allChunks: true}),
new webpack.DefinePlugin({
'__DEVELOPMENT__': true,
'__DEVTOOLS__': true
})
]
}
When I run the dev server, here is the error message:
ERROR in ./app/index.js
Module parse failed: /Users/cheng/Dev/note/note-client/app/index.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react'
| import ReactDOM from 'react-dom'
| import { Provider } from 'react-redux'
# multi javascript
For some reason, the presets didn't kick in. I tried to use babel CLI to test the file manually:
babel index.js // note: .babelrc is used for configuring the presets
I can actually see the correct output. Any suggestions on what might be causing the issues?
Package versions I have installed:
├── babel-core#6.7.2
├── babel-eslint#5.0.0
├── babel-loader#6.2.3
├── babel-plugin-transform-decorators-legacy#1.3.4
├── babel-plugin-transform-runtime#6.6.0
├── babel-preset-es2015#6.6.0
├── babel-preset-react#6.5.0
├── babel-preset-stage-0#6.5.0
├── webpack-dev-server#1.14.1
Here is my project fold's structure:
project_name
|── app
|── index.js
|── dist
|── build
|── webpack
|── dev.config.js
|── server.js
|── .babelrc
I tried to run the following command at project root, and it gives me the same error:
webpack-dev-server --config ./webpack/dev.config.js
but babel ./app/index.js works.
You have invalid include path in js loader since your config is located in webpack directory:
{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel?cacheDirectory'],
exclude: /(node_modules|bower_components)/,
include: path.join(__dirname, 'app'),
}
Include path in your case is root/webpack/app and must be root/webpack/../app:
path.join(__dirname, '..', 'app')