Webpack issues

#1

In my windows command prompt, I keep on getting the following error whenever I try to create a bundle using webpack.

C:\jack\myprojectfolderyarn run dev
yarn run v1.15.2
$ webpack --mode development ./src/static/app.js --output ./static/built/bundle.js --watch
‘webpack’ is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

My directory structure is as follows where I am running the above command :

image

What could be the reason for this error?

I checked echo %PATH%`` and sawC:\Program Files (x86)\Yarn\bin;` in the path so it doesn’t seem like path issue.

1 Like
#2

Hi,

How is webpack installed? Globally, or local to the project?

I couldn’t see a node_modules folder in your screenshot. Did you omit this on purpose?

#3

Hey James,

Thanks. When I ran yarn install first, it created the node_modules folder and after that the command yarn run dev ran fine. So, I should always have node_modules folder before running yarn run dev command, right?

Secondly, if I want to include some external libraries like jQuery that are going to be used in index.html located inside static folder, is it okay to put these libraries inside built folder?

The following is the screenshot of the contents of static folder :

image

I used the windows msi thing to install webpack on my windows 10. Not sure if it’s called local or global installation

#4

Yup. It contains the projects dependencies. Run yarn install again if you deleted it.

Never heard of that. You got a link?

#5

Yup, here they have installer :

#6

That’s the Yarn installer.

#8

Oh, sorry. Actually, I didn’t do anything with webpack then. I just cloned a repository and then ran yarn install.

#9

But that should work, no?

If not, can you let me have the repo URL and I’ll have a look.

#10

Thanks again. When I ran the yarn run dev, it’s kind of stuck at this line Entrypoint undefined = extract-text-webpack-plugin-output-filename. Is this normal? If I click ctrl + c it’s asking me Terminate batch job (Y/N)?/

yarn run v1.15.2
$ webpack --mode development ./src/static/app.js --output ./static/built/bundle.js --watch

webpack is watching the files…

Hash: 9eec317bf716d0e1fa6e
Version: webpack 4.30.0
Time: 3288ms
Built at: 04/30/2019 9:52:45 AM
    Asset      Size  Chunks             Chunk Names
bundle.js  3.44 MiB    main  [emitted]  main
style.css  14.5 KiB    main  [emitted]  main
Entrypoint main = bundle.js style.css
[./node_modules/webpack/buildin/amd-define.js] (webpack)/buildin/amd-define.js 85 bytes {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
[./src/redux/actions.js] 242 bytes {main} [built]
[./src/redux/reducers.js] 338 bytes {main} [built]
[./src/redux/storeConfig.js] 419 bytes {main} [built]
[./src/routers/AppRouter.js] 1.39 KiB {main} [built]
[./src/static/app.js] 583 bytes {main} [built]
[./src/static/colors.js] 875 bytes {main} [built]
    + 596 hidden modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/react-sortable-tree/style.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
       2 modules

It’s in my internal git server so sorry, I might not be able to share the URL :pensive:

1 Like
#11

Nope. Since webpack v4 the extract-text-webpack-plugin should not be used for CSS. You’ll need to use the mini-css-extract-plugin instead.

See here for an example webpack config:

#12

Thanks James. I landed on the same page as well. I went ahead and did install the plugin as shown below:

C:\jack\myproject>yarn add mini-css-extract-plugin --dev
yarn add v1.15.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "win32" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 6 new dependencies.
info Direct dependencies
└─ mini-css-extract-plugin@0.6.0
info All dependencies
├─ mini-css-extract-plugin@0.6.0
├─ normalize-url@2.0.1
├─ prepend-http@2.0.0
├─ query-string@5.1.1
├─ sort-keys@2.0.0
└─ strict-uri-encode@1.1.0
Done in 3.89s.

And it seems like it got installed properly. I saw the plugin entry in my package.json as well :

image

When, I ran yarn run dev, I again saw the exact same error that I posted above. Do I need to remove extract-text-webpack-plugin related dependency? If yes, how? Thanks

#13

I would imagine so.

Difficult to say without being able to recreate this on my machine. In the best case, replace one with the other in your webpack config.

#14

Hmm. So, I removed the dependency in the following manner and it got removed from the package.json file as well. I checked it.

C:\jack\myproject>yarn remove extract-text-webpack-plugin
yarn remove v1.15.2
[1/2] Removing module extract-text-webpack-plugin...
[2/2] Regenerating lockfile and installing missing dependencies...
info fsevents@1.2.9: The platform "win32" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
success Uninstalled packages.
Done in 3.65s.

I also updated the webpack.config.js with the new plug-in information as follows commenting out previous ones based on the accepted answer from this post:

const path = require('path');
const glob = require("glob");
//const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ExtractTextPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode: "development",
    entry: glob.sync('./app.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: [/node_modules/],
            options: {
                presets: ['@babel/env', '@babel/react'],
                plugins: ['transform-class-properties']
            }
        },
            /*{
                test: /\.css$/,
                use: ExtractTextPlugin.extract(
                    {
                        fallback: 'style-loader',
                        use: ['css-loader']
                    })
            },*/
            {
                test: /\.css$/,
                use: [
                       ExtractTextPlugin.loader,
                    
                        "css-loader"
                     ]   
            },
            {
                test: /\.(eot|woff|woff2|ttf|svg|gif|png)$/, loader: "file-loader"
            }
        ]
    },
   /* plugins: [
        new ExtractTextPlugin({filename: 'style.css'})
    ]*/
     plugins: [
    new ExtractTextPlugin({
      filename: 'style.css',
    }),
  ]
};

And I saw the following output:

C:\jack\myproject>yarn run dev
yarn run v1.15.2
$ webpack --mode development ./src/static/app.js --output ./static/built/bundle.js --watch

webpack is watching the files…

Hash: 33288d5482207cdaa1b5
Version: webpack 4.30.0
Time: 3713ms
Built at: 05/01/2019 2:38:41 PM
    Asset      Size  Chunks             Chunk Names
bundle.js  3.44 MiB    main  [emitted]  main
style.css  14.5 KiB    main  [emitted]  main
Entrypoint main = style.css bundle.js
[./node_modules/webpack/buildin/amd-define.js] (webpack)/buildin/amd-define.js 85 bytes {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
[./src/redux/actions.js] 242 bytes {main} [built]
[./src/redux/reducers.js] 338 bytes {main} [built]
[./src/redux/storeConfig.js] 419 bytes {main} [built]
[./src/routers/AppRouter.js] 1.39 KiB {main} [built]
[./src/static/app.js] 583 bytes {main} [built]
[./src/static/colors.js] 875 bytes {main} [built]
    + 593 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/react-sortable-tree/style.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules

My cursor is blinking below the line where it says 2 modules. Is it something you think is still in progress? It’s been more than 10 minutes and it’s like that only. I don’t see any error above unlike before.

#15

I would imagine so, but without being able to recreate your issue it’s hard (for me, at least) to say.

If you could give me instructions on how to recreate this problem on my machine, I’ll be happy to take a look.

#16

At the least it’s watching the files; try removing the --watch flag and see if it runs to completion:

yarn webpack --mode development ./src/static/app.js --output ./static/built/bundle.js
#17

Thanks. Great. It finished when I used it like you suggested:

C:\jack\myproject>yarn webpack --mode development ./src/static/app.js --output ./static/built/bundle.js
yarn run v1.15.2
$ C:\jack\myproject\node_modules\.bin\webpack --mode development ./src/static/app.js --output ./static/built/bundle.js
Hash: 33288d5482207cdaa1b5
Version: webpack 4.30.0
Time: 5615ms
Built at: 05/02/2019 7:56:18 AM
    Asset      Size  Chunks             Chunk Names
bundle.js  3.44 MiB    main  [emitted]  main
style.css  14.5 KiB    main  [emitted]  main
Entrypoint main = style.css bundle.js
[./node_modules/webpack/buildin/amd-define.js] (webpack)/buildin/amd-define.js 85 bytes {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
[./src/redux/actions.js] 242 bytes {main} [built]
[./src/redux/reducers.js] 338 bytes {main} [built]
[./src/redux/storeConfig.js] 419 bytes {main} [built]
[./src/routers/AppRouter.js] 1.39 KiB {main} [built]
[./src/static/app.js] 583 bytes {main} [built]
[./src/static/colors.js] 875 bytes {main} [built]
    + 593 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/react-sortable-tree/style.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Done in 10.16s.

So, does this mean that I should always run the way you suggested or it should work with my previous command yarn run dev as well ?

#18

Thank you, James. It worked when I removed the watch flag as suggested by @m3g4p0p. I am wondering in an ideal scenario, whether it should work with watch flag as well.

#19

With the --watch flag webpack will not terminate but keep watching your source files for changes; this is useful for development as you don’t have to rerun the command yourself each time you edit a file. Subsequent builds will also be faster as webpack can reuse existing file chunks.

For your prod build you don’t need to watch files, and you’ll want to set --mode production… since that there’s a dev script in your package.json, there’s certainly something like a prod or build script too?

#20

Ok, that makes sense. So, I should always run without watch flag to make sure the build id complete. Actually, the bundle.js was generated with the watch flag as well. It’s just that the process didn’t terminate because of watch flag I believe. Does this mean that there should be no difference between the bundle.js which gets generated using and not using watch flag?

#21

And another question I would like to ask is :

So my bundle.js is actually getting generated inside the built folder as shown in the screenshot below.

image

As can be seen, I added some external libraries like FileSaver.js, jquery-3.3.1.js and jzip.js . So, next time,
I generate bundle.js, are the references related to these new libraries going to be included in bundle.js as well OR
do I need to manually add these files every time I need them?