enquire is undefined

[asecondwill]

I'm having some trouble with this. I've included it using import via gulp / webpack. the enquire.js code gets included in my main.bundle.js file above the code that references it.

Then, when I try to use it,
enquire.default.register("screen and (max-width:560px)", {

I get error

enquire is undefined

What have I done wrong?

[oliviam20]

I am also having this issue, "enquire is not defined".

My code is similar to the example codes:

enquire.register("screen and (max-width: 769)", {
        match: function() {
          // code
        },
        unmatch: function() {
          // code
        }
    })

note: I am trying to use enquire in React

[bsvTag]

The same thing here. I've tried to import as follows:

import {enquire} from "/node_modules/enquire.js/dist/enquire.js"

[fogpuddle]

Did anybody find any solution to this issue?

[thomasdarde]

Not ideal but you can use provide plugin:

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  enquire: 'enquire.js/src/index.js',

}));

module.exports = environment

[WickyNilliams]

For reasons I can't quite recall, the main field of package.json is set to ./src rather than the ./dist/enquire.js. So currently, you should be able to import enquire like this:

import enquire from "enquire.js/dist/enquire";

Here's a working example: https://codesandbox.io/s/naughty-bash-9q0og. To test you'll need to open this and resize your window: https://9q0og.csb.app/

[WickyNilliams]

Actually, I take that back, I can import enquire.js directly, as seen here: https://codesandbox.io/s/adoring-cloud-rfncs

import enquire from "enquire.js";