Question 53452 in Javascript Question posted in
A very good W3school tutorial can be found here.

How can I import an object from a webpack bundle? – Javascript

I’m trying to create a node package to make form validation much easier for front-end developers.
All the logic behind the form validation is on this validate.ts file.
I also worked to fully integrate these validation methods with some data types (Number, String, and Arrays) and HTMLInputElements, you can check that on the validateIntegration.ts file.

As you can see I’m exporting an instance of the FormValidation class on the validate.ts (L312) file, and I’m importing it on the validateIntegration.ts (L1) file, at the end using webpack I create a single bundle js file with both the form validation class and the integration with the data types and the input elements.

The problem Is that I’m unable to import the fvalidation instance exported in the validate.ts (L312) file from the resulting fvalidation.js bundle

When I import the file in the following way:

import '../fvalidation.js'

The integration of the form validation works perfectly fine, you can check that in the tests/validation.mjs file.

But, when I try to import the instance of the form validation class to use its additional methods or to change some validation properties I get the following error:

Uncaught SyntaxError: ambiguous indirect export: fvalidation

You can check that in the tests/validate.mjs file.

It’s important to note that I’ve already added the library and the libraryTarget in the webpack.config.js file

NOTE: Btw I would love to receive feedback about the code, if you think there’s something that I should improve or if you have any ideas that you would like to share, feel free to open an issue.

EDIT

I keep getting suggestions from an article that treats how to import an AMD module into ES6, but the thing is that because what I’m trying to build is a node package that will be installed and imported I don’t want any programmer to write any additional code to import the fvalidation instance; so I shouldn’t make any changes on the import side if that makes sense, there’s something that I should change on my code that will allow the programmer to simply write:

import { fvalidation } from '../fvalidation.js'

and be able to use all the validation methods from that instance without any additional configuration, but I don’t know what I need to change since on the ts files I’m already using ES modules, and also on my tsconfig file I have the target set to ES6

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Even though I was exporting the instance using ES modules on the typescript files after webpack creates the bundle the exports were changed to the CJS syntax, to prevent this I changed my webpack configuration file as shown:

    const path = require('path')

module.exports = {
  mode: 'production',
  entry: './src/validateIntegration.ts',
  module: {
    rules: [
      {
        test: /.ts$/,
        use: 'ts-loader',
        include: [path.resolve(__dirname, 'src')],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  experiments: {
    outputModule: true
  },
  output: {
    publicPath: './',
    filename: 'fvalidation.js',
    path: path.resolve(__dirname, './'),
    library: {
      type: 'module'
    }
  }
}

  2. 0

    You can import a variable from webpack using the plugins – Define Plugin

    webpack.config.js

    const myvariable = {whatever: true}

const config = {
...,
  plugins: [
    new webpack.DefinePlugin({
      'myvariable': JSON.stringify({hello: 'world'})
   })

    myfile.js

    console.log('myvariable = ', myvariable);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search