Laravel-mix: Please test the Laravel Mix 4 Beta
Hey, everyone. I just pushed the first beta release of Laravel Mix 4. This is the big one that catches us up to webpack 4, Babel 7, and vue-loader 15. This comes with a whole host of improvements.
For the next week or so, I'd like as many people as possible to try it out. We had to rewrite a lot of code as part of this update, and even though all our tests are passing, you never know...
You can install the beta release of Mix, like so:
npm install laravel-mix@beta
Upgrade Notes
- If upgrading from Mix 2.*, and your project includes Babel plugins that are not provided by Mix out of the box, you'll need to update them. Review the Mix 3.0 release notes for more information. Don't worry, it's a quick update.
- For optimization/minification, we've switched from
uglify-jstoterser. If your project was overriding any of our default uglify config, you'll need to update it to terser (very similar API).
Gotchas
As part of our webpack update, to require() a module or Vue SFC with the CommonJS approach, you'll now need to append .default, like so:
Before
Vue.component('example-component', require('./components/ExampleComponent.vue'));
After
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Alternatively, you can/should switch to ES modules.
import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);
With this in mind, the default Laravel app resources/assets/js/app.js boilerplate code will need to be updated accordingly. One of us will take care of that once Mix 4.0 is out of beta.
Please share any issues you come across in this thread, and we'll address them as quickly as possible.
JeffreyWay
All 60 comments
Very excited for this update. After adding the default .default suffix (which worked), the vue-loader seems to be hanging on any script tags that use type="postcss" in the
Tested it out in Maizzle, and I'm seeing quotes being removed from background-image: url('...'); - but only when running Mix in production.
So given this:
mix.options({
processCssUrls: false,
postCss: [
atImport(),
tailwind('tailwind.js'),
]
})
.postCss('source/_styles/main.css', 'main.css');
... rules like these:
.my-bg {
background-image: url('https://example.com/image.jpg');
}
.my-bg-2 {
background-image: url("https://example.com/image-2.jpg");
}
... end up with the quotes removed (both ' and "):
.my-bg {
background-image: url(https://example.com/image.jpg);
}
.my-bg-2 {
background-image: url(https://example.com/image-2.jpg);
}
Is there anything that can be done in order to prevent that? I'm using Mix with postCss() to compile Tailwind for building HTML emails, and those quotes are necessary :(
Note: for testing, I only upgraded Mix to the beta, and disabled all other PostCSS plugins when testing, to make sure this isn't caused by something else in my build chain.
cossssmin
on 2 Dec 2018
ERROR Failed to compile with 5 errors 1:30:57 PM
error in ./resources/assets/scss/voyager.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
.modal-open {
^
Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"
in /home/yakoot/myneilson/resources/assets/scss/voyager.scss (line 1, column 1)
at runLoaders (/home/yakoot/myneilson/node_modules/webpack/lib/NormalModule.js:286:20)
at /home/yakoot/myneilson/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /home/yakoot/myneilson/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at context.callback (/home/yakoot/myneilson/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.render [as callback] (/home/yakoot/myneilson/node_modules/sass-loader/lib/loader.js:52:13)
at Object.done [as callback] (/home/yakoot/myneilson/node_modules/neo-async/async.js:8077:18)
at options.error (/home/yakoot/myneilson/node_modules/node-sass/lib/index.js:294:32)
my ./resources/assets/scss/voyager.scss
.modal-open {
.select2-container {
z-index: 1000!important;
width: 100%!important;
}
}
my rules
mix.webpackConfig({
module: {
rules: [
{
test: /\.scss$/,
loader: "style-loader!raw-loader!sass-loader?includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib")
}
]
}
});
Yakoot
on 3 Dec 2018
.extract(['vue', 'vuex', 'vue-router']) doesn't work, it gets stuck at 95% emitting OptimizeCssAssetsWebpackPlugin when running production and 95% emitting unnamed compat plugin when running dev/watch commands
Eldair
on 3 Dec 2018
Hey
I've just tried out 4.0.0-beta.2 on a project where I have a main app.js and a separate static.js (for server-rendered pages that I don't want bloated with a whole vue SPA).
When I chain .js() multiple times with postCSS or sass, the generated css file is incomplete - it looks like it was output half way through the bundling process.
When I downgrade to 2.1.14 it works fine.
You can see the faulty main.css file here: https://gist.github.com/CImrie/b6b9b1f95279c6fd10c86e2cbc9b0e56
My webpack.mix.js file is:
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
const webpackConfig = {
resolve: {
alias: {
'@': path.resolve(__dirname, 'resources/assets/js'),
},
},
output: {
publicPath: mix.inProduction() ? '/' : 'http://localhost:8080/',
chunkFilename: mix.inProduction() ? 'js/chunks/[name].[chunkhash].js' : 'js/chunks/[name].js',
}
};
mix.webpackConfig(webpackConfig);
mix.postCss('resources/assets/css/main.css', 'public/css').options({
postCss: [
tailwindcss('./tailwind.js'),
],
});
mix.js('resources/assets/js/app.js', 'public/js').
js('resources/assets/js/static.js', 'public/js');
CImrie
on 3 Dec 2018
Hey,
I had an issue when I have a parent sass file to import a child sass file with images. Both sass files are using images with relative path. It's working for parent file, but is not working for child file. For example.
parrent: ./resources/assets/sass/app.scss
@import "./components/a";
.app {
// it works
background-image: url('./images/app.png');
}
child: ./resources/assets/sass/components/_a.scss
.a {
// not working
background-image: url('./images/a.png');
}
Thanks for the effort to upgrade to webpack4!
Example repo: https://github.com/koshuang/laravel-mix-v4-test
Error messages:
ERROR in ./resources/assets/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './images/a.png' in '/home/user/laravel-mix-v4-test/resources/assets/sass'
at factory.create (/home/user/laravel-mix-v4-test/node_modules/webpack/lib/Compilation.js:821:10)
at factory (/home/user/laravel-mix-v4-test/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
at resolver (/home/user/laravel-mix-v4-test/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
at asyncLib.parallel (/home/user/laravel-mix-v4-test/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
at /home/user/laravel-mix-v4-test/node_modules/neo-async/async.js:2825:7
at /home/user/laravel-mix-v4-test/node_modules/neo-async/async.js:6886:13
at normalResolver.resolve (/home/user/laravel-mix-v4-test/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
at doResolve (/home/user/laravel-mix-v4-test/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
at hook.callAsync (/home/user/laravel-mix-v4-test/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
at _fn0 (eval at create (/home/user/laravel-mix-v4-test/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
at resolver.doResolve (/home/user/laravel-mix-v4-test/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
at hook.callAsync (/home/user/laravel-mix-v4-test/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
at _fn0 (eval at create (/home/user/laravel-mix-v4-test/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
at hook.callAsync (/home/user/laravel-mix-v4-test/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
at _fn0 (eval at create (/home/user/laravel-mix-v4-test/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
at resolver.doResolve (/home/user/laravel-mix-v4-test/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
at hook.callAsync (/home/user/laravel-mix-v4-test/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
at _fn43 (eval at create (/home/user/laravel-mix-v4-test/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:402:1)
at hook.callAsync (/home/user/laravel-mix-v4-test/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
at _fn0 (eval at create (/home/user/laravel-mix-v4-test/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
at resolver.doResolve (/home/user/laravel-mix-v4-test/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
at hook.callAsync (/home/user/laravel-mix-v4-test/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
at _fn1 (eval at create (/home/user/laravel-mix-v4-test/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:24:1)
at hook.callAsync (/home/user/laravel-mix-v4-test/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
at _fn0 (eval at create (/home/user/laravel-mix-v4-test/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
at fs.stat (/home/user/laravel-mix-v4-test/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:22:13)
at process.nextTick (/home/user/laravel-mix-v4-test/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15)
at process._tickCallback (internal/process/next_tick.js:61:11)
@ ./resources/assets/sass/app.scss
ERROR in ./resources/assets/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--5-4!./resources/assets/sass/app.scss)
Module not found: Error: Can't resolve './images/a.png' in '/home/user/laravel-mix-v4-test/resources/assets/sass'
@ ./resources/assets/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--5-4!./resources/assets/sass/app.scss) 7:67-92
@ ./resources/assets/sass/app.scss
koshuang
on 4 Dec 2018
looks like the "extract" function doesn't work as mentioned by @Eldair. I get stuck at:
95% emitting unnamed compat plugin
robtesch
on 4 Dec 2018
I'm getting a vue-loader error:
Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
at VueLoaderPlugin.apply (.../node_modules/laravel-mix/node_modules/vue-loader/lib/plugin.js:58:13)
at webpack (.../node_modules/webpack/lib/webpack.js:47:13)
at processOptions (.../node_modules/webpack-cli/bin/cli.js:441:16)
at yargs.parse (...node_modules/webpack-cli/bin/cli.js:536:3)
at Object.parse .../node_modules/yargs/yargs.js:567:18)
at .../node_modules/webpack-cli/bin/cli.js:219:8
at Object.<anonymous> (.../node_modules/webpack-cli/bin/cli.js:538:3)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
wirelessed
on 4 Dec 2018
95% emitting unnamed compat plugin
@robtesch do you have any symlinks involved in your project?
lkraav
on 4 Dec 2018
@lkraav none that i have put in on purpose no.
robtesch
on 4 Dec 2018
Success: I've tested on a simple library build and have successfully upgrade to laravel-mix v4 - https://github.com/niiknow/vue-datatables-net
Failed: On a little more complex project where dynamic import and chunking is used, it seem to chunk the "vendor.js" and "app.js" file instead of placing it in the correct location. It was an internal project that I am working on but I've replicated on a simple opensource project below.
Expected behavior master branch - git checkout https://github.com/niiknow/laratt-api/tree/master, npm install, npm run dev
95% emitting
DONE Compiled successfully in 1415ms 6:51:17 AM
Asset Size Chunks Chunk Names
/js/vendor.js 305 kB 0 [emitted] [big] /js/vendor
/js/myapp.js 398 bytes 1 [emitted] /js/myapp
/js/manifest.js 3.88 kB 2 [emitted] /js/manifest
/css/myapp.css 37 bytes 1 [emitted] /js/myapp
/js/vendor.js.map 382 kB 0 [emitted] /js/vendor
/js/myapp.js.map 334 bytes 1 [emitted] /js/myapp
/css/myapp.css.map 91 bytes 1 [emitted] /js/myapp
/js/manifest.js.map 3.94 kB 2 [emitted] /js/manifest
98% after emitting SizeLimitsPlugin
DONE Compiled successfully in 1270ms 6:55:09 AM
Asset Size Chunks Chunk Names
/css/myapp.css 37 bytes /js/myapp [emitted] /js/myapp
/css/myapp.css.map 91 bytes /js/myapp [emitted] /js/myapp
/js/manifest.js 6.08 KiB /js/manifest [emitted] /js/manifest
/js/manifest.js.map 6.08 KiB /js/manifest [emitted] /js/manifest
js/parts//js/myapp.js 1.19 KiB /js/myapp [emitted] /js/myapp
js/parts//js/myapp.js.map 228 bytes /js/myapp [emitted] /js/myapp
js/parts//js/vendor.js 298 KiB /js/vendor [emitted] /js/vendor
js/parts//js/vendor.js.map 372 KiB /js/vendor [emitted] /js/vendor
It output myapp.js and vendor.js into the chunk folder.
Update:
After reading a little bit more on chunking redone in webpack 4, I need to investigate this further.
More Updates:
Ok, so after learning a little more about the new code splitting in webpack 4, I'm able to fix/workaround the issue by defining the optimization section specifically for vendor.js file and not using mix.extract() - because mix.extract() (underneath) is simply using the new chunking method. The result is all static get extracted as vendor.js and dynamic/async as individual chunk/parts.
The laravel-mix4-fail branch is simply the exact copy of the laravel-mix4-succ branch, with only changes to webpack.mix.js and mix.extract() file
I'm not sure if it's a bug, but I'm documenting in case someone run into similar issue. I actually prefer optimization over using mix.extract() because I don't have the requirement of defining specific extract.
noogen
on 4 Dec 2018
I am getting the following error when I have a .babelrc file:
{
"presets": ["env"]
}
Error:
ERROR in ./resources/js/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-env' from '/data/html/platform'
- Did you mean "@babel/env"?
at Function.module.exports [as sync] (/data/html/platform/node_modules/resolve/lib/sync.js:43:15)
....
....
at Object.<anonymous> (/data/html/platform/node_modules/babel-loader/lib/index.js:51:12)
tuhin-cn
on 4 Dec 2018
@tuhin-cn Check the "Did you mean" portion of the error. This is related to the Babel 7 update. See my upgrade notes above for instructions.
JeffreyWay
on 4 Dec 2018
@JeffreyWay Thanks for your response. Seems like I don't need @babel/preset-env as it is already used by mix.
tuhin-cn
on 4 Dec 2018
@koshuang Thanks. Your issue is fixed on master.
JeffreyWay
on 4 Dec 2018
@wirelessed Do you have extra reference to Vue Loader Plugin like so? You want to remove it because it's no longer required - see my changes upgrading from v3 to v4 here: https://github.com/niiknow/laratt-api/commit/caec852825f1aabbd296d27749d0d2d153a16f77#diff-61877038a5575038809abf03f0009520L33
noogen
on 4 Dec 2018
@JeffreyWay success so far, switched four large projects from Mix v2 to the latest v4 beta.
Zero changes needed to get it all working again! Nice!
hailwood
on 4 Dec 2018
@JeffreyWay Also success so far! Just upgraded two projects, one vanilla JS with ES6 modules and the other React. Both leverage Mix for browsersync, sass compilation and vendor extraction. Just had to update the Babel package names with the new @babel namespace and all was well.
Thanks a ton for maintaining Mix. Manually configuring Webpack is probably my least favorite thing in the world!
nlenkowski
on 4 Dec 2018
@wirelessed Do you have extra reference to Vue Loader Plugin like so? You want to remove it because it's no longer required - see my changes upgrading from v3 to v4 here: niiknow/laratt-api@caec852#diff-61877038a5575038809abf03f0009520L33
No, I'm not using vue at all. I realised that for some reason, when I use mix.js('main.js') on my script, it doesn't work and this vue-loader error appears. However, if I change it to mix.react('main.js'), it suddenly works. The excerpt of 'main.js' is as follows, note that there's actually no React at all in this main.js
import Turbolinks from 'turbolinks';
Turbolinks.start();
// important for jQuery to work for other scripts!
import $ from 'jquery';
global.$ = global.jQuery = $;
global.Popper = require('popper.js').default;
import 'bootstrap';
import Pusher from 'pusher-js';
global.Pusher = Pusher;
I have the same issue as @wirelessed. Changing mix.js to mix.react didn't solve the issue for me.
Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
at VueLoaderPlugin.apply (.../node_modules/vue-loader/lib/plugin.js:58:13)
at webpack (.../node_modules/webpack/lib/webpack.js:47:13)
at processOptions (.../node_modules/webpack-cli/bin/cli.js:441:16)
at yargs.parse (.../node_modules/webpack-cli/bin/cli.js:536:3)
at Object.parse (.../node_modules/yargs/yargs.js:567:18)
at .../node_modules/webpack-cli/bin/cli.js:219:8
at Object.<anonymous> (.../node_modules/webpack-cli/bin/cli.js:538:3)
at Module._compile (module.js:653:30)
...
at require (internal/module.js:11:18)
at Object.<anonymous> (...node_modules/webpack/bin/webpack.js:155:2)
...
It looks weird to me that the _Javscript_ component is extending the _Vue_ component, instead of the other way around. Now all other Javascript-based components automatically inherit Vue-related configuration, while they possibily don't use Vue at all. The vue-loader and VueLoaderPlugin are used in all _mix.js(...)_ calls. Shouldn't these only be included when using _mix.vue(...)_ ?
When using _mix.ts(...)_ I don't have the problem of the view-loader, but I get another problem when I import graphql-js. This is because that module uses _.mjs_ files that are now supported by Webpack 4. I get the same errors as described in issue graphql/graphql-js#1272.
The default extensions of Webpack 4 (as described in https://webpack.js.org/configuration/resolve/#resolve-extensions) are ['.wasm', '.mjs', '.js', '.json'].
However, in laravel-mix they are different:
https://github.com/JeffreyWay/laravel-mix/blob/fe79ae747933f55704b8158e99453ba246338c61/src/builder/WebpackConfig.js#L110
When I change that line to have the default extensions, I can successfully import the graphql-js module. I think these should use the default as provided by Webpack 4, because this is what packages like graphql-js expect.
bartlangelaan
on 5 Dec 2018
@bartlangelaan Okay, done. https://github.com/JeffreyWay/laravel-mix/commit/c936c0de673d1dc129ac5198bb8c19c71faf3155
JeffreyWay
on 5 Dec 2018
@hellocosmin I can't reproduce that. Are you sure you don't have extra configuration in your webpack.mix.js file? In a test project with a background image path in quotes, the compiled CSS still retains the quotes.
JeffreyWay
on 5 Dec 2018
@Yakoot You shouldn't override the default webpack rules we provide for preprocessors. I'm assuming that's the issue here.
JeffreyWay
on 5 Dec 2018
Hi,
I've never used laravel nor laravel-mix nor typescript (since version 1.5), so the error might very well sit before the monitor, but I get the same vue-loader error if I want to compile typescript files with .ts('...', '...')
laravel new mix
cd mix
php artisan preset none
npm install
npm install laravel-mix@beta
mkdir resources/ts
touch resources/ts/main.ts
echo "console.log('Hello laravel mix')" >> resources/ts/main.ts
sudo npm install -g typescript
tsc --init
npm install typescript ts-loader --save-dev
then I added the following to the mix config:
mix.js('resources/js/app.js', 'public/js')
.ts('resources/ts/main.ts', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
but npm run dev results in:
Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
However if I change .ts in the mix config file to .js the compilation succeeds.
Lord-Roper
on 5 Dec 2018
@Yakoot You shouldn't override the default webpack rules we provide for preprocessors. I'm assuming that's the issue here.
how can i add includePaths to sass?
Yakoot
on 5 Dec 2018
@hellocosmin I can't reproduce that. Are you sure you don't have extra configuration in your webpack.mix.js file? In a test project with a background image path in quotes, the compiled CSS still retains the quotes.
Thanks Jeffrey. Yes, I made sure to exclude everything else from my build chain, and it still happens. Will investigate further and let you know if I find anything.
cossssmin
on 5 Dec 2018
@Yakoot As the third argument to mix.sass().
mix.sass('src', 'output', { includePaths: [] });
@Yakoot As the third argument to
mix.sass().mix.sass('src', 'output', { includePaths: [] });
thx! all other works fine! it's almost on production))
Yakoot
on 5 Dec 2018
Hi, I'm working with dynamic import and is running into this downstream issue with css and js compiled into css file extract-text-webpack-plugin
Will there be work to switch to mini-css-extract-plugin for css? ref: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/749
Thanks for all your hard work!
noogen
on 5 Dec 2018
When running in production mode I get the error:
JisonLexerError: Lexical error on line 1: Unrecognized text.
Erroneous area:
1: 100% - $sidebar-width
^.........^
at /css/light-bootstrap-dashboard.css:1705:3
When using development mode it runs without error
SudoGetBeer
on 6 Dec 2018
@SudoGetBeer your file ends in .css - are you using scss or postcss?
spaceemotion
on 6 Dec 2018
@SudoGetBeer your file ends in .css - are you using scss or postcss?
mix.sass('resources/assets/sass/light-bootstrap-dashboard.scss', 'public/css/')
.sourceMaps()
.webpackConfig({ devtool: 'source-map' })
.options({ processCssUrls: false })
.version();
That's the settings.
Nothing more. Just default install.
That's the error log:
@ prod /home/forge/OUR_PAGE/envoyer/releases/20181206105138
npm run production@ production /home/forge/OUR_PAGE/envoyer/releases/20181206105138
cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.jsJisonLexerError: Lexical error on line 1: Unrecognized text.
Erroneous area:
1: 100% - $sidebar-width
^.........^
at /css/light-bootstrap-dashboard.css:1705:3
at Object.parseError (/home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss-calc/dist/parser.js:1164:15)
at Object.lexer_parseError [as parseError] (/home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss-calc/dist/parser.js:2297:44)
at Object.lexer_next [as next] (/home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss-calc/dist/parser.js:3292:22)
at Object.lexer_fastLex [as fastLex] (/home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss-calc/dist/parser.js:3367:18)
at fastLex (/home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss-calc/dist/parser.js:1567:27)
at Parser.parse (/home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss-calc/dist/parser.js:1641:30)
at /home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss-calc/dist/lib/transform.js:30:30
at walk (/home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss-value-parser/lib/walk.js:19:7)
at ValueParser.walk (/home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss-value-parser/lib/index.js:18:3)
at transformValue (/home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss-calc/dist/lib/transform.js:24:50)
at _default (/home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss-calc/dist/lib/transform.js:59:100)
at /home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss-calc/dist/index.js:25:51
at /home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss/lib/container.js:135:18
at Rule.each (/home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss/lib/container.js:101:16)
at Rule.walk (/home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss/lib/container.js:131:17)
at /home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss/lib/container.js:148:24
at Root.each (/home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss/lib/container.js:101:16)
at Root.walk (/home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss/lib/container.js:131:17)
at /home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/postcss-calc/dist/index.js:23:9
at initializePlugin (/home/forge/OUR_PAGE/envoyer/releases/20181206105138/node_modules/cssnano/dist/index.js:35:51)
at
SudoGetBeer
on 6 Dec 2018
@noogen
Will there be work to switch to mini-css-extract-plugin for css? ref: webpack-contrib/extract-text-webpack-plugin#749
Yes, but as part of the webpack 5 update early next year. Once webpack supports CSS entry files, we'll remove extract-text-webpack-plugin entirely.
JeffreyWay
on 6 Dec 2018
@JeffreyWay Yes, but unless i'm reading it incorrectly, extract-text-webpack-plugin is no longer supporting webpack>=4, ref: Quoting maintainer (michael-ciniawsky) of extract-text-webpack-plugin https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/749#issuecomment-374549467
The webpack >= v4.0.0 'support' for extract-text-webpack-plugin was moved to mini-css-extract-plugin as more lightweight approach for webpack >= v4.0.0 and ETWP entered maintenance mode. We are sorry for the inconvenience here, but ETWP reached a point where maintaining it become too much of a burden and it's not the first time upgrading a major webpack version was complicated and cumbersome due to issues with ETWP. The mid-term plan is integrate CSS support directly into webpack to avoid this kind of issue in the future
noogen
on 6 Dec 2018
The extract-text-webpack-plugin beta 4.0 release works with webpack 4.
My understanding is that webpack 5 will be out early next year. As part of that update, we'll switch to mini-css-extract-plugin. Until then, switching breaks too much code.
JeffreyWay
on 6 Dec 2018
Ahh, ic. Looks like part of alpha release note said that it requires webpack >= v4.0.0, I guessed they changed their stance on support. Thanks.
Though, one thing that still concern me is this glaring message on the home/README of extract-text-webpack-plugin: https://github.com/webpack-contrib/extract-text-webpack-plugin#usage
:warning: Since webpack v4 the
extract-text-webpack-pluginshould not be used for css. Use mini-css-extract-plugin instead.
It may result issue in some edge cases, but since this plugin states that it for support of 80% of the cases, I guess it's ok. Also notice your commit 7 days ago "Tinker with extract text plugin", thanks again for all the hard work.
noogen
on 6 Dec 2018
So for everyone using Typescript with Vue here is a Solution for a Webpack Mix Config!
Hope it helps everyone and @Lord-Roper!
Typescript: 3.2.1
Ts-Loader: 5.3.1
Vue: 2.5.7
Laravel-Mix: 4.0.0-beta.2
mix.options({
extractVueStyles: true,
processCssUrls: false
})
mix.webpackConfig({
module: {
rules: [
{
test: /\.ts?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
{
test: /\.(png|jgp|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
],
},
resolve: {
extensions: ['.ts', '.js', '.json', '.vue'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, 'YOUR_FOLDER'),
}
}
})
mix.js('YOUR_FOLDER/app.ts', 'js/app.js')
.sass('YOUR_SASS_SCSS_FOLDER/style.scss', 'css')
.setPublicPath('public');
Subwaytime
on 6 Dec 2018
If there is still an issue with Mix and dynamic imports and chunking, someone please send me the minimum amount of code to reproduce the issue in a fresh vanilla or Laravel app. Thanks!
JeffreyWay
on 7 Dec 2018
@JeffreyWay this is still a reproducible issue with dynamic imports: https://github.com/JeffreyWay/laravel-mix/issues/1833#issuecomment-443315580
jasonlbeggs
on 7 Dec 2018
@jasonlbeggs Doh! Missed that one. Sorry, thanks! Reviewing it now.
JeffreyWay
on 7 Dec 2018
This is a tough one. It seems to work if I comment out mix.postCss(). So it seems to be related to CSS extraction and extract-text-webpack-plugin. I'm not sure if this is something I can fix on the Mix end. Still checking, but if that's the case, dynamic imports may have to wait until the release of webpack 5 early next year.
JeffreyWay
on 7 Dec 2018
Ok. Thanks for trying to fix it!
jasonlbeggs
on 7 Dec 2018
@JeffreyWay We had ripped out extract text from the PR because it is super buggy with webpack 4. The effort required to fix it is apparently non-trivial which is why it was deprecated. It generally "works" except for some weird edge cases where it breaks or doesn't produce the excepted output (not sure what the edge cases are tbh — it's been quite a while since I worked on this — sorry).
thecrypticace
on 7 Dec 2018
Yeah I understand. Both options included bugs and weird issues, unfortunately. No good choice.
As I understand it, Webpack 5 will be out early next year. We’ll switch over and retire extract-text-webpack-plugin very quickly after that.
JeffreyWay
on 7 Dec 2018
Yeah, makes sense Well, in any case I'm using it for a rather simple set up right now and it _is_ working so 🎉 for that!
thecrypticace
on 7 Dec 2018
@JeffreyWay @thecrypticace
So what now means we will not update our projects to 4?
msonowal
on 8 Dec 2018
@msonowal Does your project use dynamic imports? If not, you shouldn’t experience any issues that I’m aware of. If so, sit tight until the new year when we upgrade to webpack 5 and CSS entry points.
JeffreyWay
on 8 Dec 2018
Yes @JeffreyWay , My projects are using dynamic imports heavily as the JS is very large.
I will wait for the webpack 5 then.
And thank you again for your contributions to the community!
Hats off
msonowal
on 11 Dec 2018
@JeffreyWay very pleased to say the new release fixes the vendor extraction issue i was having, when called with no arguments. Very nice, awesome stuff. Thanks for your work!
robtesch
on 12 Dec 2018
.extract(['vue', 'vuex', 'vue-router'])doesn't work, it gets stuck at95% emitting OptimizeCssAssetsWebpackPluginwhen running production and95% emitting unnamed compat pluginwhen running dev/watch commands
Same here, do you happen to have a fix for this? Thanks in advance.
niallobrien
on 14 Dec 2018
@niallobrien Are you a Windows user? If so, Mix 4.0.7, released today, fixes some Windows-specific compile issues.
JeffreyWay
on 14 Dec 2018
@niallobrien Are you a Windows user? If so, Mix 4.0.7, released today, fixes some Windows-specific compile issues.
Yup, on Windows 7. Will check with the new version, thank you.
niallobrien
on 14 Dec 2018
@niallobrien Are you a Windows user? If so, Mix 4.0.7, released today, fixes some Windows-specific compile issues.
Confirmed that v4.0.7 fixes this issue for me. Many thanks @JeffreyWay
niallobrien
on 14 Dec 2018
When running in production mode I get the error:
JisonLexerError: Lexical error on line 1: Unrecognized text. Erroneous area: 1: 100% - $sidebar-width ^.........^ at /css/light-bootstrap-dashboard.css:1705:3When using development mode it runs without error
@SudoGetBeer Did you find a fix for this? Having the same issue.
Edit: Fixed it. I had a sass variable within a css calc function. (from calc(100% - $field-addon-width) to calc(100% - #{$field-addon-width})). I'm unsure why only now this has become an issue?
harrygulliford
on 20 Dec 2018
@harrygulliford That should never have worked https://github.com/sass/sass/issues/818 people have been complaining about that since at least 2013.
Unless node-sass did what node-sass does best and put in it's own workaround!
hailwood
on 20 Dec 2018
@hailwood @SudoGetBeer Had a look back through and turns out it had never worked, both node-sass and dart-sass silently fail. There must've been some changes around postcss-calc, which now detects this and throws an exception.
harrygulliford
on 20 Dec 2018
Related issues
Cheddam
·
3Comments
stefensuhat
·
3Comments
jpriceonline
·
3Comments
pixieaka
·
3Comments
amin101
·
3Comments
Most helpful comment
When running in production mode I get the error:
When using development mode it runs without error