Unable to run with webpack/ES6/babel/?

[asmaps]

when I try to use vue-formular with webpack I get warnings in the npm run console and the browser (chrome) also just displays a white page and an error in the console

npm run dev

WARNING in ./~/vue-formular/lib/helpers/render-template.js
Critical dependencies:
2:0-7 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/vue-formular/lib/helpers/render-template.js 2:0-7

WARNING in ./~/vue-formular/lib/helpers/render-template.js
Critical dependencies:
8:16-28 the request of a dependency is an expression
 @ ./~/vue-formular/lib/helpers/render-template.js 8:16-28

WARNING in ./~/vue-formular/lib/components/methods/validate.js
Critical dependencies:
1:16-23 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/vue-formular/lib/components/methods/validate.js 1:16-23

Chrome

render-template.js?7dd7:2          Uncaught SyntaxError: Unexpected token !

Steps to reproduce

# use default webpack template by vue-cli
vue init webpack testformular

# install stuff
cd testformular
npm install

# install vue-formular
npm i -D vue-formular

# edit src/main.js to enable vue-formular (see below)

# run dev server
npm run dev

Edit src/main.js and add this:

import VueFormular from 'vue-formular'

Vue.use(VueFormular)

Can you give me a hint how to fix this?

[matfish2]

From the docs:

Compilation requires browserify with the stringify and require-globify transforms.

In order to dynamically generate the templates I have used browserify with the require-globify transform which allows for requiring an entire folder. I don't know if you can find a parallel loader for webpack because the require statement accepts parameters unique to this transform. I suppose for now you can resort to using the precompiled version (under dist).

[asmaps]

Thx for the quick response. One question: why don't you include the dist version in the package from npm? would it be possible to do that?

[matfish2]

Because it doesn't belong there, and there is no benefit to including it. This is by definition an extraneous file. NPM package should contain only files used to build the package. The precompiled file belongs in the github repo.

[asmaps]

Ok, thx for the info. I'm not very experienced in building npm packages, so no idea what the does and don'ts are. I now included it manually and it seems to work.

I also searched for a "require-globify" loader for webpack, but couldn't find anything that uses the same syntax. But still nice project! Thx

[matfish2]

I have removed the require-globify dependency (using vue partials instead). Should work with webpack (+ html-loader) now.

[asmaps]

Works like a charm! Thx for fixing!