Why my app doesn't found “html-loader” when I have install it? - javascript

Information
I have an application (reactjs) that run with docker, It use webpack but at start it crash saying that html-loader can't be resolve. I install it but when I rerun docker, It continue to say that.
Error message
Html Webpack Plugin:
Error: Child compilation failed:
Entry module not found: Error: Can't resolve 'html-loader' in '/usr/src/app/client':
Error: Can't resolve 'html-loader' in '/usr/src/app/client'
- compiler.js:153 childCompiler.runAsChild
[client]/[html-webpack-plugin]/lib/compiler.js:153:18
- Compiler.js:306 compile
[client]/[webpack]/lib/Compiler.js:306:11
- Compiler.js:631 hooks.afterCompile.callAsync.err
[client]/[webpack]/lib/Compiler.js:631:15
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[client]/[tapable]/lib/Hook.js:154:20
- Compiler.js:628 compilation.seal.err
[client]/[webpack]/lib/Compiler.js:628:31
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[client]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1329 hooks.optimizeAssets.callAsync.err
[client]/[webpack]/lib/Compilation.js:1329:35
package.json
{
"name": "client",
"version": "1.1.0",
"private": true,
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/plugin-transform-runtime": "^7.2.0",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.18.0",
"babel-loader": "^8.0.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"body-parser": "^1.18.3",
"css-loader": "^2.1.0",
"d3": "^5.5.0",
"email-validator": "^2.0.4",
"file-loader": "^3.0.1",
"history": "^4.7.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"js-file-download": "^0.4.4",
"path": "^0.12.7",
"react": "^16.4.1",
"react-autosuggest": "^9.4.0",
"react-cookie": "^3.0.4",
"react-dnd": "^5.0.0",
"react-dnd-html5-backend": "^5.0.1",
"react-dom": "^16.4.1",
"react-dropdown": "^1.6.2",
"react-phone-number-input": "^2.2.15",
"react-router-dom": "^4.3.1",
"react-scripts": "^3.0.0",
"reactstrap": "^6.3.1",
"save-svg-as-png": "^1.4.7",
"style-loader": "^0.23.1",
"text-loader": "0.0.1",
"topojson-client": "^3.0.0",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3"
},
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-transform-runtime",
"#babel/plugin-proposal-class-properties"
]
},
"scripts": {
"start": "npm run client",
"client": "webpack-dev-server --config ./webpack.config.js --mode development --host 0.0.0.0",
"build": "webpack --mode production",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"webpack-dev-server": "^3.2.1"
}
}
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(png|jpg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
},
{
// Transform our own .css files with PostCSS and CSS-modules
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
}, {
// Do not transform vendor's CSS with CSS-modules
// The point is that they remain in global scope.
// Since we require these CSS files in our JS or CSS files,
// they will be a part of our compilation either way.
// So, no need for ExtractTextPlugin here.
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.html$/,
use: ["html-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
}),
new webpack.DefinePlugin({
'process.env': {
SERVER_URL: JSON.stringify(process.env.SERVER_URL)
},
})
],
externals: ["fs"],
"output": {
filename: '[name].[hash].js'
}
};
Docker
I have in my application the server and client part, for the need, I remove the server part, so we have the Dockerfile for client in services/client/ and the docker-compose file in main project.
Dockerfile - client
# base image
FROM node:11.6.0-alpine
# set working directory
WORKDIR /usr/src/app/client
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/client/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /usr/src/app/client/package.json
RUN npm install --silent && \
npm install --silent webpack-dev-server
# start app
CMD ["npm", "start"]
docker-compose.yml - main project
version: '3.7'
services:
client:
container_name: client
build:
context: ./services/client
dockerfile: Dockerfile
volumes:
- ./services/client:/usr/src/app/client
- /usr/src/app/client/node_modules
ports:
- 8080:8080
environment:
- SERVER_URL=http://localhost:5001
depends_on:
- server
nginx:
container_name: nginx
build:
context: ./services/nginx
dockerfile: Dockerfile
restart: unless-stopped
ports:
- "80:80"
depends_on:
- client
I doesn't have found so many things, first I have think that I have forgot something, like a module but It doesn't seems to be that. I need help.
Update
Actually I'm trying to test in local but I'm facing an issue, perhaps it can help.
Error when start in local (npm start)
internal/modules/cjs/loader.js:596
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
at Function.Module._load (internal/modules/cjs/loader.js:520:25)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> ($path-to-project/services/client/node_modules/webpack-dev-server/bin/webpack-dev-server.js:77:1)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client#1.1.0 client: `webpack-dev-server --config ./webpack.config.js --mode development --host 0.0.0.0`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client#1.1.0 client script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/user/.npm/_logs/2019-04-24T14_05_19_879Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client#1.1.0 start: `npm run client`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client#1.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/user/.npm/_logs/2019-04-24T14_05_19_917Z-debug.log
Update 2
I success to start the application in local and seems to work. I have delete the node_modules/ folder and package-lock.json and I install first webpack and after all package.json.
Even if it work in local, on docker, it don't work.

Your volumes: declaration is causing this.
You make things work again if you get into this situation by running:
docker-compose stop client
docker-compose rm client
docker-compose up --build
...but note that this is exactly the set of commands you'd need to run if you didn't have the problematic volumes: declaration.
Your docker-compose.yml file tells Docker:
volumes:
# This directory contains data that needs to be injected from
# and/or persisted to the host. Hide anything that's in the
# image and use this host directory instead.
- ./services/client:/usr/src/app/client
# This directory also contains data that needs to be persisted
# across container runs. Hide anything that's in the volume or
# the previous bind mount and use data in this volume instead.
# ONLY THE FIRST TIME this container gets run, copy data from
# the image into this volume.
- /usr/src/app/client/node_modules
You should be able to create a routine Dockerfile and docker-compose.yml file to illustrate this. npm init a trivial program and run it. If you run, say, docker-compose run client sh, you will be able to see that the node_modules directory matches what's in the current build environment. If you then yarn add anything, though, even if you rebuild the image, the node_modules volume will not get updated: you've told Docker it contains persistent data, and it will only get populated if it's empty.
(The reverse corollary to this is that, if you do use docker-compose run to get a shell like this and hand-edit something in your node_modules directory, because you've asked for that directory to be persisted separately from the image, it will outlive the temporary container that this launches.)
The workflow that's generally worked for me is to use Node directly on the host for active development (and live reloading and good IDE support and ...), and to use Docker (building an image, not injecting code via volumes) for production deployments.

Related

localhost node server can't load bundle.js from webpack

I'm learning react following Isomorphic App tutorial.
Since i'm really new to react, I strictly followed the tutorial, writing every single script as described. When I launch the server with npm start, the browser on localhost:3000 doesn't render the page as expected, showing only the title without the input field and the button for adding a new todo. Opening the Dev Console, comes out that bundle.js can't get loaded and i really can't understand why.
If I point the browser to localhost:3000/home, on the other hand, it renders the input field and the button, but again bundle.js is not loaded, and the "app" doesn't work (i.e. doesn't add a new todo).
i'm new to react, webpack and node, i googled a lot but i really can't get it through, i don't know what's happening. package.json and webpack.config too have been created following the tutorial indications.
I'm banging my head against the wall since a few days, please ease my pain, i beg you :D
here's my config:
package.json:
{
"name": "isomorphic-redux",
"version": "1.0.0",
"repository": "https://github.com/bananaoomarang/isomorphic-redux",
"description": "",
"main": "index.js",
"scripts": {
"start": "NODE_PATH=$NODE_PATH:./shared node --harmony .",
"dev": "npm run start & webpack-dev-server --progress --color",
"build": "NODE_ENV=production webpack --progress --color -p --config webpack.prod.config.js"
},
"author": "Milo Mordaunt <milomord#gmail.com>",
"license": "MIT",
"dependencies": {
"axios": "^0.7.0",
"express": "^4.13.3",
"history": "^1.9.1",
"immutable": "^3.7.5",
"object-assign": "^4.0.1",
"react": "^0.14.0",
"react-dom": "^0.14.0",
"react-redux": "^4.0.0",
"react-router": "1.0.0-rc3",
"redux": "^3.0.0",
"webpack": "^1.13.2"
},
"devDependencies": {
"babel": "latest",
"babel-eslint": "^4.1.2",
"babel-loader": "^5.3.2",
"eslint": "^1.4.3",
"eslint-plugin-react": "^3.3.2",
"react-hot-loader": "^1.3.0",
"webpack": "^1.12.1",
"webpack-dev-server": "^1.11.0"
}
}
webpack.config
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://127.0.0.1:8080/',
'webpack/hot/only-dev-server',
'./client'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
resolve: {
modulesDirectories: ['node_modules', 'shared'],
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel']
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
devtool: 'inline-source-map',
devServer: {
hot: true,
proxy: {
'*': 'http://127.0.0.1:' + (process.env.PORT || 3000)
},
host: '127.0.0.1'
}
};
the project structure is the following:
client/
---index.jsx
shared/
---actions/
---components/
------...
------Home.jsx
------index.jsx
---reducers/
---routes.jsx
index.js
server.jsx
package.json
webpack.config
.babelrc
You are running two somehow different setups that don't know of each other immediately. When you do npm start you fire up the node process with your index.js file that in the end serves some html referencing a non-existing bundle.js file.
On the other hand, when you run the webpack-dev-server, all bundled content will reside only in-memory and will never be written to your disk. so the file will not be available to the server started with npm start.
But as you can see in the webpack config, it contains a section where a proxy is configured to route all unknown paths to a backend on port 3000. This is where the two setups are connected. You need to run the webpack-dev-server using npm run dev and then open localhost:8080 in your browser. This task automatically runs npm start as first command (which runs your node app) and afterwards starts the webpack-dev-server. So if you want to access your application, you must not use port 3000 but either go to 8080 which is the port of the webpack-dev-server.
The error you get is also documented in the blog post at this position: https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#4c7c
If you see a errors in the console about bundle.js not being found, Don’t Panic. This is because the client is trying to load bundle.js, but we haven’t configured Webpack’s entry point yet, so we get nothing.
And the solution can be found some lines later (https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#0eed):
Now we can start our app with npm run dev (instead of npm start) and Webpack will serve our client a bundle.js, so it can do it’s own routing from here-on-out. It still won’t look very interesting, but visiting http://localhost:8080/ should work without errors.
According to your package.json you are using the new babel 6 release. However you don't have all the required dependencies for this new release. According to babel-loader you need to install babel-preset-es2015 too:
npm install babel-loader babel-core babel-preset-es2015 --save-dev
As you are also using React, you need the react preset to be installed too. So install both:
npm install --save-dev babel-preset-es2015 babel-preset-react
Create a file in your package folder called .babelrc to keep the babel configuration and enable both presets:
.babelrc
{
"presets": ["es2015", "react"]
}
And then run the server again:
npm run dev
Then http://localhost:8090/assets/bundle.js should show the bundled module.
My diagnosis:
You cannot get the the bundle.js because your npm run dev throws some errors trying to apply the babel loader because it is not properly configured. Then, when you try to request the bundle.js file you get a 404 error because it has not been generated.
From -> https://stackoverflow.com/questions/33502987/webpack-bundle-js-not-found

Stencil e2e tests failing on server

I have a stenciljs project with unit and e2e tests that works perfectly locally but fails on server with the given error:
Failed to launch chrome! spawn
/builds/header/node_modules/puppeteer/.local-chromium/linux-588429/chrome-linux/chrome
ENOENT TROUBLESHOOTING:
https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
Error: Failed to launch chrome! spawn
/builds/header/node_modules/puppeteer/.local-chromium/linux-588429/chrome-linux/chrome
ENOENT TROUBLESHOOTING:
https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
at onClose
(/builds/header/node_modules/puppeteer/lib/Launcher.js:333:14)
at ChildProcess.helper.addEventListener.error
(/builds/header/node_modules/puppeteer/lib/Launcher.js:324:64)
at ChildProcess.emit (events.js:182:13) at
Process.ChildProcess._handle.onexit
(internal/child_process.js:238:12) at onErrorNT
(internal/child_process.js:407:16) at process._tickCallback
(internal/process/next_tick.js:63:19)
package.json:
...
"scripts": {
...
"e2e": "stencil test --e2e",
...
},
,
"dependencies": {
"#stencil/core": "^0.15.2",
"#stencil/sass": "^0.1.1",
"ionicons": "^4.4.6"
},
"devDependencies": {
"#stencil/dev-server": "0.0.18",
"#stencil/utils": "latest",
"#types/jest": "23.3.4",
"#types/node": "10.5.3",
"#types/puppeteer": "1.6.0",
"jest": "23.5.0",
"license-checker": "^24.0.1",
"mocky": "^0.1.11",
"npm-run-all": "^4.1.5",
"pixelmatch": "4.0.2",
"puppeteer": "1.7.0",
"rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-node-globals": "^1.4.0",
"workbox-build": "3.4.1"
}
The build is being run using gitlab runner, and when I searched for a solution to this I found that the newer version of puppeteer (v1.8.0) is the one having this problem so I fixed it at 1.7.0 in my package.josn but it's being updating during the execution of the tests:
stencil test --e2e
[28:43.7] Please wait while required dependencies are updated. This may
take a few moments and will only be required for the initial
run.
[28:43.7] installing dependencies: jest-cli, #types/puppeteer, jest, puppeteer
...
npm WARN deprecated kleur#2.0.2: Please upgrade to kleur#3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit https://github.com/lukeed/kleur/releases/tag/v3.0.0\ for migration path(s).
puppeteer#1.8.0 install /builds/header/node_modules/puppeteer
node install.js
Chromium downloaded to /builds/header/node_modules/puppeteer/.local-chromium/linux-588429
jest#23.6.0
jest-cli#23.6.0
puppeteer#1.8.0
#types/puppeteer#1.11.2
added 1 package, removed 17 packages, updated 23 packages and moved 23 packages in 50.353s
[29:34.7] installing dependencies finished in 51.00 s

webpack chunk.js throws an exception

I'm currently trying to get webpack working for my project. As a starting point, I'm using this repository: https://github.com/fstanis/webextensions-webpack-boilerplate
This is a great starting point, but after integrating it into my code I've run into problems. The extract-loader package needed to be updated, to work with bootstrap's css. While updating this package, I realized that basically all of the packages there are quite a few versions out of date.
So I removed package-lock.json, and reinstalled the packages from scratch. After doing this, webpack crashes.
To reproduce the problem:
clone the repo: git clone https://github.com/fstanis/webextensions-webpack-boilerplate
delete package-lock.json and package.json
add my new package.json (see below)
npm install
webpack or npm run start
Here is the updated package.json. Please note: This file should contain the exact same packages. Simply installed today, with their current versions:
{
"name": "webextensions-webpack-boilerplate",
"version": "0.1.0",
"description": "A boilerplate for creating a browser extension with webpack",
"author": "Filip Stanis <filip#stanis.me>",
"license": "0BSD",
"repository": {
"type": "git",
"url": "https://github.com/fstanis/webextensions-webpack-boilerplate.git"
},
"scripts": {
"start": "webpack --config webpack.config.js"
},
"//": "[TODO] Remove webpack-sources when this is fixed: https://github.com/webpack/webpack-sources/issues/28",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.2",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"extract-loader": "^3.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"extricate-loader": "^3.0.0",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"imports-loader": "^0.8.0",
"interpolate-loader": "^2.0.0",
"prop-loader": "^1.0.0",
"raw-loader": "^0.5.1",
"spawn-loader": "^6.0.0",
"webextension-polyfill": "^0.3.1",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"webpack-sources": "^1.3.0"
}
}
The error message that is produced by running webpack is:
npm run start
> webextensions-webpack-boilerplate#0.1.0 start /home/lhk/programming/temp/webextensions-webpack-boilerplate
> webpack --config webpack.config.js
clean-webpack-plugin: /home/lhk/programming/temp/webextensions-webpack-boilerplate/dist has been removed.
(node:29503) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
/home/lhk/programming/temp/webextensions-webpack-boilerplate/node_modules/webpack/lib/Chunk.js:827
throw new Error(
^
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
at Chunk.get (/home/lhk/programming/temp/webextensions-webpack-boilerplate/node_modules/webpack/lib/Chunk.js:827:9)
at /home/lhk/programming/temp/webextensions-webpack-boilerplate/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
at Array.forEach (<anonymous>)
at /home/lhk/programming/temp/webextensions-webpack-boilerplate/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/lhk/programming/temp/webextensions-webpack-boilerplate/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:7:1)
at AsyncSeriesHook.lazyCompileHook (/home/lhk/programming/temp/webextensions-webpack-boilerplate/node_modules/tapable/lib/Hook.js:154:20)
at Compilation.seal (/home/lhk/programming/temp/webextensions-webpack-boilerplate/node_modules/webpack/lib/Compilation.js:1215:27)
at hooks.make.callAsync.err (/home/lhk/programming/temp/webextensions-webpack-boilerplate/node_modules/webpack/lib/Compiler.js:541:17)
at _err0 (eval at create (/home/lhk/programming/temp/webextensions-webpack-boilerplate/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
at _addModuleChain (/home/lhk/programming/temp/webextensions-webpack-boilerplate/node_modules/webpack/lib/Compilation.js:1066:12)
at processModuleDependencies.err (/home/lhk/programming/temp/webextensions-webpack-boilerplate/node_modules/webpack/lib/Compilation.js:982:9)
at _combinedTickCallback (internal/process/next_tick.js:132:7)
at process._tickCallback (internal/process/next_tick.js:181:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webextensions-webpack-boilerplate#0.1.0 start: `webpack --config webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webextensions-webpack-boilerplate#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/lhk/.npm/_logs/2018-09-27T15_20_57_639Z-debug.log

Config file for webpack tutorial does not properly run Babel loader

designer here learning frontend. I know this is probably a really simple issue but I'm doing a tutorial to learn webpack and whenever I run the examples in the github repo they do not work. As I've gone through the sections and I've managed to fix some of the little syntax errors that stopped it from running but after I loaded the babel loader and stuff it isn't working and it is throwing some pretty weird errors that I can't figure out. Since I don't really have much experience with Babel and I'm just adding it to the webpack configuration to learn the ropes but if this is a Babel error, then I'm at a loss.
Here's a link to a codesandbox: https://codesandbox.io/s/jzq81jo2yv
Also here's what my package.json looks like:
{
"name": "webpack-practice",
"version": "1.0.0",
"description": "project to practice webpack",
"main": "index.js",
"scripts": {
"prebuild": "del-cli dist -f",
"build": "webpack",
"execute": "node /dist/bundle.js",
"start": "npm run build -s && npm run execute -s"
},
"author": "David Aslan French",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"del-cli": "^1.1.0",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8"
},
"dependencies": {
"lodash": "^4.17.10"
}
}
and here's what my webpack.config.js looks like:
module.exports = {
entry: './src/main.js',
output: {
path: '/dist',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
options: {
plugins: ['transform-runtime'],
presets: ['es2015']
}
}
]
}
};
I'm also using WSL, Ubuntu on Windows.
Also here is the tutorial I'm following: https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
And here's a link to the github repo:
https://github.com/joezimjs/Webpack-Introduction-Tutorial/tree/example2
Also here's the error log it was giving me:
> webpack-practice#1.0.0 start /mnt/c/Users/Owner/Work/Web/Webpack-Practice
> npm run build -s && npm run execute -s
[BABEL] Note: The code generator has deoptimised the styling of "/mnt/c/Users/Owner/Work/Web/Webpack-Practice/node_modules/lodash/lodash.js" as it exceeds the max of "500KB".
Hash: 1111e3ba66d401ede87c
Version: webpack 4.12.0
Time: 3983ms
Built at: 06/19/2018 12:50:31 PM
Asset Size Chunks Chunk Names
bundle.js 89.4 KiB 0 [emitted] main
[31] (webpack)/buildin/amd-options.js 82 bytes {0} [built]
[47] (webpack)/buildin/module.js 521 bytes {0} [built]
[99] (webpack)/buildin/global.js 770 bytes {0} [built]
[101] ./src/main.js 133 bytes {0} [built]
+ 98 hidden modules
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
/dist/bundle.js:1
(function (exports, require, module, __filename, __dirname) { !function(t){var n={};function r(e){if(n[e])return n[e].exports;var u=n[e]={i:e,l:!1,exports:{}};return t[e].call(u.exports,u,u.exports,r),u.l=!0,u.exports}r.m=t,r.c=n,r.d=function(t,n,e){r.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:e})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,n){if(1&n&&(t=r(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var e=Object.create(null);if(r.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var u in t)r.d(e,u,function(n){return t[n]}.bind(null,u));return e},r.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(n,"a",n),n},r.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},r.p="",r(r.s=101)}([function(t,n,r){"use strict"
TypeError: e is not a function
at Object.<anonymous> (/dist/bundle.js:1:19168)
at r (/dist/bundle.js:1:172)
at Object.<anonymous> (/dist/bundle.js:1:19248)
at r (/dist/bundle.js:1:172)
at Object.<anonymous> (/dist/bundle.js:1:19379)
at r (/dist/bundle.js:1:172)
at Object.<anonymous> (/dist/bundle.js:1:1816)
at r (/dist/bundle.js:1:172)
at Object.<anonymous> (/dist/bundle.js:1:3186)
at r (/dist/bundle.js:1:172)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-practice#1.0.0 start: `npm run build -s && npm run execute -s`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-practice#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/david/.npm/_logs/2018-06-19T18_50_32_168Z-debug.log
Okay I'm an idiot. I went through his repo again and I noticed that he included a statement about excludinging node modules in the webpack.config.js file. here's the proper version of the webpack file:
module.exports = {
entry: './src/main.js',
output: {
path: '/dist',
filename: 'bundle.js'
},
module: {
rules: [
{
loader: 'babel-loader',
// blacklist node_modules scripts from being processed via Babel
exclude: /node_modules/,
options: {
// prevents multiple versions of e.g. regeneratorRuntime from
// being created when using generators in multiple files
plugins: ['transform-runtime'],
// tell Babel which presets to use
presets: ['es2015']
}
}
]
}
};

I get an error when I run Reactjs project from command line: npm run it

Failed at the reactjs#1.0.0 it script 'webpack-dev-server'.
Make sure you have the latest version of node.js and npm installed.
If you do, this is most likely a problem with the reactjs package,
not with npm itself. Tell the author that this fails on your system:
webpack-dev-server You can get information on how to open an issue for this project with:npm bugs reactjs Or if that isn't available, you can get their info via: npm owner ls reactjs There is likely additional logging output above.
npm ERR! node v6.10.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! reactjs#1.0.0 it: `webpack-dev-server`
npm ERR! Exit status 1
My Webpack.config.js
var path = require("webpack");
module.exports = {
entry: "./script.js",
output: {
path: path.resolve(__dirname, + "/build"),
filename: "index.js"
},
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ["es2015", "react"]
}
}
]
}
}
package.json
{
"name": "reactjs",
"version": "1.0.0",
"description": "Starter kit for React course by Jack",
"main": "index.js",
"scripts": {
"it": "webpack-dev-server", "<----- something wrong here"
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "VladBelo",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"eslint": "^3.19.0",
"eslint-plugin-react": "^7.0.0",
"webpack": "^2.4.2"
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
}
}
Looks like webpack-dev-erver isn't installed. Please install it globally and retry.
In commandline, install Webpack Dev Server via
npm install --save webpack-dev-server

Resources