Webpack loader for Vue.js v2 components with JSX render functions

Related tags

webpack vue jsx loader hot
Overview

vue-jsx-hot-loader

Greenkeeper badge TravisCI Build status

Works with:

Vue 2 Webpack

This loader will enable Hot Module Replacement for Webpack when using Vue's JSX render functions.

Installation

npm install vue-jsx-hot-loader

Usage

// path/to/component.jsx
export default {
    render(h) {
        return (
            <div>
                <p>Hello</p>
            </div>
        );
    },
};
// webpack.config.js
export default {
    // ...
    module: {
        loaders: [
            // Enable HMR for JSX.
            {
                test: /\.jsx$/,
                use: [
                    'babel-loader',
                    'vue-jsx-hot-loader',
                ],
            },
            // Remember to use babel on the rest of the JS files.
            {
                test: /\.js$/,
                use: 'babel-loader',
            },
        ],
    },
};

Gotchas

  • It only works for the default exported module (which should normally be the component itself).

Development

Playground

npm run playground

Release

npx np
Issues
  • Error when serializing prop types on component

    Error when serializing prop types on component

    The serializing occurring in api.sj fails when you've declared props with a type of Object or Array, or any native function basically..

    Uncaught TypeError: Serializing native function: Number

    opened by nddery 8
  • Cannot convert a Symbol value to a string

    Cannot convert a Symbol value to a string

    Thanks for the loader, it works nicely!

    However, there is an error occurs when the loader used:

    h4ciT3U

    Hot Reloading works as intended, but that error will simply reoccur with each file save.

    Error is happening here, in Vue script:

    2019-05-26_21-19-02

    Seems like Vue does not like some loader changes, however it can't log an error about it properly since key in that case results to be Symbol...

    opened by ArmorDarks 6
  • api.rerender() doesn't work when using components with slots

    api.rerender() doesn't work when using components with slots

    Error

    Vue Hot Reload API doesn't work as expected when using api.rerender() on a component that uses slots.

    export default {
      render() {
        return (
          <button>
            {/* Try adding and then removing the TEST text. It won't be removed, just added as many times as you save. */}
            {this.$slots.default} TEST 
          </button>
        );
      },
    };
    

    How to reproduce

    npm run test:webpack will start a development server. Go to tests\webpack\src\nativeModules\button.jsx, add / remove the TEST text and save.

    Workaround

    Wrap your slots inside another node (like a span):

    export default {
      render() {
        return (
          <button>
            <span>
              {this.$slots.default}
            </span>
            {/* You're safe editing this */
            TEST
          </button>
        );
      },
    };
    

    Notes

    api.reload() works as expected (the whole component gets rerendered).

    bug 
    opened by skyrpex 4
  • Wrap item.toString() call in a helper function

    Wrap item.toString() call in a helper function

    When transformUnserializableProps encounters an object, that doesn't have Object in the prototype hierarchy, it tries to call .toString and crashes. This PR makes it call Object.prototype.toString instead.

    opened by ikorolev93 3
  • Add support for untransformed ES modules

    Add support for untransformed ES modules

    Fixes #6 - untranspilled ES modules do not expose an exports property, but the module is directly on the module.

    opened by nddery 3
  • Usage of lodash `isNative()` prevents usage of `babel-polyfill`

    Usage of lodash `isNative()` prevents usage of `babel-polyfill`

    Lodash isNative() (and the entire library in v5.0) triggers an error when the host project uses core-js.

    This is somewhat unexpected and breaks application using babel-preset-env with babel-polyfill.

    I'm not sure what the solution is, adding a note in the README or not using lodash entirely..

    opened by nddery 2
  • How to use with `@vue/cli` 3.x?

    How to use with `@vue/cli` 3.x?

    vue.config.js

    module.exports = {
      chainWebpack: (config) => {
        if (process.env.NODE_ENV !== 'production') {
          config.module
            .rule('js')
            .test(/\.jsx$/)
            .use('vue-jsx-hot-loader')
            .before('babel-loader')
            .loader('vue-jsx-hot-loader');
        }
    };
    
    $ vue-cli-service inspect
    
    /* config.module.rule('js') */
    {
      test: /\.jsx$/,
      exclude: [
        function() {
          /* omitted long function */
        },
      ],
      use: [
        /* config.module.rule('js').use('cache-loader') */
        {
          loader: 'cache-loader',
          options: {
            cacheDirectory: 'node_modules/.cache/babel-loader',
            cacheIdentifier: '471c6bfd',
          },
        },
        /* config.module.rule('js').use('vue-jsx-hot-loader') */
        {
          loader: 'vue-jsx-hot-loader',
        },
        /* config.module.rule('js').use('babel-loader') */
        {
          loader: 'babel-loader',
        },
      ],
    };
    

    I still reload the entire page after I configure

    opened by u3u 2
  • Usage with TypeScript

    Usage with TypeScript

    Hello,

    Thank you so much for your work on this. 👊 👊 👊 Only after migrating to class components I found out hot reloading was broken, this is such a lifesaver.

    Just a heads up that this loader works with typescript too.

    {
            test: /\.tsx$/,
            use: [
              { loader: "babel-loader" },
              { loader: 'vue-jsx-hot-loader'},
              {  loader: "ts-loader",  },
            ],
    }
    
    opened by chmln 2
  • "reload" is never called

    When I’m changing data other than render method, HMR registers change, but nothing is applied to changed module. It seems like Hot API reload method should be called but it isn’t. Changing only render method successfully runs rerender method. Is this something related to serializing JS object?

    opened by niksy 2
  • Support webpack5

    Support webpack5

    eval('this') in Webpack5 is window use __webpack_exports__ to replace it it can work in Webpack4

    opened by gityoog 0
Webpack loader for Vue.js v2 components with JSX render functions

vue-jsx-hot-loader Works with: This loader will enable Hot Module Replacement for Webpack when using Vue's JSX render functions. Installation npm inst

Cristian Pallarés 39 Jul 12, 2021
🔨 webpack loader that lets you use SVG files as Vue components

vue-svg-loader webpack loader that lets you use SVG files as Vue components Documentation - FAQ Installation npm i -D [email protected] yarn add --

Damian Stasik 563 Oct 12, 2021
load .vue files from your html/js

⚠️ Vue3 support: https://github.com/FranckFreiburger/vue3-sfc-loader ⚠️ http-vue-loader Load .vue files directly from your html/js. No node.js environ

Franck Freiburger 1.3k Oct 15, 2021
📦Using a match function to automatic import your own Vue project's components

vue-automatic-import-loader Using a match function to automatic import your own project's components This repo copy from vuetify-loader and remove the

Hunter Liu 24 Aug 17, 2021
Vite 2.x plugin to load SVG files as Vue components

Vite SVG loader Vite 2.x plugin to load SVG files as Vue components. <template> <MyIcon /> </template> <script setup> import MyIcon from './my-icon

Jan-Paul Kleemans 79 Oct 16, 2021
A VueJS component template with webpack

vue-webpack-simple-boilerplate A simple Webpack setup for vue-loader for quick prototyping. Usage This is a project template for vue-cli. $ npm instal

Boudy de Geer 4 Mar 16, 2017
⚡A zero-config bundler for JavaScript applications.

Poi is a bundler built on the top of webpack, trying to make developing and bundling apps with webpack as easy as possible. The Poi project is support

Kevin Hazy 5.3k Oct 8, 2021
Browserify transform for single-file Vue components

THIS REPOSITORY IS DEPRECATED Note: We are concentrating our efforts on supporting webpack and rollup. vueify Browserify transform for Vue.js componen

vuejs 1.2k Oct 14, 2021
Standardized, designer-friendly script behavior for your Single Page App

VueScript2 - Simple, Familiar Asynchronous Script Loading VueScript2 brings back the <script> tag to your SPA (Single Page App)! This tiny library sho

Greg Slepak 166 Oct 5, 2021
☘️ A package that dynamically registers your components and vuex modules

Vue Registrar A dynamic component registrar and Vuex module assembler A Vue.js package that makes your code a lot cleaner and much more understandable

Evryn.dev 18 Apr 14, 2021
Adds support to Brunch for pre-compiling single file Vue components.

Vue Brunch Adds support to Brunch for pre-compiling single file Vue components. Installation For 2.x support, use the master branch... npm install vue

Nathaniel Blackburn 78 May 29, 2021