I'm getting a syntax error on link: this line, but I don't understand why it's failing.
> mocha-webpack --webpack-config webpack-test.config.js --growl --colors --require source-map-support/register --watch ./test/*.js
ERROR in ./src/index.js
Module build failed: SyntaxError: /Users/h/dev/haf/logary/vendor/logary-js/src/index.js: Unexpected token (5:7)
};
export Identity from './identity';
at Parser.pp.raise (/Users/h/dev/haf/logary/vendor/logary-js/node_modules/babylon/index.js:1378:13)
at Parser.pp.unexpected (/Users/h/dev/haf/logary/vendor/logary-js/node_modules/babylon/index.js:2817:8)
at Parser.pp.expect (/Users/h/dev/haf/logary/vendor/logary-js/node_modules/babylon/index.js:2811:33)
I'm probably missing something. Babel preset is es2015. It's a pure lib, so no react preset needed. Removing this line makes it all work fine. Except of course that I'm not able to compose the lib in that case.
According to the link you provided, it seems you wanted to do:
export { default as Identity } from './identity';
Related
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 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.
I am using angular2-webpack-starter and I have my stylesheets as SASS. Everything is working perfectly, but when I try to run karma tests it fails giving me this error
ERROR in ./src/app/widgets/message/messages.scss
Module parse failed: d:\ui_widgets-A2\src\app\widgets\message\messages.scss Unexpected token (6:22)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:22)
at Parser.pp.raise (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:920:13)
at Parser.pp.unexpected (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:1483:8)
at Parser.pp.semicolon (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:1462:73)
at Parser.pp.parseExpressionStatement (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:1976:8)
at Parser.pp.parseStatement (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:1754:188)
at Parser.pp.parseTopLevel (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:1648:21)
at Parser.parse (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:1616:17)
at Object.parse (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:882:44)
at Parser.parse (d:\ui_widgets-A2\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock.<anonymous> (d:\ui_widgets-A2\node_modules\webpack\lib\NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (d:\ui_widgets-A2\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
at nextLoader (d:\ui_widgets-A2\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
at d:\ui_widgets-A2\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
at Storage.finished (d:\ui_widgets-A2\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
at d:\ui_widgets-A2\node_modules\graceful-fs\graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3)
# ./src/app/widgets/message/message.component.ts 9:431-457
I tried to install karma-sass-preprocessor and karma-scss-preprocessor but nothing seems to work. What should I do?
So the answer is pretty trivial, I had
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader']
}
in my webpack.common.js and for some reason I thought that webpack.test.js was getting it as well, but as it turns out I should have also added it to webpack.test.js
I would suggest you using angular cli there you have nice examples with bootstrapping project.
https://cli.angular.io/
https://github.com/angular/angular-cli#css-preprocessor-integration
But here you can find some answers regarding your problem:
https://github.com/AngularClass/angular2-webpack-starter/issues/136
I am having a problem testing UI components that import .scss with webpack. I am testing the component code directly, not the exported webpack bundle.
In my SUT
I have some code that imports scss:
import '!style!css!sass!postcss-loader!../style.scss'
This code causes an error when I run tests:
Error: Cannot find module '!style!css!sass!postcss-loader!../../stylesheets/parts/Breadcrumbs.scss'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
Cheap workaround
I've been working around this issue with:
try {
require('!style!css!sass!postcss-loader!../style.scss');
} catch(err) { console.log('Not webpack'); }
But this smells dirty, and I would rather not have this code in my SUT.
Running Tests
I can't figure out how to work in the solutions that I have found for this when using babel-node and babel-istanbul instead of mocha directly. Here is how I am currently running tests:
$ babel-node babel-istanbul cover _mocha -- --require ./test/setup.js --recursive
All of the answers I have found are for mocha directly, but I am not running tests with:
$ mocha --compilers js:babel-core/register --require ./test/setup.js --recursive
?
How can I work in a compiler or setup file to tell mocha to ignore .scss files. I am going to have this problem next with .svg files too I am sure.
What about github.com/css-modules/css-modules-require-hook or if you wanna just ignore the css npmjs.com/package/ignore-styles
EDIT:
If you install ignore-style module and then run:
babel-node babel-istanbul cover _mocha -- --require ./test/setup.js --require node_modules/ignore-styles --recursive
im sure it will work, bare in mind you might need to change the path node_modules/ignore-styles im assuming you have your node_modules in the root of your project.
So I had a similar problem trying to require with a webpack-loader prefix and failing as not in the context of webpack.
prunk was better than rewire etc as covered me for all files as was able to do path matching and replacement.
var prunk = require('prunk');
prunk.alias(/^(your loader prefix)/, '');
Then I modified requires extension handling to replace what was being imported.
require.extensions['.scss'] = function (module, filename) {
module.exports = 'whatever you want';
};
(exactly what style-loader does but style-loader cleans itself up! Also note style loader is misnamed and can handle many extensions))
I added this at the top of my test runner and no unfound modules!
Note I actually went further and used the original loader by itself by reading in the file with fs and passing it to the loader but that may have been over kill and should be using webpack to transpile tests with that sole loader in the first place!