Laravel Mix build requires imports to have .js extensions

Question

Laravel Mix build requires imports to have .js extensions

anotherZero opened this issue 3 years ago · 2 comments

It seems that Laravel Mix (strict configurations of webpack?) require that imports have a .js extension. I was able to tweak the dist/inertiajs-tables-laravel-query-builder.es.js to use the .js extenstions for all imports from lodash-es and popperjs and I was able to build a page using this package.

I would be happy to contribute a PR if I can get a little guidance. I was thinking that I could update the js/Components/*.vue files, but I'm not sure that's the appropriate route to take.

The following is a snippet of the build failures I'm encountering when trying to build a page using this package.

ERROR in ./node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist/inertiajs-tables-laravel-query-builder.es.js 4:0-51
Module not found: Error: Can't resolve '@popperjs/core/lib/modifiers/flip' in '/var/www/jon.devng.apx.me/node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist'
Did you mean 'flip.js'?
BREAKING CHANGE: The request '@popperjs/core/lib/modifiers/flip' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist/inertiajs-tables-laravel-query-builder.es.js 5:0-32
Module not found: Error: Can't resolve 'lodash-es/uniq' in '/var/www/jon.devng.apx.me/node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist'
Did you mean 'uniq.js'?
BREAKING CHANGE: The request 'lodash-es/uniq' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist/inertiajs-tables-laravel-query-builder.es.js 6:0-32
Module not found: Error: Can't resolve 'lodash-es/find' in '/var/www/jon.devng.apx.me/node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist'
Did you mean 'find.js'?
BREAKING CHANGE: The request 'lodash-es/find' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist/inertiajs-tables-laravel-query-builder.es.js 8:0-33
Module not found: Error: Can't resolve 'lodash-es/clone' in '/var/www/jon.devng.apx.me/node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist'
Did you mean 'clone.js'?
BREAKING CHANGE: The request 'lodash-es/clone' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist/inertiajs-tables-laravel-query-builder.es.js 9:0-34
Module not found: Error: Can't resolve 'lodash-es/filter' in '/var/www/jon.devng.apx.me/node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist'
Did you mean 'filter.js'?
BREAKING CHANGE: The request 'lodash-es/filter' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist/inertiajs-tables-laravel-query-builder.es.js 10:0-35
Module not found: Error: Can't resolve 'lodash-es/findKey' in '/var/www/jon.devng.apx.me/node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist'
Did you mean 'findKey.js'?
BREAKING CHANGE: The request 'lodash-es/findKey' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist/inertiajs-tables-laravel-query-builder.es.js 11:0-34
Module not found: Error: Can't resolve 'lodash-es/forEach' in '/var/www/jon.devng.apx.me/node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist'
Did you mean 'forEach.js'?
BREAKING CHANGE: The request 'lodash-es/forEach' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist/inertiajs-tables-laravel-query-builder.es.js 12:0-35
Module not found: Error: Can't resolve 'lodash-es/isEqual' in '/var/www/jon.devng.apx.me/node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist'
Did you mean 'isEqual.js'?
BREAKING CHANGE: The request 'lodash-es/isEqual' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist/inertiajs-tables-laravel-query-builder.es.js 13:0-31
Module not found: Error: Can't resolve 'lodash-es/map' in '/var/www/jon.devng.apx.me/node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist'
Did you mean 'map.js'?
BREAKING CHANGE: The request 'lodash-es/map' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist/inertiajs-tables-laravel-query-builder.es.js 14:0-34
Module not found: Error: Can't resolve 'lodash-es/pickBy' in '/var/www/jon.devng.apx.me/node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/dist'
Did you mean 'pickBy.js'?
BREAKING CHANGE: The request 'lodash-es/pickBy' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Answer 1 · 2022-12-28T19:40:01.000Z

How did you manage to make it work? I'm having the same issue

Answer 2 · 2023-01-12T20:41:20.000Z

Hopefully there will be a better solution, but my current workaround is to update my webpack.mix.js file:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.webpackConfig({
    resolve: {
        alias: {
            '@popperjs/core/lib/popper-lite': '@popperjs/core/lib/popper-lite.js',
            '@popperjs/core/lib/modifiers/preventOverflow': '@popperjs/core/lib/modifiers/preventOverflow.js',
            '@popperjs/core/lib/modifiers/flip': '@popperjs/core/lib/modifiers/flip.js',
            'lodash-es/uniq': 'lodash-es/uniq.js',
            'lodash-es/find': 'lodash-es/find.js',
            'lodash-es/clone': 'lodash-es/clone.js',
            'lodash-es/filter': 'lodash-es/filter.js',
            'lodash-es/findKey': 'lodash-es/findKey.js',
            'lodash-es/forEach': 'lodash-es/forEach.js',
            'lodash-es/isEqual': 'lodash-es/isEqual.js',
            'lodash-es/map': 'lodash-es/map.js',
            'lodash-es/pickBy': 'lodash-es/pickBy.js',
        },
    },
})
    .js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .alias({
        '@': 'resources/js',
    });