Webpack with tv4 depedency

[jolevesq]

Problem

I am not able to run my project with Webpack. I always have this error

Uncaught ReferenceError: tv4 is not defined

I saw you solve the problem from a PR submit by jsomsanith (merged on May 15) but I am not able to find the modification inside development branch. You solved it for json-schema-form-core. Is it solved for angular-schema-form as well?

Thanks

Related issues

This is/maybe related to ...

json-schema-form/json-schema-form-core#4
json-schema-form/json-schema-form-core#5

@json-schema-form/angular-schema-form-lead

[Anthropic]

@jolevesq unfortunately it caused more issues than it fixed to embed tv4 in ASF, so I am looking for a better solution, if you include the tv4 lib before ASF or add as an external it should be ok. I'm going to try to remove tv4 as soon as I can, it is causing a real problem for me at the moment.

[jolevesq]

@Anthropic thanks for your answer and your good work. In the mean time I found a way to inject tv4 and ASF to my html instead of building the project with them and it works.

[Anthropic]

Great, I'm glad, I know the project is in flux and can be tricky at times, I am trying to get it to a more stable point, but there's never enough time in a day!

[mark007]

@jolevesq can you share how you got tv4 to work along with asf. I'm trying to move a project to use webpack instead of bower, and am struggling to get asf-bootstrap to work. This is the latest error I'm also seeing about tv4, even though I am importing it via

import tv4 from 'tv4';

[jolevesq]

@mark007 fom my webpack.commo.js file I use this to copy those files from the node_modules to a folder where my html page will be.

new CopyWebpackPlugin([
                { from: 'node_modules/tv4/tv4.js', to: 'form'},
                { from: 'node_modules/angular-schema-form-bootstrap/dist/angular-schema-form-bootstrap-bundled.min.js', to: 'form'}
            ]),

new HtmlWebpackIncludeAssetsPlugin({
                assets: ['form/tv4.js'],
                append: false
            }),

And inside my html template I use this to add the file as script tag

<% for (var index in htmlWebpackPlugin.files.js) { %>
            <% if (webpackConfig.output.crossOriginLoading) { %>
                <script src="<%= htmlWebpackPlugin.files.js[index] %>" integrity="<%= htmlWebpackPlugin.files.jsIntegrity[index] %>" crossorigin="<%= webpackConfig.output.crossOriginLoading %>"></script>
            <% } else { %>
                <script src="<%= htmlWebpackPlugin.files.js[index] %>"></script>
            <% } %>
        <% } %>

[mark007]

Ah great thanks @jolevesq

[mnzaki]

You can use expose-loader and just load tv4 before angular-schema-form

import 'expose-loader?tv4!tv4';
import 'angular-schema-form';