jonjonjon's avatar

Laravel Mix - expose function to be used in browser

I have a typescript file that I would like to build with mix, and then use it in another page as a javascript library. i.e:

<script type="module" src="/js/index.js">
    console.log("test");
</script>

How can I achieve this with mix?

I was able to use mix.ts('resources/index.ts', 'public/js') to create the file, but all attempts to use the functions inside the file:

i.e:

    import getInfo from '/js/index.js'


    import {getInfo} from '/js/index.js'

all result in similar errors: The requested module '/js/index.js' does not provide an export named 'default', The requested module '/js/index.js' does not provide an export named 'getInfo'

When I look in js/index.js I can actually see the methods that I want to use, so I know they were somewhat exported. But I'm not sure how I can actually use the function.

I've checked the window variable and the functions are also not there.

Thank you

0 likes
3 replies
MLCochrane's avatar

Hey @jonjonjon ,

Sounds like the issues are just in accessing the methods and not in actually including the module. How are you handling exports within that file?

jonjonjon's avatar

Thanks for the help. Here are more details:

All the files are here: https://pastebin.com/3uEiZgjd

and the compiled js file that I'm using is here: https://pastebin.com/pzQUKNrq

my webpack.mix.js is like this:

let mix = require('laravel-mix');

mix.js('resources/assets/js/index.js', 'dist/')

and my package.json is here:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.2.0",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-mix": "^4.1.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  }
}

Currently I'm running npm run dev to build the .js files

Thank you!!

Please or to participate in this conversation.