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
Related
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']
}
I am moving existing javascript vendor libraries into a webpack setup, where possible using npm to install an npm module and deleting the old script tag on the individual page as bundle.js and bundle.css include it
In index.js, I have the following
import 'materialize-css/dist/css/materialize.min.css';
However, when webpack is run, it errors with the following
Module parse failed: .......Unexpected character ''
You may need an appropriate loader to handle this file type.
So, for some reason, webpack is looking at the entire materialize folder, rather than just the single minified css file, and is then error when it comes across materialize/fonts directory.
I am unclear why this is happening, and what to do to stop it. Any advice would be greatly appreciated.
My webpack config is below
const webpack = require('webpack');
const path = require('path');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var postcssImport = require('postcss-import');
module.exports = {
context: __dirname + '/frontend',
devtool: 'source-map',
entry: "./index.js",
output: {
filename: 'bundle.js',
path: path.join(__dirname, './static')
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', '!css-loader?sourceMap&importLoaders=1!postcss-loader')
}
]
},
plugins: [
new ExtractTextPlugin("si-styles.css")
],
postcss: function(webpack) {
return [
postcssImport({ addDependencyTo: webpack }), // Must be first item in list
precss,
autoprefixer({ browsers: ['last 2 versions'] })
];
},
}
I have a React project using bower and webpack.
I am trying to use this module https://github.com/jrowny/react-absolute-grid.
I installed it with npm and I added it to my code like this:
import AbsoluteGrid from 'react-absolute-grid/lib/AbsoluteGrid.jsx';
When importing the module, I get this issue:
Line 3: Unexpected token
You may need an appropriate loader to handle this file type.
| 'use strict';
|
| import React from 'react';
I suspect the problem is that within webpack.config.js I only load files from where my code is:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel'
}
]
}
}
module.exports = config;
However, I'm not sure.
I saw questions with a similar error message on SO but they had other issues as far as I could see.
Change the way you import the module:
From:
import AbsoluteGrid from 'react-absolute-grid/lib/AbsoluteGrid.jsx';
To:
import AbsoluteGrid from 'react-absolute-grid';
And you should better exclude node_modules and bower_components in webpack configs:
...
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/
Also, you should better use babel-loader with react and es2015 babel presets.
Install them:
npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-es2015
And inclue in webpack configs:
module : {
loaders : [
{
test : /\.jsx?/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/,
query: {
presets: ['react', 'es2015']
}
}
]
}
I try to implement wow.js using react and webpack.
I install it via npm.
npm install --save wow.js
It install perfectly. Now the problem is how to import it properly. I can't make it work keep getting undefined.
I've tried few way:
First:
import wow from 'wow.js';
But webpack can't compile it. It says the module cannot be found. Even I using complete url import wow from /node_modules/wow.js
Second:
I'm using this solution from here:
require('imports?this=>window!js/wow.js');
But I still get cannot find modules (i change the path to my node_modules).
Third:
From here:
I'm using the expose module and try to new WOW().init(); it says Wow is undefined.
I'm not using his first solution because I want my html to look simple only has bundle.js script.
I can't found any other solution. What should I do to make it work?.
Thanks!
my webpack.config.js:
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'bootstrap-loader',
'webpack/hot/only-dev-server',
'./src/js/index.js'
],
output: {
path: __dirname + "/build",
publicPath: "/build/",
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
],
module: {
loaders: [
{
exclude: /node_modules/,
loader: 'react-hot!babel'
},
{
test: /\.css$/,
loader: 'style!css!postcss'
},
{
test: /\.scss$/,
loader: 'style!css!postcss!sass'
},
{ test: /\.(woff2?|ttf|eot|svg|otf)$/, loader: 'url?limit=10000' },
{
test: 'path/to/your/module/wow.min.js',
loader: "expose?WOW"
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
},
postcss: [autoprefixer]
};
Alternative option without updating your wepack config.
Install WOW.js: npm install wowjs
Import in your component: import WOW from 'wowjs';
Under componentDidMount() of your component: new WOW.WOW().init();
import React, {Component} from 'react';
import WOW from 'wowjs';
class Cmp extends Component {
componentDidMount() {
new WOW.WOW().init();
}
render() {
/* code */
}
}
export default Cmp;
Do the following steps
Install exports-loader
npm i exports-loader --save-dev
Add to webpack.config.js this loader
{
test: require.resolve('wow.js/dist/wow.js'),
loader: 'exports?this.WOW'
}
add import to your app
import WOW from 'wow.js/dist/wow.js';
You can also change .call(this) to .call(window) (wow.js last line). Found this solution here https://foundation.zurb.com/forum/posts/46574-how-to-add-js-library-from-bower