Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module build failed: TypeError: Cannot convert undefined or null to object #6

Open
jayarc opened this issue Dec 9, 2016 · 0 comments

Comments

@jayarc
Copy link

jayarc commented Dec 9, 2016

My webpack config:

module.exports = {
    watch: true,
    devtool: '#eval-source-map',

    entry: {
      client: './src-docs/main.js',
      server: './src-docs/main.js',
      //ignore: ['vue-icons']
    },
    output: {
        path: path.join(__dirname, 'docs'),
        filename: 'docs.bundle.js'
    },

    resolveLoader: {
        root: path.join(__dirname, 'node_modules'),
    },

    node: {
      fs: "empty"
    },

    module: {
      loaders: [
        {
            test: /\.vue$/,
            loader: 'vue'
        }, {
            test: /jsx?$/,
            loader: 'babel',
            exclude: /node_modules\/(?!(vue-tables-2|vue-pagination-2|vuetable-2)\/).*/,
            loaders: ['babel-loader?presets[]=es2015'],
        }, {
            test: /\.json$/,
            loader: 'json'
        }, {
            test: /\.html$/,
            loader: 'vue-html'
        }, {
            test: /\.(png|jpg|gif)$/,
            loader: 'url',
            query: {
                limit: 10000,
                name: '[name].[ext]?[hash]'
            }
        }, {
            test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
            loader: 'url-loader?importLoaders=1&limit=100000'
        }, {
            test: /draggabilly|desandro|get\-size|classie|unidragger|unipointer|eventemitter/,
            loader: 'imports?define=>false&this=>window'
        },
        { test: /\.coffee$/, loader: "coffee-loader" }
      ],
      postLoaders: [{ test: /vue-icons/, loader: "callback-loader"}],
      callbackLoader: require("vue-icons/icon-loader.js")(["mdi-arrow-drop-up","mdi-arrow-drop-down"]),
    },

    vue: {
        loaders: {
            css: ExtractTextPlugin.extract('css-loader!postcss-loader'), // extract css and stylus files to a single file
            stylus: ExtractTextPlugin.extract('css-loader!postcss-loader!stylus-loader')
        },
        postcss: [
            require('postcss-import')({
                addDependencyTo: webpack
            }),
            require('postcss-cssnext')(),
        ],

        // disable vue-loader autoprefixing.
        // this is a good idea since cssnext comes with it too, don't want to do it twice for no reason.
        autoprefixer: false,

        stylus: {
          use: [
            poststylus()
          ]
        },

        html: {
            root: path.resolve(__dirname, './static')
        }
    },

    babel: {
        presets: ['es2015', 'stage-2'],
        plugins: ["transform-runtime","transform-vue-jsx","add-module-exports"],
        comments: false
    },

    plugins: [
        new ExtractTextPlugin('docs.bundle.css')
    ],

    banner: banner
};

My Dependencies at the moment in package.json:

"dependencies": {
    "bootstrap-material-design-icons": "^2.2.0",
    "clone": "^2.0.0",
    "draggabilly": "^1.2.4",
    "fuzzysearch": "^1.0.3",
    "install": "^0.8.1",
    "lodash": "^4.16.4",
    "merge-options": "0.0.64",
    "npm": "^3.10.8",
    "quill": "^1.1.5",
    "reflex-grid": "*",
    "tether-drop": "^1.4.2",
    "tether-tooltip": "^1.2.0",
    "validatorjs": "^2.1.1",
    "vue": "^2.0.1",
    "vue-flatpickr": "*",
    "vue-router": "^2.0.0",
    "vue-tables-2": "*",
    "vue-text-mask": "^0.1.2",
    "vue2-editor": "^1.0.99",
    "vuetable-2": "^0.9.2",
    "vuex": "https://registry.npmjs.org/vuex/-/vuex-2.0.0.tgz",
    "vuex-router-sync": "^3.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.1",
    "babel-loader": "^6.0.0",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-syntax-jsx": "^6.13.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-plugin-transform-vue-jsx": "^3.1.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-runtime": "^5.8.0",
    "callback-loader": "https://registry.npmjs.org/callback-loader/-/callback-loader-0.2.4.tgz",
    "coffee-loader": "https://registry.npmjs.org/coffee-loader/-/coffee-loader-0.7.2.tgz",
    "coffee-script": "^1.12.1",
    "css-loader": "^0.23.1",
    "eslint": "^3.0.1",
    "eslint-config-airbnb-base": "^4.0.0",
    "eslint-plugin-html": "^1.4.0",
    "eslint-plugin-import": "^1.14.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.4",
    "imports-loader": "^0.6.5",
    "jasmine-core": "^2.4.1",
    "json-loader": "^0.5.4",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^0.2.3",
    "karma-jasmine": "^0.3.8",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-webpack": "^1.7.0",
    "node-sass": "*",
    "npm-shrinkwrap": "^6.0.2",
    "phantomjs": "^2.1.3",
    "phantomjs-prebuilt": "^2.1.7",
    "postcss-cssnext": "*",
    "postcss-import": "*",
    "postcss-loader": "*",
    "poststylus": "^0.2.3",
    "pug": "^2.0.0-beta6",
    "sass-loader": "*",
    "stylus": "^0.54.5",
    "stylus-loader": "^2.3.1",
    "url-loader": "^0.5.7",
    "vue-awesome": "^2.0.0",
    "vue-hot-reload-api": "*",
    "vue-html-loader": "*",
    "vue-icons": "https://registry.npmjs.org/vue-icons/-/vue-icons-2.0.0.tgz",
    "vue-loader": "^9.5.1",
    "webpack": "^1.12.14",
    "webpack-dev-server": "*"
  }

Icon.vue:

<template>
    <i
        class="ui-icon material-icons" :class="[icon]" v-text="removeText ? null : icon"
        aria-hidden="true"
    ></i>
</template>

<script>

export default {
    name: 'ui-icon',
    components: {
      "icon": require('vue-icons')
    },
    props: {
        icon: {
            type: String,
            required: true
        },
        removeText: {
            type: Boolean,
            default: false
        }
    }
};

</script>

<style lang="stylus">
@import './styles/imports';

.ui-icon {
    font-size: 24px;
    width: 1em;
    height: 1em;
    display: inline-block;
    cursor: inherit;
    vertical-align: middle;
}
</style>

I haven't tried to utilize the icons yet just trying to require/include them in my component. With an error this nondescript I feel like I'm missing something simple, syntax who knows. It's fooled me too long, any help is much appreciated. Thanks for building just the tool I've been looking for :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant