ERROR in multi ./main.js watch when running webpack - reactjs

I get the following error when running:
webpack watch
ERROR in multi ./main.js watch
Module not found: Error: Can't resolve 'watch' in '/Users/name/directory/src'
# multi ./main.js watch
Heres my webpack.config.js file
const path = require('path');
module.exports = {
context: path.join(__dirname, 'src'),
entry: [
'./main.js',
],
output: {
path: path.join(__dirname, 'www'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, "src")
],
exclude: /node_modules/,
use: [
'babel-loader',
],
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}
],
},
resolve: {
modules: [
path.join(__dirname, 'node_modules'),
],
},
};
Here is my package.json
{
"name": "name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"webpack-dev-middleware": "^1.10.1"
},
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"babel-preset-latest": "^6.24.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-2": "^6.22.0",
"css-loader": "^0.27.3",
"express": "^4.15.2",
"node-sass": "^4.5.0",
"react-helmet": "^4.0.0",
"react-hot-loader": "^1.3.1",
"sass-loader": "^6.0.3",
"style-loader": "^0.14.1",
"webpack": "^2.2.1",
"webpack-dev-middleware": "^1.10.1",
"webpack-dev-server": "^2.4.2"
}
}
Below is my main.js file
import "./styles/stylesheet.scss";
import { Header } from "./components/headercomponent";
import React from "react";
import ReactDOM from "react-dom";
import { render } from "react-dom";
class App extends React.Component {
render(){
return (
<div id="container">
<Header/>
<h1>hello world</h1>
</div>
);
}
}
render(<App/>, window.document.getElementById("app"));
Do you know why I'm getting the webpack error?

Arguments you pass to the webpack CLI will be treated as entry points. You want to use the --watch option, not add watch as an entry. The correct command is:
webpack --watch

Related

d.ts file not being created for typings-for-css-modules-loader

Here's my package.json file:
{
"name": "redacted",
"version": "1.0.0",
"description": "redacted",
"main": "webpack.config.js",
"directories": {
"doc": "docs"
},
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "redacted"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "URL"
},
"homepage": "Here",
"dependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0"
},
"devDependencies": {
"#types/react": "^16.3.16",
"#types/react-dom": "^16.0.6",
"awesome-typescript-loader": "^5.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^3.2.0",
"source-map-loader": "^0.2.3",
"tslint": "^5.10.0",
"typescript": "^2.9.1",
"typings-for-css-modules-loader": "^1.7.0",
"webpack": "^4.11.1",
"webpack-cli": "^3.0.2",
"webpack-dev-server": "^3.1.4"
}
}
And here's webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: "./src/index.tsx",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader",
exclude: /node_modules/,
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
},
{
test: /\.css$/,
include: /src/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract('typings-for-css-modules-loader?modules&namedExport&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),
},
{
test: /\.css$/,
include: /node_modules/,
loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader?sourceMap'})
}
]
},
plugins: [
new ExtractTextPlugin('[name].css'),
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
devtool: "source-map",
resolve: {
extensions: [".js", ".ts", ".tsx"]
}
}
Doing the following in my component:
import * as React from "react";
import css = require("./App.css");
export class App extends React.Component<{}, {}> {
public render() {
return (
<div className={css.main}>I am working!</div>
);
}
}
But it doesn't generate d.ts file. import css line says [ts] Cannot find module './App.css'.
Instead I get this error:
ERROR in ./src/components/App.css
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
I also tried this tutorial but it didn't work either: https://medium.com/#sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10
How can I go about fixing this? Thanks!

Webpack with babel-loader doesn't recognize Typescript

I am using webpack and trying to leverage an existing React component library written in TS.
However, with the settings below, the webpack is giving 'unexpected Token' error. I copied the problematic code to babel online transpiler https://babeljs.io/repl/ but it is not showing any error.
I am very new to React development, any criticism/questions/answers are welcomed.
Thanks!
This is my webpack.config.js
var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
module.exports = {
context: __dirname,
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./app/static/js/index'
],
output: {
path: path.resolve('./app/static/bundles/'),
filename: '[name]-[hash].js',
publicPath: 'http://localhost:3000/static/bundles/',
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new BundleTracker({filename: './webpack-stats.json'}),
],
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: ["babel-loader?presets[]=es2015,presets[]=react"],
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
configFileName: './tsconfig.json'
},
exclude: /node_modules/
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.css']
}
}
My entry point file index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import * as PropTypes from 'prop-types';
interface IDemoState {
value ?: string;
}
class Test extends React.Component<{}, IDemoState> {
state: IDemoState = {
value : 'general'
}
}
ReactDOM.render(<Test />, document.getElementById('tabnav'));
Package.json
{
"name": "djangoproject",
"version": "1.0.0",
"description": "Django Project",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js --progress --colors",
"build-production": "webpack --config webpack.prod.config.js --progress --colors",
"watch": "node server.js"
},
"keywords": [
"Django"
],
"license": "ISC",
"devDependencies": {
"adp-css-framework": "^1.5.3",
"adp-react-components": "^1.4.3",
"adp-react-icons": "^1.16.0",
"babel": "^6.23.0",
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-preset-env": "^1.5.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-hot-loader": "^1.3.1",
"style-loader": "^0.18.2",
"ts-loader": "^2.2.1",
"typescript": "^2.4.1",
"webpack": "^3.0.0",
"webpack-bundle-tracker": "^0.2.0",
"webpack-dev-server": "^2.5.0"
}
}
If I run npm run watch, I got this error:
ERROR in ./app/static/js/index.js
Module build failed: SyntaxError: xxxxx./app/static/js/index.js: Unexpected token (10:20)
8 |
9 | class Test extends React.Component<{}, IDemoState> {
> 10 | state: IDemoState = {
| ^
11 | value : 'general'
12 | }
13 | }
# multi webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-se
rver ./app/static/js/index
The problem finally goes away after I changed the ts-loader to awesome-typescript-loader and write everything in a tsx file.

ReactJS file-loader not working

I can't get the file loader module to work. When running this code I get this error:
"You may need an appropriate loader to handle this file type."
I've been googling a lot on this but can't find a solution. Any ideas?
webpack.config.js:
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: "./client/index.html",
filename: "index.html",
inject: "body"
})
module.exports = {
entry: "./client/index.js",
output: {
path: path.resolve("dist"),
filename: "index_bundle.js"
},
module: {
loaders: [
{ test: /\.js$/, loader: "babel-loader", exclude: /node_modules/ },
{
test: /\.(ico|png|gif|jpg|svg)$/i,
loader: "file-loader"
}
]
},
plugins: [
HtmlWebpackPluginConfig
]
}
package.json:
{
"name": "hello-world-react",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --hot",
"build": "webpack -p"
},
"dependencies": {
"html-webpack-plugin": "^2.28.0",
"path": "^0.12.7",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"webpack": "^2.5.0",
"webpack-dev-server": "^2.4.5"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"file-loader": "^0.11.1"
}
}
App.jsx:
import React from "react";
export default class App extends React.Component {
render() {
return (
<div style={{ textAlign: "center" }}>
<h1>Hello World</h1>
<img src={require("./client/dog1.jpg")}/>
</div>
)
}
}
You have a .jsx source file but you're telling Webpack to only use babel-loader for files ending in.js. Fix the test in your Webpack config:
{ test: /\.jsx?$/, loader: "babel-loader", exclude: /node_modules/ },

Webpack - Uncaught SyntaxError: Unexpected token import with Redux

I have been trying out React with Webpack and Redux and stumbled upon an
Uncaught SyntaxError: Unexpected token import.
I know that there is a lot of questions like these, but I have find none that involves Redux.
Here is my webpack config:
var app_root = 'src'; // the app root folder: src, src_users, etc
var path = require('path');
var CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
app_root: app_root, // the app root folder, needed by the other webpack
configs
entry: [
// http://gaearon.github.io/react-hot-loader/getstarted/
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'babel-polyfill',
__dirname + '/' + app_root + '/index.js',
],
output: {
path: __dirname + '/public/js',
publicPath: 'js/',
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/,
},
{
// https://github.com/jtangelder/sass-loader
test: /\.scss$/,
loaders: ['style', 'css', 'sass'],
},
{
test: /\.css$/,
loaders: ['style', 'css'],
}
],
},
devServer: {
contentBase: __dirname + '/public',
},
plugins: [
new CleanWebpackPlugin(['css/main.css', 'js/bundle.js'], {
root: __dirname + '/public',
verbose: true,
dry: false, // true for simulation
}),
],
};
index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore} from 'redux';
// importera App komponenten
import App from './components/App';
// importera stylesheet
import './stylesheets/main.scss';
//importera reducer
import { reducers } from './reducers/index';
import Provider from "react-redux/src/components/Provider";
// skapa users-list, tomt objekt
let users = [];
for (let i = 1; i < 10; i++) {
// fyller objektet med användare med dessa villkor
users.push({
id: i,
username: 'Andreas' + i,
job: 'leethacker' + i,
});
const initialState = {
users: users,
}
}
// skapa Store
const store = createStore(reducers, initialState);
// skriver sedan ut denna komponent, render är Reacts funktion för att
skriva ut
ReactDOM.render(
<Provider store ={store}>
<App/>
</Provider> , document.getElementById('App'));
Package.json file:
{
"name": "redux-minimal",
"version": "1.0.0",
"description": "Start building complex react-redux apps today, with
this minimalist easy to understand starter kit (boilerplate)",
"keywords": [
"react",
"redux",
"minimal",
"starter kit",
"boilerplate"
],
"main": "index.js",
"homepage": "http://redux-minimal.js.org/",
"repository": {
"type": "git",
"url": "https://github.com/catalin-luntraru/redux-minimal"
},
"scripts": {
"start": "webpack-dev-server --inline --hot --history-api-fallback --
host localhost --port 8080",
"build-dev": "webpack --config webpack.dev.config.js",
"build-prod": "webpack -p --config webpack.prod.config.js",
"test": "mocha --recursive --compilers js:babel-register --require
babel-polyfill --require ignore-styles",
"test-watch": "npm test -- --watch"
},
"babel": {
"presets": [
"es2015",
"react",
"stage-3"
]
},
"author": "Catalin Luntraru",
"license": "MIT",
"dependencies": {
"react": "^15.4.2",
"react-bootstrap": "^0.30.7",
"react-dom": "^15.4.2",
"react-redux": "^5.0.2",
"react-router": "^3.0.1",
"react-router-bootstrap": "^0.23.1",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0",
"redux-form": "^6.4.3",
"redux-saga": "^0.14.3"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-polyfill": "^6.20.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-3": "^6.17.0",
"babel-runtime": "^6.20.0",
"clean-webpack-plugin": "^0.1.15",
"css-loader": "^0.26.1",
"enzyme": "^2.7.0",
"extract-text-webpack-plugin": "^1.0.1",
"ignore-styles": "^5.0.1",
"mocha": "^3.2.0",
"node-sass": "^4.3.0",
"react-addons-test-utils": "^15.4.2",
"react-hot-loader": "^1.3.1",
"redux-freeze": "^0.1.5",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2",
"whatwg-fetch": "^2.0.1"
}
}
The error line that I see is indicative of a error that is not being transpiled correct by babel.
See this please,
"unexpected token import" in Nodejs5 and babel?
Also, please add the index.js entry file, package.json to be more informative.
Hope this helps!
The error is in webpack.config.js ,as the babel loader is not included properly in config file.change your code as :
module: {
loaders: [
{ test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015']
}
},

Webpack error interpreting React modules/files

Currently I have two files in my webpack script build, script.js and contact-menu.js. If I create react components on the main script.js file, it translates ok. If create React components in contact-menu.js and try export import it gives the following error:
> ERROR in ./babel/contact-menu.js Module parse failed:
> /Applications/MAMP/htdocs/mcdonalds excavation/themes/mcdonalds/babel/contact-menu.js
> Unexpected token (7:3) You may need an appropriate loader to handle
> this file type. | render(){ | return( | <div
> id="contact-menu-container"> | <div id="contact-menu-btn"> |
> Close # ./babel/script.js 11:19-47
I have tried renaming the files from js to jsx, aswell as changing the entry point on my webpack config
webpack config
var path = require('path');
var debug = process.env.NODE_ENV !== 'production';
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? 'inline-sourcemap' : null,
entry: './babel/script.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'script.js'
},
module: {
loaders: [{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
include: [path.resolve(__dirname, 'babel/script.js')],
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-3'],
plugins: ['transform-react-jsx']
}
}, {
test: /\.scss$/,
include: [path.resolve(__dirname, 'sass')],
loaders: ['style-loader', 'css-loader', 'sass-loader']
}, {
test: /\.(jpe?g|png|gif|svg)$/i,
loader: "file-loader"
}]
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: false,
sourcemap: false
}),
],
};
package.json
{
"name": "react-kit",
"version": "3.0.0",
"description": "React Build Kit With Webpack.",
"main": "webpack.config.js",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"axios": "^0.15.3",
"babel-cli": "^6.18.0",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-react-jsx": "^6.8.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-3": "^6.5.0",
"css-loader": "^0.26.1",
"fetch-jsonp": "^1.0.6",
"history": "^1.17.0",
"node-sass": "^4.5.0",
"react-router": "^3.0.1",
"sass-loader": "^5.0.1",
"style-loader": "^0.13.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^1.14.1"
},
"author": "",
"license": "MIT"
}
script.jsx
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
<ContactMenu />,
document.getElementById('contact-menu')
)
contact-menu.jsx
import React from 'react'
import ReactDOM from 'react-dom'
export default class ContactMenu extends React.Component{
render(){
return(
<div id="contact-menu-container">
<div id="contact-menu-btn">
Close
</div>
<div id="contact-menu">
</div>
</div>
)
}
}
I believe this line in your webpack configuration is the problem:
include: [path.resolve(__dirname, 'babel/script.js')],
The webpack documentation is fairly sparse, but it appears that if include is specified only the paths in it will be transformed by the loader. If you omit that option, all paths that pass test and aren't listed in exclude should be transformed by the loader, including contact-menu.js.

Resources