Module not found: Error: Cannot resolve module 'pace'

[Splintex]

Bug when I use it with webpack. Could you fix here https://www.npmjs.com/package/pace-progress ?

[voipme2]

+1

I'm running into this issue as well. Both import pace from 'pace-progress'; and require('pace-progress'); cause the build to fail.

[genarorg]

Have you guys find a solution for this?

[ymatuhin]

+1

[don-bluelinegrid]

+1
same for me:

Can't resolve 'pace'

[Jbarget]

+1

[Jbarget]

I managed to get around this by running npm install pace --save

ie. installing pace explicitly into the root of the node_modules folder

[andresmatasuarez]

+1

The workaround proposed by @Jbarget works for me also. But I prefer a solution from the module authors

[Jbarget]

of course, at the moment if you use my workaround you'll have 2 copies of pace installed on the project which is unnecessary (one in the root and the other nested within pace-progress. hoping it will only be temporary

[andresmatasuarez]

@Jbarget Yeah, I also hope it will be temporary. By the way, isn't there a way to make 'pace' resolve to the nested pace module? Like using Webpack's alias or something like that.

[Jbarget]

good point! im working on other functionality at the moment but will definitely revisit this

[andresmatasuarez]

@Jbarget I will also give it a look when I had a little more time

[fson]

The problem is that the AMD define in pace.js is incorrect:

define(['pace'], function() {
  return Pace;
});

(This defines a pace as a dependency, and pace on npm is an unrelated CLI progress bar package that this project doesn't depend on.)

Correct define would be this (naming the module in the define call should be avoided):

define(function() {
  return Pace;
});

[yfilali]

To get around this until it's fixed, just disable amd for pace-progress:

{ test: require.resolve("pace-progress"), loader: "imports?define=>false" }

this requires the imports loader for webpack:
npm install imports-loader --save-dev

After that, you can just import it as usual:
import Pace from 'pace-progress';

[Lewiscowles1986]

Sorry for not being involved in the discussion, but I just got this error today and it seems an easy enough fix

• update pace.coffee
• npm install && grunt
• git push

Hopefully I've not missed anything, sorry if I did, I'd love to know what so I don't make the mistake again.

Anyone using https://github.com/bigcommerce/stencil, I'll be pushing a patch to that too

[Lewiscowles1986]

bump please

[amandeepsinghvirdi]

I am still getting the issue in stencil

[Lewiscowles1986]

Stencil has updated. Hubspot AFAIK has done nothing so you'll have to manually patch hubspot pace from my repo ATM

[maffelbaffel]

How can this still not be fixed? :(
@yfilali's workaround works great thought.

[raphaelsoul]

@yfilali
this configuration is not valid for webpack 2.0. If you use 2.0, pls write full loader name like this:

{
    test: require.resolve("pace-progress"),
    loader: "imports-loader?define=>false"
 }

[htchaan]

A quick fix is to fulfil it temporarily with:

npm install --save-dev github:HubSpot/pace#v1.0.2

[bonesoul]

anyone managed to get this working in webpack 2?

my code;

require('pace-progress');

      {
        test: require.resolve("pace-progress"),
        loader: "imports-loader?define=>false"
      }

[yozman]

with webpack2 just need

resolve: {
  alias: {
    pace: 'pace-progress'
  }
}

[CoolGoose]

Unfortunately this is still an issue, but @yozman fix works in webpack 3 as well. Is there a bigger fork we can point to, or can we discuss a 'pace' organization and get a few people on board ?

[gbluv]

Pace is such an amazing library could you please fix the loading part via Import?

Thanks in advance.

-Greg

[iShawnWang]

No hero willing to save the world here !

:(

[arnoldrch]

In my symfony webpack i use:

require('imports-loader?define=>false?pace-js');

[abarke]

Incredible that this hasn't been solved yet. It's just a one liner and would resolve so much pain!

As @yfilali states just replace the following here:

define(['pace'], function() {
  return Pace;
});

with

define(function() {
  return Pace;
});

and the world is a happier place :)

[chebaby]

the @yozman solution works well for me with webpack ^3.11
but i ended using this solution :

module: {
        rules: [
        	{ 
        		test: require.resolve("pace-progress"), 
        		loader: "imports-loader?define=>false"
        	}
        ]
}

[jklimke]

thanks for publishing this as pace-js-amd-fix npm module

[robert-cronin]

thankyou @chebaby for the fix 👍 it worked for my situation (kotlin and webpack)

[broadcoder]

Thanks for all the hints, guys!
I finally fixed it for symfony webpack encore with your help:

    // fix pace js import
    .addLoader({
        use: 'imports-loader?define=>false',
        test: require.resolve('pace-js')
    })

[glen-84]

I don't see this problem with webpack 5, maybe this issue can be closed?

[barbuslex]

@glen-84 webpack encore is always on webpack 4 :S

This workaround works for me :

1. add imports-loader : yarn add -D imports-loader (not easy to guess ^^)
2. add this in webpack.config.js :

// fix pace-js import
.addLoader({
    test: require.resolve('pace-js'),
    use: [{
        loader: 'imports-loader',
        options: {
            additionalCode: 'var define = false;'
        }
    }]
})

3. run yarn build

[glen-84]

@glen-84 webpack encore is always on webpack 4 :S

symfony/webpack-encore#880