webpack-contrib / expose-loader

Expose Loader
MIT License
546 stars 73 forks source link

Cant get new versions of expose-loader to work #129

Closed J4v4Scr1pt closed 3 years ago

J4v4Scr1pt commented 3 years ago

I really need help with figuring out why I get this error:

_ERROR in ../node_modules/moment/moment.js (../node_modules/expose-loader/dist/cjs.js?moment!../node_modules/moment/moment.js)
Module build failed (from ../node_modules/expose-loader/dist/cjs.js):
ValidationError: Invalid options object. Expose Loader has been initialized using an options object that does not match the API schema.
 - options misses the property 'exposes'. Should be:
   non-empty string | object { globalName, moduleLocalName?, override? } | [non-empty string | object { globalName, moduleLocalName?, override? }, ...] (should not have fewer than 1 item)_

I had version 0.7.5 of expose-loader and updated to version 2.0.0 and the whole project dies. I get several errors saying exactly the same but points to different files, some are my own others are libs from node_modules.

I have asked this on StackOverflow but no awnser has been posted beside my own on another issue that I solved. On that thread you can see my webpack config file if needed.

I would really appreciate some help on this. If there is any more info you need let me know and I will provide it.

alexander-akait commented 3 years ago

You have wrong configuration, please provide current loader options

J4v4Scr1pt commented 3 years ago

You have wrong configuration, please provide current loader options

Sure and thank you for helping!

I have looked at the webpack docs for help and changed from this:

                  {
                         test: require.resolve("jquery"),
                loader: "expose-loader?$!expose-loader?jQuery",
                  }

to this after updateing:

                   {
                test: require.resolve("jquery"),
                use: [{
                    loader: "expose-loader",
                    options: {
                        exposes: ["$", "jQuery"],
                    }
                }],
            },
alexander-akait commented 3 years ago

Wierd, are you sure you use latest version? Run npm ls expose-loader.

J4v4Scr1pt commented 3 years ago

Wierd, are you sure you use latest version? Run npm ls expose-loader.

Did it and it says 2.0.0:

This is the whole webpack file, with names changed to "bla":

const path = require("path");
const ESLintPlugin = require("eslint-webpack-plugin");
const webpack = require('webpack');

module.exports = {
    context: path.join(__dirname, "Bla"),
    plugins: [
        new ESLintPlugin({
            extensions: ["js", "jsx"],
            exclude: ["node_modules"]
        }),
        // new webpack.ProvidePlugin({
        //  $: 'jquery',
        //  jQuery: 'jquery',
        // }),
        // new webpack.ProvidePlugin({
        //  _: 'lodash',
        // }),
    ],
    entry: {
     bla: ["./bla"],
    bla_app: ["./bla_app"],
    bla2: ["@babel/polyfill", "./bla2"], //need @babel/polyfill for pechkin
    bla3: ["./bla3"],
    bla4: ["./bla4"],
    bla_5: ["@babel/polyfill", "./SinglePage/bla_5.js"], //need @babel/polyfill for redux/saga in IE
    bla_6: ["@babel/polyfill", "./SinglePage/bla_6.js"], //need @babel/polyfill for redux/saga in IE
    },
    output: {
        publicPath: 'auto',
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "wwwroot", "build"),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: "babel-loader",
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 100000,
                    }
                }],
                type: 'javascript/auto',
            },
            {
                // Expose jquery so that it is possible to use jquery in client that is
                // extended by plugins, for example bootstrap-select
                test: require.resolve("jquery"),
                loader: "expose-loader",
                options: {
                    exposes: ["$", "jQuery"],
                },
            },
            // Expose jquery so that it is possible to use jquery in client that is
            // extended by plugins, for example bootstrap-select
            {
                test: /jquery\..*\.js/,
                use: "imports?$=jquery,jQuery=jquery,this=>window",
            },
        ],
    },
    resolve: {
        extensions: [".js", ".jsx"],
        alias: {
        //........//
        },
    },
};
alexander-akait commented 3 years ago

I think you have expose-loader in code using inline syntax require("expose-loader?$!jquery"); (or something similar with import), try to search this in your code

J4v4Scr1pt commented 3 years ago

require("expose-loader?$!jquery")

Omg, Yee you are right!

Example: import "expose-loader?moment!moment";

should I just delete these then?

alexander-akait commented 3 years ago

Better rewrite it to import $ from "expose-loader?exposes=moment!moment";, I don't know your code, so removing it may be unsafe

J4v4Scr1pt commented 3 years ago

Better rewrite it to import $ from "expose-loader?exposes=moment!moment";, I don't know your code, so removing it may be unsafe

True, will do that, we have a large codebase and that will be the safest to do.

Thank you so much for solving this, I have been pulling my hair for hours(read days)! :)