I
I
igortelmenko2017-09-28 22:07:54
JavaScript
igortelmenko, 2017-09-28 22:07:54

How to import js file with laravel-mix without using relative paths?

Welcome all!
Now Laravel uses webpack to build js (like css). Laravel does not use webpack directly, but through laravel-mix. On the one hand, this helps, and on the other hand, it imposes its own limitations and difficulties.
I connect another inside one js file using import:

import Vuetable from 'vuetable-2/src/components/Vuetable' // Путь относительно node_modules
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
import CssConfig from '../../VuetableCssConfig' // Путь относительно текущего файла

As long as we connect what lies in node_modules (as in the first two lines), everything is fine. But as soon as you need to connect your file, you have to resort to specifying the path relative to the current one (as in the third line). What is not very, I think, is beautiful and convenient if the file is used by several other files.
I would like to be able to specify the path relative to the resources/accets/js folder for my files :
import CssConfig from 'components/VuetableCssConfig'

But, if you do this, then when we run npm run watch (well, or dev, production - it doesn’t matter), the collector does not see the included file. I think it's because it's looking in node_modules.
Read ES6 Import Statement Without Relative Paths Using and Laravel 5.5: Custom Webpack Configuration .
Tried specifying in webpack.min.js:
...
let path = require('path');

mix.webpackConfig({
    resolve: {
        modules: [
            path.resolve('./resources/assets/js'),
            path.resolve('./node_modules')
        ]
    }
});

and various other variations (including with __dirname, as in the second article). But the result is the same. The build file is not found.
Error text, just in case:

This dependency was not found:
* components/VuetableCssConfig in ./~/babel-loader/lib?{"cacheDirectory":true,"presets":}!. /~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/earnings/EarningsTable.vue
To install it, you can run: npm install --save components/VuetableCssConfig

Can someone tell me how to make webpack search not only in node_modules, but also in other necessary folders. Well, or another way that will avoid specifying the path relative to the current js file.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
Danakt Frost, 2017-09-28
@igortelmenko

So maybe just use aliases for the right directories?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question