I am pretty new to Vue.js and Js in general. I am using the Bulma.io CSS Framework and found the Vue-Admin Package which provides Vue Components in Bulma Styles.
I would like to use it but I am not sure how to require it. I tried to require a single Component like:
javascript
// resource/assets/js/app.js
Vue.component('sidebar', require('../../../node_modules/vue-admin/client/components/layout/Sidebar.vue'));
This throws the following Error in my Console:
ERROR in ./~/vue-admin/client/components/layout/Sidebar.vue
Module not found: Error: Can't resolve 'scss-loader' in '/Volumes/Data/Entwicklung/Workspace/Private/TheNewSumoAndPanda/node_modules/vue-admin/client/components/layout'
# ./~/vue-admin/client/components/layout/Sidebar.vue 5:0-169
# ./resources/assets/js/app.js
ERROR in ./~/vue-bulma-expanding/src/Expanding.vue
Module not found: Error: Can't resolve 'scss-loader' in '/Volumes/Data/Entwicklung/Workspace/Private/TheNewSumoAndPanda/node_modules/vue-bulma-expanding/src'
# ./~/vue-bulma-expanding/src/Expanding.vue 5:0-183
# ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-admin/client/components/layout/Sidebar.vue
# ./~/vue-admin/client/components/layout/Sidebar.vue
# ./resources/assets/js/app.js
I also tried to include some kind of an Autoloader and tried the following:
// resource/assets/js/app.js
require('../../../node_modules/vue-admin/client/app');
This throwed the following:
ERROR in ./~/vue-admin/client/app.js
Module parse failed: /Volumes/Data/Entwicklung/Workspace/Private/TheNewSumoAndPanda/node_modules/vue-admin/client/app.js Unexpected token (38:2)
You may need an appropriate loader to handle this file type.
| store,
| nprogress,
| ...App
| })
|
# ./resources/assets/js/app.js 9:0-53
This is the link to the Vue-Admin Package on GIthub:
https://github.com/vue-bulma/vue-admin
I hope you guys can help me?
Thanks David
I created an integration without laravel-mix: https://github.com/gazben/laravel-vue-admin
This solution uses the original build script, and the npm commands are wrapped by artisan commands. The output is symlinked to the appropriate directories.
Related
I was writing composer test.In my origin codes, the logic.js include request.post which interact with other server. I add
var request = require('request') in the beginning to avoid error which is
"error 'request' is not defined".
in this way, I can translate the package into a .bna file, and work well.
But when I try to write some unit test with 'embeded', the error came up with
ReferenceError: require is not defined.
I add the 'require' package in my package.json file.
this is because that 'eslint' is complaining it doesn't know what to do with request when you run npm test etc.
We shoud add the comment like
/* global getAssetRegistry getFactory emit request */
follow the example:
https://github.com/hyperledger/composer-sample-networks/blob/master/packages/basic-sample-network/lib/sample.js#L15
I have a running tsx file that loads a ListView. The project loads fine. I ran the following command
npm install # microsoft/sp-dialog
Then in the tsx in added the following import statement.
import { SPHttpClient } from '# microsoft/sp-http';
When I use gulp build, I am getting the following error.
_Error - typescript - node_modules\#microsoft\sp-dialog\node_modules\#microsoft\sp-core-library\lib\deferredCl
ass\DeferredClass.d.ts(25,24): error TS1005: ';' expected._
I can see the error is pointing to the abstract keyword in the DeferredClass.ts file. How can I fix this?
You may have just mistyped the commands and code into SO but if not....
You need to remove the space between the # and microsoft
I am using the npm 5.2.0 with mocha-webpack to run my tests. However, my webpack.config.js seem to be ignored as I get all kind of errors of Aliases not being used in my webpack.config.js file.
My package.json command:
"test:mocha": "mocha-webpack",
My mocha-webpack.opts:
--webpack-config webpack.config.js
--colors
--require ignore-styles
--require babel-core/register
--require jsdom-global/register
**/tests/*.test.js
My mocha-webpack.opts is being used as the error output is in red.
I also tried with a
--webpack-config webpack.config-test.js
That contains only the required webpack stuff: babel en aliases, but the same errors appear.
Some of the errors:
Module not found: Error: Can't resolve 'Redux/actions' in '/CodeRepo/checklist/src/js'
resolve 'Redux/actions' in '/CodeRepo/checklist/src/js'
Parsed request is a module
Module parse failed: /CodeRepo/buttons/iconTextButton.js Unexpected token (16:12)
You may need an appropriate loader to handle this file type.
Any idea how to solve this? (I followed the example on the net, and the npm mocha-webpack page, but couldn't get it solved).
I have a file using scss with css-modules like so:
import styles from './Login.scss';
The webpack build works fine but i'm getting a flow error: Required Module Not Found
In my .flowconfig I have
[ignore]
.*/node_modules/fbjs/.*
.*/app/main.js
.*/app/dist/.*
.*/release/.*
.*/git/.*
[include]
[libs]
[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
esproposal.export_star_as=enable
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='styl' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='png' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
module.name_mapper.extension='jpg' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
I've also seen https://github.com/facebook/flow/issues/338 but it doesn't really have any solution.
Has anyone found a workaround for this issue?
A better solution for this error is to use the css-modules-flow-types webpack plugin to generate flow types for your CSS modules.
Flow doesn't know about the scss extension, so you need to add the following to your .flowconfig, in the [options] section:
; Extensions
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.css
module.file_ext=.scss
You should also add *.scss.flow to your .gitignore. These files shouldn't be checked in because they are automatically generated during the webpack build.
added all the file types I wanted flow to recognize in .flowconfig file
[options]
module.file_ext=.js
module.file_ext=.json
module.file_ext=.jsx
module.file_ext=.css
module.file_ext=.scss
This error can be fixed by assigning .scss files to an empty module. I just npm installed empty and added this to the .flowconfig :
module.name_mapper.extension='scss' -> 'empty/object'
We can use module.name_mapper.extension to replace types for imported module on Object
module.name_mapper.extension - Specify a file extension to match, and a replacement module name,
separated by a ->.
add option to .flowconfig file
// .flowconfig
[options]
module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flowconfig.mock-module.js'
create new file
// flowconfig.mock-module.js
export default Object;
I'm not sure if Vue-strap works with 2.0 so I want to try using its Navbar component.
I add this in app.js.
Vue.component('navbar', require('../../../node_modules/vue-strap/src/Navbar.vue'));
gulp watch throws this error.
ERROR in ./~/vue-strap/src/utils/NodeList.js
Module build failed: Error
at ForOfStatement.initialise (/var/www/web_redeem/node_modules/buble/dist/buble.umd.js:2004:65)
at /var/www/web_redeem/node_modules/buble/dist/buble.umd.js:9381:56
at Array.forEach (native)
at BlockStatement.initialise (/var/www/web_redeem/node_modules/buble/dist/buble.umd.js:9381:15)
at FunctionDeclaration.initialise (/var/www/web_redeem/node_modules/buble/dist/buble.umd.js:858:12)
at FunctionDeclaration.initialise (/var/www/web_redeem/node_modules/buble/dist/buble.umd.js:2071:31)
at /var/www/web_redeem/node_modules/buble/dist/buble.umd.js:9381:56
at Array.forEach (native)
at BlockStatement.initialise (/var/www/web_redeem/node_modules/buble/dist/buble.umd.js:9381:15)
# ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-strap/src/Navbar.vue 33:0-35
# ./~/vue-strap/src/Navbar.vue
# ./resources/assets/js/app.js
Elixir compiles js with Bublé that does not support for ... of statements yet. Consider switching to babel instead.
If you are you using https://github.com/vuejs/laravel-elixir-vue-2 change to https://github.com/JeffreyWay/laravel-elixir-vue