Adding splitchunks webpack optimization with maxSize < 1077900 in a freshly initialized vue project breaks unit tests.
vue cli: 3.9.0
webpack: 4.41.5
Anyone have any idea what would cause this?
Files produced in build:
File Size Gzipped
dist/js/chunk-vendors~d939e436.1b1a6c4 89.15 KiB 31.95 KiB
d.js
dist/js/app~d0ae3f07.be737b26.js 4.81 KiB 1.68 KiB
dist/css/app~d0ae3f07.0dca8a5d.css 0.33 KiB 0.23 KiB
yarn run test:unit
WEBPACK Compiling...
[=========================] 98% (after emitting)
DONE Compiled successfully in 2010ms
[=========================] 100% (completed)
WEBPACK Compiled successfully in 2010ms
MOCHA Testing...
RUNTIME EXCEPTION Exception occurred while loading your tests
TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (/Project/Path/testvuetest/dist/js/webpack:/webpack/bootstrap:19:1)
at /Project/Path/testvuetest/dist/js/webpack:/webpack/bootstrap:83:1
at Object.<anonymous> (/Project/Path/testvuetest/dist/js/main~._node_modules_#.js:87:10)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object._module2.default._extensions.<computed> [as .js] (/Project/Path/testvuetest/node_modules/mochapack/src/util/registerRequireHook.js:99:12)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (internal/modules/cjs/helpers.js:74:18)
at /Project/Path/testvuetest/node_modules/mocha/lib/mocha.js:334:36
at Array.forEach (<anonymous>)
at Mocha.loadFiles (/Project/Path/testvuetest/node_modules/mocha/lib/mocha.js:331:14)
at Mocha.run (/Project/Path/testvuetest/node_modules/mocha/lib/mocha.js:809:10)
at cb (/Project/Path/testvuetest/node_modules/mochapack/src/runner/TestRunner.js:96:21)
at /Project/Path/testvuetest/node_modules/mochapack/src/webpack/compiler/registerReadyCallback.js:12:7
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Project/Path/testvuetest/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:45:1)
at AsyncSeriesHook.lazyCompileHook (/Project/Path/testvuetest/node_modules/tapable/lib/Hook.js:154:20)
at /Project/Path/testvuetest/node_modules/webpack/lib/Compiler.js:304:22
at Compiler.emitRecords (/Project/Path/testvuetest/node_modules/webpack/lib/Compiler.js:499:39)
at /Project/Path/testvuetest/node_modules/webpack/lib/Compiler.js:298:10
at /Project/Path/testvuetest/node_modules/webpack/lib/Compiler.js:485:14
at eval (eval at create (/Project/Path/testvuetest/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /Project/Path/testvuetest/node_modules/copy-webpack-plugin/dist/index.js:115:7
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Project/Path/testvuetest/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
at AsyncSeriesHook.lazyCompileHook (/Project/Path/testvuetest/node_modules/tapable/lib/Hook.js:154:20)
at /Project/Path/testvuetest/node_modules/webpack/lib/Compiler.js:482:27
at /Project/Path/testvuetest/node_modules/neo-async/async.js:2818:7
at done (/Project/Path/testvuetest/node_modules/neo-async/async.js:3522:9)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Project/Path/testvuetest/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at /Project/Path/testvuetest/node_modules/webpack/lib/Compiler.js:464:33
at MemoryFileSystem.writeFile (/Project/Path/testvuetest/node_modules/memory-fs/lib/MemoryFileSystem.js:328:9)
at writeOut (/Project/Path/testvuetest/node_modules/webpack/lib/Compiler.js:462:30)
at Immediate._onImmediate (/Project/Path/testvuetest/node_modules/memory-fs/lib/MemoryFileSystem.js:288:4)
at processImmediate (internal/timers.js:439:21)
ERROR mochapack exited with code 1.
Related
when I try to run "Sanity Start" I get the below error.
C:\Users\Jatan\Shareme\shareme_backend>sanity start
BrowserslistError: Unknown browser query `dead`
at C:/Users/Jatan/Shareme/shareme_backend/node_modules/postcss-cssnext/node_modules/browserslist/index.js:164:11
at Array.reduce (<anonymous>)
at resolve (C:/Users/Jatan/Shareme/shareme_backend/node_modules/postcss-cssnext/node_modules/browserslist/index.js:132:18)
at browserslist (C:/Users/Jatan/Shareme/shareme_backend/node_modules/postcss-cssnext/node_modules/browserslist/index.js:224:16)
at cleanBrowsersList (C:/Users/Jatan/Shareme/shareme_backend/node_modules/postcss-cssnext/node_modules/caniuse-api/dist/utils.js:56:59)
at setBrowserScope (C:/Users/Jatan/Shareme/shareme_backend/node_modules/postcss-cssnext/node_modules/caniuse-api/dist/index.js:26:43)
at Object.<anonymous> (C:/Users/Jatan/Shareme/shareme_backend/node_modules/postcss-cssnext/node_modules/caniuse-api/dist/index.js:88:1)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
I try to install reactide on Windows 10. After cloning its git repository and installing dependencies. When I run the command npm run webpack-production I get the following errors:
C:\reactide(3.0-release -> origin) (reactide#3.0.0)
λ npm run webpack-production
> reactide#3.0.0 webpack-production
> webpack --mode production
C:\reactide\node_modules\webpack-cli\bin\cli.js:281
throw err;
^
Error: Cannot find module 'vs/editor/contrib/gotoSymbol/goToCommands'
Require stack:
- C:\reactide\node_modules\monaco-editor-webpack-plugin\out\index.js
- C:\reactide\webpack.config.js
- C:\reactide\node_modules\webpack-cli\bin\utils\convert-argv.js
- C:\reactide\node_modules\webpack-cli\bin\cli.js
- C:\reactide\node_modules\webpack\bin\webpack.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.resolve (C:\reactide\node_modules\v8-compile-cache\v8-compile-cache.js:164:23)
at resolveMonacoPath (C:\reactide\node_modules\monaco-editor-webpack-plugin\out\index.js:34:28)
at C:\reactide\node_modules\monaco-editor-webpack-plugin\out\index.js:173:63
at Array.map (<anonymous>)
at createLoaderRules (C:\reactide\node_modules\monaco-editor-webpack-plugin\out\index.js:173:43)
at MonacoEditorWebpackPlugin.apply (C:\reactide\node_modules\monaco-editor-webpack-plugin\out\index.
at webpack (C:\reactide\node_modules\webpack\lib\webpack.js:51:13)
at processOptions (C:\reactide\node_modules\webpack-cli\bin\cli.js:272:16)
at C:\reactide\node_modules\webpack-cli\bin\cli.js:364:3
at Object.parse (C:\reactide\node_modules\yargs\yargs.js:576:18)
at C:\reactide\node_modules\webpack-cli\bin\cli.js:49:8
at Object.<anonymous> (C:\reactide\node_modules\webpack-cli\bin\cli.js:366:3)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (C:\reactide\node_modules\webpack\bin\webpack.js:156:2)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
at node:internal/main/run_main_module:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\reactide\\node_modules\\monaco-editor-webpack-plugin\\out\\index.js',
'C:\\reactide\\webpack.config.js',
'C:\\reactide\\node_modules\\webpack-cli\\bin\\utils\\convert-argv.js',
'C:\\reactide\\node_modules\\webpack-cli\\bin\\cli.js',
'C:\\reactide\\node_modules\\webpack\\bin\\webpack.js'
]
}
npm ERR! code 1
npm ERR! path C:\reactide
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c "webpack --mode production"
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\user\AppData\Local\npm-cache\_logs\2022-07-08T13_47_50_402Z-debug.log
I tried looking for the solution on this GitHub page and this stack overflow question but no success. I have installed all the dependencies.
The error occurs in monaco-editor-webpack-plugin used in webpack.config.js:
plugins: [
new MonacoWebpackPlugin(),
],
I found this issue in official repo with a similar error and I fixed the problem like this:
plugins: [
new MonacoWebpackPlugin({
features: ["!gotoSymbol"],
languages: ["!abap"],
}),
],
I just upgraded to RN 0.56.0 and am using jest version: 22.4.3 (updating the jest version doesn't help)
When I try to run my test suite, I get the following error in the terminal:
jest-haste-map: watch error: Error: ENOENT: no such file or directory,
open '/Users/mobilepractice/builds/0bcf5ed0/0/cx-mobile/posting-
plus/PostingPlus/node_modules/jest-haste-map/build/worker.js' at Error
(native) at Object.fs.openSync (fs.js:640:18) at Object.fs.readFileSync
(fs.js:508:33) at Module._extensions..js (module.js:578:20) at
Object.require.extensions.(anonymous function) [as .js]
(/Users/mobilepractice/builds/0bcf5ed0/0/cx-mobile/posting-
plus/PostingPlus/node_modules/babel-register/lib/node.js:152:7) at
Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at
Function.Module._load (module.js:438:3) at Module.require
(module.js:497:17) at require (internal/module.js:20:19)
and this error as well:
/Users/mobilepractice/builds/0bcf5ed0/0/cx-mobile/posting-
plus/PostingPlus/node_modules/react-native/jest/hasteImpl.js:50 ) /*:
string | void */ { ^ SyntaxError: Unexpected token ) at
Object.exports.runInThisContext (vm.js:76:16) at Module._compile
(module.js:542:28) at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at
Function.Module._load (module.js:438:3) at Module.require
(module.js:497:17) at require (internal/module.js:20:19) at Object.
<anonymous> (/Users/mobilepractice/builds/0bcf5ed0/0/cx-mobile/posting-
plus/PostingPlus/node_modules/jest-runtime/node_modules/jest-haste-
map/build/worker.js:16:19) at next (native)
I can see the worker.js file in my node_modules folder, which is why the ENOENT error is confusing.
A solution is to make sure node 8 or higher is installed. This error occurs on node 6.9.1.
I created a component library using vue-cli 3, and then pulled that into another repo to use the components. Now I am getting the error:
Uncaught Error: Module build failed: Error: Couldn't find preset "#vue/app" relative to directory "/{path_to_project}/node_modules/{vue_cli_app}"
at {path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293
at Array.map (<anonymous>)
at OptionManager.resolvePresets ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275)
at OptionManager.mergePresets ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264)
at OptionManager.mergeOptions ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249)
at OptionManager.init ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368)
at File.initOptions ({path_to_project}/node_modules/babel-core/lib/transformation/file/index.js:212)
at new File ({path_to_project}/node_modules/babel-core/lib/transformation/file/index.js:135)
at Pipeline.transform ({path_to_project}/node_modules/babel-core/lib/transformation/pipeline.js:46)
at transpile ({path_to_project}/node_modules/babel-loader/lib/index.js:50)
at Object.module.exports ({path_to_project}/node_modules/babel-loader/lib/index.js:175)
at {path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293
at Array.map (<anonymous>)
at OptionManager.resolvePresets ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275)
at OptionManager.mergePresets ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264)
at OptionManager.mergeOptions ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249)
at OptionManager.init ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368)
at File.initOptions ({path_to_project}/node_modules/babel-core/lib/transformation/file/index.js:212)
at new File ({path_to_project}/node_modules/babel-core/lib/transformation/file/index.js:135)
at Pipeline.transform ({path_to_project}/node_modules/babel-core/lib/transformation/pipeline.js:46)
at transpile ({path_to_project}/node_modules/babel-loader/lib/index.js:50)
at Object.module.exports ({path_to_project}/node_modules/babel-loader/lib/index.js:175)
at Object.__webpack_exports__.a (aggregation.bundle.js:13)
at __webpack_require__ (bootstrap ec9b411d2dc4def5406f:54)
at Object.<anonymous> (select.vue:1)
at __webpack_require__ (bootstrap ec9b411d2dc4def5406f:54)
at Object.Array.concat.path (vue-multi-select.component.js:11)
at __webpack_require__ (bootstrap ec9b411d2dc4def5406f:54)
at Object.Array.concat._extends (app-files.generated.js:86)
at __webpack_require__ (bootstrap ec9b411d2dc4def5406f:54)
at Object.Array.concat.module.exports (app.js:111)
at __webpack_require__ (bootstrap ec9b411d2dc4def5406f:54)
This is coming from the autogenerated .babelrc in the vue-cli project:
{
"presets": [
"#vue/app",
"vue"
]
}
Is there a way to change the .babelrc reference so that it can be used when imported elsewhere?
I don't believe the correct way to do this would be to reference the .babelrc from the project importing the library. My solution would be:
Transpile the library prior to exporting
Build into a dist directory
Import the built dist directory into the project which is using the library.
I believe babel can do something simple like babel -d ./dist to build the directory, you can see the documentation here
I'm new to webpack and I'm having trouble getting font-awesome to install in my React set up.
Webpack V2.2.1
React starter kit
I've run:
npm install font-awesome --save-dev
Then in my main .scss file, I'm calling:
$fa-font-path: "~font-awesome/fonts";
#import "~font-awesome/scss/font-awesome";
And in my webpack.config.js I've got:
...
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff)(\?.*)?$/,
loader: 'file-loader',
...
But on compile: yarn start I get the error:
webpack: Compiled successfully.
..\node_modules\font-awesome\fonts\fontawesome-webfont.eot:1
(function (exports, require, module, __filename, __dirname) { n�
^
SyntaxError: Invalid or unexpected token
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (..\build\webpack:\external "font-awesome\fonts\fontawesome-webfont.eot":1:1)
at __webpack_require__ (..\build\webpack:\webpack\bootstrap 4b3091487663b7b04c64:19:1)
Is this a problem with my webpack setup? A problem with the loaders? Or a problem with paths? Or a problem with the fonts themselves?
Any help would be amazing.
As wuxiandiejia said, the problem was solved here by using a relative path - Even though looking at the error output, webpack was already looking in the correct place with the ~ declaration. Strange.
So instead of:
$fa-font-path: "~font-awesome/fonts";
#import "~font-awesome/scss/font-awesome";
I've used:
$fa-font-path: "../../../node_modules/font-awesome/fonts";
#import "../../../node_modules/font-awesome/scss/font-awesome";
And all seems to work!