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
Related
Can anyone help me solve this error I get in my console when I run a ReactJS project
Uncaught ReferenceError: process is not defined
at ./node_modules/mysql/node_modules/readable-stream/lib/_stream_writable.js (_stream_writable.js:57:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/mysql/node_modules/readable-stream/readable-browser.js (readable-browser.js:4:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/mysql/lib/protocol/sequences/Query.js (Query.js:7:1)
at options.factory (react refresh:6:1)
I have tried npm i -D react-error-overlay#6.0.9 and npm i process
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.
I've installed the third party library https://www.npmjs.com/package/scroll-into-view into my Aurelia CLI project using:
npm install --save scroll-into-view
I've added the following to the dependencies array in aurelia.json:
{
"name": "scroll-into-view",
"path": "../node_modules/scroll-into-view",
"main": "scrollIntoView"
}
I've added the following to the component I want to make use of the library:
import * as scrollIntoView from "scroll-into-view";
When I execute au run --watch I receive a long list of errors, repeating a version of the following:
Error: ENOENT: no such file or directory, open 'C:\src\choiceswizard\src\node_modules\raf.js'
at Object.fs.openSync (fs.js:558:18)
at Object.fs.readFileSync (fs.js:468:33)
at Object.exports.readFileSync (C:\src\choiceswizard\node_modules\aurelia-cli\lib\file-system.js:49:13)
at fileRead (C:\src\choiceswizard\node_modules\aurelia-cli\lib\build\bundled-source.js:83:31)
at Object.context.fileRead (C:\src\choiceswizard\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:176:18)
at Object.context.load (C:\src\choiceswizard\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:357:30)
at Module.load (eval at <anonymous> (C:\src\choiceswizard\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:1), <anonymous>:832:29)
at Module.fetch (eval at <anonymous> (C:\src\choiceswizard\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:1), <anonymous>:822:66)
at Module.check (eval at <anonymous> (C:\src\choiceswizard\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:1), <anonymous>:854:30)
at Module.enable (eval at <anonymous> (C:\src\choiceswizard\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:1), <anonymous>:1173:22)
errno: -4058,
code: 'ENOENT',
syscall: 'open',
path: 'C:\\src\\choiceswizard\\src\\node_modules\\raf.js',
moduleTree: [ 'scroll-into-view/scrollIntoView' ],
fileName: 'C:/src/choiceswizard/node_modules/scroll-into-view/scrollIntoView.js'
This informed me that scroll-into-view has a dependency on raf https://www.npmjs.com/package/raf while raf has its own dependencies and likely so-on.
Notice that the dependencies are being looked for in root of the C:\src\choiceswizard\src\node_modules\ folder and not in the individual module folders e.g. C:\src\choiceswizard\src\node_modules\raf.
Also, upon further experimentation I discovered that raf uses index.js as its entry-point and as such what appears to be an assumption being made that raf.js is the name of the file is incorrect.
It seems to me like Aurelia CLI is not parsing the package.json of each dependency in the hierarchy and loading them accordingly. I could also be horribly misunderstanding the issue.
Does anyone have any insight that might help me use scroll-into-view in my project?
This package has a dependency which itself has a dependency.
Add the following to the dependencies section of the vendor-bundle config in your aurelia.json file and you'll be good to go:
"performance-now",
"raf",
"scroll-into-view"
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!
Each time the project needs to be built the Circle CI fails. However, when it gets rebuilt as "Rebuild without Cache" it passes.
It gets really annoying to have to rerun it each time manually.
> escrow#0.0.1 bundle /home/ubuntu/escrow
> node node_modules/react-native/local-cli/cli.js bundle --entry-file index.ios.js --bundle-output iOS/main.jsbundle
/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:193
throw new ReferenceError(messages.get("pluginUnknown", plugin, loc, i, dirname));
^
ReferenceError: Unknown plugin "transform-es2015-arrow-functions" specified in "/home/ubuntu/escrow/.babelrc" at 2, attempted to resolve relative to "/home/ubuntu/escrow"
at /home/ubuntu/escrow/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:193:17
at Array.map (native)
at Function.normalisePlugins (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:173:20)
at OptionManager.mergeOptions (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:271:36)
at OptionManager.addConfig (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:221:10)
at OptionManager.findConfigs (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:364:16)
at OptionManager.init (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:412:12)
at compile (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-register/lib/node.js:87:26)
at loader (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-register/lib/node.js:130:14)
at Object.require.extensions.(anonymous function) [as .js] (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-register/lib/node.js:140:7)
.babelrc:
{
"presets": [
"react-native",
],
"plugins": [
//Needed for redux.
"babel-plugin-transform-decorators-legacy",
"transform-class-properties", //this needs to be at top /shrug
// es2015 preset (except transform-es2015-typeof-symbol which caused problem)
"transform-es2015-arrow-functions",
"transform-es2015-block-scoped-functions",
"transform-es2015-block-scoping",
"transform-es2015-classes",
"transform-es2015-computed-properties",
"transform-es2015-constants",
"transform-es2015-destructuring",
"transform-es2015-for-of",
"transform-es2015-function-name",
"transform-es2015-literals",
"transform-es2015-object-super",
"transform-es2015-parameters",
"transform-es2015-shorthand-properties",
"transform-es2015-spread",
"transform-es2015-sticky-regex",
"transform-es2015-template-literals",
"transform-es2015-unicode-regex",
// stage-1 preset
"transform-async-to-generator",
"transform-exponentiation-operator",
"syntax-trailing-function-commas",
"transform-object-rest-spread",
"transform-class-constructor-call",
"transform-decorators",
"transform-export-extensions",
]
}