Comments (20)
Experiencing the described problem with Webpack 4.
from expose-loader.
I finally got 2 solutions that resolved my issue:
first:
//entry js file
import 'expose-loader?$!jquery';
import 'expose-loader?jQuery!jquery';
//...
second (as @JohnnyFun mentioned ):
//entry js file
import $ from 'jquery';
global.$ = global.jQuery = $;
//...
from expose-loader.
@Wapweb this approach is also working for me but I've faced with that standard way is not working (or maybe I do something wrong)
module.exports = {
test: require.resolve('jquery'),
use: [
{
loader: 'expose-loader',
query: 'jQuery',
},
{
loader: 'expose-loader',
query: '$',
},
]
}
but this one is working fine
import 'expose-loader?$!jquery';
import 'expose-loader?jQuery!jquery';
anyway standard is looking much better from my side, any suggestions how to make standard work ?
from expose-loader.
Just spent way too much time figuring this one out, but I finally was able to get jquery exposed properly.
This was always working for me:
import 'expose-loader?jQuery!expose-loader?$!jquery'
But I wanted to move that into my config like so:
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
}, {
loader: 'expose-loader',
options: '$'
}]
}
This didn't work though because I was also creating an alias to jquery to point to a minified version:
resolve: {
alias: {jquery: 'jquery/dist/jquery.min.js'}
}
The alias wasn't allowing expose-loader to find 'jquery', so I removed the alias and now import 'jquery'
works fine.
Although this leads me to a new issue (which I can live without for now)... anybody know how to get an alias working with expose-loader?
from expose-loader.
fwiw, a kind of hacky way I've worked around it in the past was to make a module that explicitly sets jquery on the window:
import Jquery from 'jquery';
window.$ = Jquery;
window.jQuery = Jquery;
export default Jquery;
Then just import/require that in your entry file and should be good.
But of course favor the way webpack says to do it. This should only be used if you just want to move on with your life and get jquery plugins to shut up and work.
from expose-loader.
i have this problem toooooo
from expose-loader.
@gingray Did you manage to find a solution to your problem, as I have the exact same issue where the import
syntax works but the loader syntax doesn't.
from expose-loader.
this is also OK
require("expose-loader?$!jquery");
require("expose-loader?jQuery!jquery");
from expose-loader.
For what I was trying to do, I abandoned the above approach and simply pulled out jQuery into its own bundle using CommonChunks:
plugins: [ new webpack.optimize.CommonsChunkPlugin('jquery', 'shared/jquery/jquery.min.js') ],
from expose-loader.
Be sure you have stable version of node installed. I had latest and it wasn't erroring or anything. Just wasn't working. Installed stable, good to go.
from expose-loader.
@JohnnyFun are you running v4.5.0?
from expose-loader.
Yep:
node -v && npm -v
v4.5.0
3.7.5
from expose-loader.
What is your version of jQuery? Still have the same error as @tysonnero.
node -v && npm -v
v4.5.0
3.7.5
from expose-loader.
Have the same issue
os: windows 10 64bit
node: v6.11.0
npm: v3.10.10
expose-loader: v0.7.3
webpack: v3.1.0
jquery: v3.2.1
from expose-loader.
@ErikSchierboom yes sorry for late response but hope it will be still helpful. Webpack is pretty tricky tool (I think for most of backend developers).
expose-loader
is working for me it seems I configure it wrong somehow but add few remarks. If you have coffescript
and create classes which expose to global context like
class @Spinner
...
to use expose-loader
it will be this way
import 'expose-loader?Spinner!../clasess/spinner.coffee';
but need to do changes in coffee class itself
class Spinner
...
module.exports = Spinner
as you can see you haven't @
near the class name and when you export class you do it this way. If you will export other way it will be an es6 module instead of your coffee class which you can't use in global context.
And one more thing sometimes you need just load current js it might be a plugin or pure js code which not support modules and all the ideas behind new js wave. For this purposes use plugin script-loader
it just execute js code. Hope it helps to you or maybe to someone.
from expose-loader.
same here :\
from expose-loader.
None of these solutions are working for me. I have created a project with create-react-app, installed expose-loader via npm, and all of these
require("expose-loader?$!jquery");
require("expose-loader?jQuery!jquery");
import 'expose-loader?$!jquery';
import 'expose-loader?jQuery!jquery';
end with the same result, compilation fails, due to this error
Unexpected '!' in 'expose-loader?$!jquery'. Do not use import syntax to configure webpack loaders
from expose-loader.
@elsheepo you might consider using webpack's provide plugin like:
new webpack.ProvidePlugin({
//provide jquery in all the ways 3rd party plugins might look for it (note that window.$/window.jQuery will not actually set it on the window, which is cool)
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery'
})
Many npm packages are smart enough to try to import/require in their dependencies and thus won't actually need them set on the window.
But if you do indeed need it set on the window, did you try my hack above, where you make a module that imports jquery and sets it on the window?
from expose-loader.
@JohnnyFun indeed, provide plugin worked like a charm 👍 thanks!
from expose-loader.
Fixed, now you can use expose-loader?expose=jQuery,$!jquery
, we move all exposes names to the expose
option to avoid this problem
from expose-loader.
Related Issues (20)
- Options missing in third-party loader HOT 34
- Cannot expose ts module since 1.0.0 HOT 4
- Issue with alias while exposing private module HOT 1
- Webpack omits exposed modules when sideEffects are enabled HOT 15
- ! vs | HOT 14
- Cant get new versions of expose-loader to work HOT 8
- Unable to expose jQuery HOT 4
- expose-loader works in Chrome but not FireFox? HOT 9
- Docs Mismatch and Absolutely no "local" Examples HOT 1
- opt out of development thrown error HOT 5
- Exposing a class converts it to an esmodule object HOT 2
- webpack and webpack --watch will get different output HOT 1
- jQuery is not being exposed HOT 5
- Doesn't work as expected when exposing @apollo/client HOT 26
- Customizing the runtime getGlobalThis HOT 2
- Support namespace import
- Exposing ES6 modules without the default property HOT 2
- Webpack sometimes skips modules loaded through expose-loader when tree shaking is enabled HOT 2
- File hashes change between OSs when using expose-loader to replace jQuery and $ HOT 2
- expose-loader not working correctly with webpack 4 HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from expose-loader.