I am facing a problem with my next.js application.
In fact, I'm trying to switch my application to my production server. Before that, I tested it on my local computer, where I could build it.
Then I moved it to my pre-production server, where again I was able to build it.
However, when I run the "yarn build" command on the production server, an error is generated.
Which is :
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
> Build error occurred
{ Error: Cannot find module 'webpack'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/var/www/vhosts/paplar-auto.fr/web/node_modules/mini-css-extract-plugin/dist/index.js:7:16)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
So I tried a "yarn add webpack" and then made a new build, and I then got this error :
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
> Build error occurred
{ Error: Cannot find module 'next-compose'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/var/www/vhosts/paplar-auto.fr/web/next.config.js:5:17)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Whereas, I already have next-compose in my devDepencies (here is my package.json) :
{
"name": "web-gp",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next",
"build": "next build",
"build-static": "next build && next export",
"start": "next start -p 8000",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"lint": "eslint .",
"build:svg": "svgr -d components/icons svg/"
},
"dependencies": {
"#artsy/fresnel": "^1.1.0",
"#bootstrap-styled/v4": "^3.4.0",
"#fortawesome/fontawesome-svg-core": "^1.2.28",
"#fortawesome/free-solid-svg-icons": "^5.13.0",
"#fortawesome/react-fontawesome": "^0.1.9",
"#material-ui/core": "^4.9.14",
"#material-ui/icons": "^4.9.1",
"#react-hook/window-size": "^3.0.6",
"#svgr/cli": "^5.3.1",
"#zeit/next-css": "^1.0.1",
"#zeit/next-sass": "^1.0.1",
"axios": "^0.19.2",
"babel-plugin-module-resolver": "^4.0.0",
"bootstrap": "^4.4.1",
"bootstrap-styled": "^2.7.2",
"core-js": "2.6.10",
"dotenv": "^8.2.0",
"dotenv-webpack": "^1.8.0",
"jquery": "^3.5.1",
"js-cookie": "^2.2.1",
"leaflet": "^1.6.0",
"moment": "^2.26.0",
"next": "9.3.5",
"next-fonts": "^1.0.3",
"next-images": "^1.4.0",
"nextjs-fonts": "^0.22.0",
"node-sass": "^4.14.0",
"query-string": "^6.13.1",
"react": "16.13.1",
"react-bootstrap": "^1.0.0",
"react-bootstrap-date-picker": "^5.1.0",
"react-datepicker": "^2.16.0",
"react-dom": "^16.13.1",
"react-html-parser": "^2.0.2",
"react-leaflet": "^2.7.0",
"react-leaflet-div-icon": "^1.1.0",
"react-leaflet-universal": "^2.2.1",
"react-loader-spinner": "^3.1.14",
"react-moment": "^0.9.7",
"react-papaparse": "^3.1.1",
"react-responsive": "^8.0.3",
"react-router-dom": "^5.1.2",
"react-select": "^3.1.0",
"react-slick": "^0.26.1",
"slick-carousel": "^1.8.1",
"standard-http-error": "^2.0.1",
"styled-components": "^5.1.0",
"swiper": "^6.0.2",
"webpack": "^5.50.0"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#storybook/addon-actions": "^5.3.18",
"#storybook/addon-links": "^5.3.18",
"#storybook/addons": "^5.3.18",
"#storybook/preset-typescript": "^3.0.0",
"#storybook/react": "^5.3.18",
"#storybook/theming": "^5.3.18",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-styled-components": "^1.10.7",
"eslint": "6.6.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.19.0",
"fork-ts-checker-webpack-plugin": "^4.1.3",
"next-compose": "^0.0.2",
"ts-loader": "^7.0.1",
"tsconfig-paths-webpack-plugin": "^3.2.0",
"typescript": "^3.8.3"
},
"eslintConfig": {
"extends": "react-app"
}
}
I have already tried to move the packages mentioned in the errors from devDependencies to dependencies, but it does not change anything.
The errors of the missing packages vary, are not the same. Usually when I pass next-compose from devDependencies to dependencies, it tells me that typescript is missing, and when I then pass typescript from devDependencies to dependencies, it tells me again that next-compose is missing.
Anyway, I don't understand anything, does anyone have any idea what's going on?
Thanks in advance :)
I am trying to set up an automation frameowrk for testing my angular web app. For this we are using protractor with jasmine and cucumber.
I am running into multiple issues :
Below is the package.json and I made sure to include the dependencies for cucumber , selenium web driver manager and I did install protractor-cucumber-framework using below command:
npm install --save-dev protractor-cucumber-framework
package.json file:
{
"name": "taweb",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"test-unit": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "^7.0.2",
"#angular/cdk": "^7.0.3",
"#angular/common": "~7.0.0",
"#angular/compiler": "~7.0.0",
"#angular/core": "~7.0.0",
"#angular/forms": "~7.0.0",
"#angular/http": "~7.0.0",
"#angular/platform-browser": "~7.0.0",
"#angular/platform-browser-dynamic": "~7.0.0",
"#angular/router": "~7.0.0",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"ngx-logger": "^3.0.5",
"hammerjs": "^2.0.8",
"primeicons": "^1.0.0",
"primeng": "^6.1.6",
"rxjs": "~6.3.3",
"selenium-webdriver": "^4.0.0-alpha.1",
"zone.js": "~0.8.26",
"webpack": "~4.16.4",
"webpack-config": "~7.5.0",
"har-validator": "~5.1.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.10.0",
"#angular/cli": "~7.0.4",
"#angular/compiler-cli": "~7.0.0",
"#angular/language-service": "~7.0.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"chai": "^4.1.2",
"chai-as-promised": "^7.1.1",
"codelyzer": "~4.5.0",
"cucumber": "^4.2.1",
"cucumber-html-reporter": "^4.0.3",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-firefox-launcher": "^1.1.0",
"karma-ie-launcher": "^1.0.0",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"protractor-beautiful-reporter": "^1.2.3",
"protractor-cucumber-framework": "^6.1.1",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.1"
}
}
Also installed the below plugins from protractor:
-Cucumber Gherkin Full Support
-cucumber-gotostep
Issues faced:
1) When I create a feature file" test1.feature" and start adding scenario and right click then its not giving me an option to add step definition. Only one option related to Cucumber is showing which is
"Go to Step definition".
2) I am not seeing the cucumber icon for the above feature file. Not sure what I am missing here
Below is my config.ts:
import * as path from "path";
import { browser, Config } from "protractor";
import { Reporter } from "../support/reporter";
const jsonReports = process.cwd() + "/reports/json";
export const config: Config = {
seleniumAddress: "http://127.0.0.1:4444/wd/hub",
SELENIUM_PROMISE_MANAGER: false,
baseUrl: "https://www.google.com",
capabilities: {
browserName: "chrome",
},
framework: "custom",
frameworkPath: require.resolve("protractor-cucumber-framework"),
specs: [
//"../../features/*.feature",
"src/Test/features/*.feature",
],
onPrepare: () => {
browser.ignoreSynchronization = true;
browser.manage().window().maximize();
Reporter.createDirectory(jsonReports);
},
cucumberOpts: {
compiler: "ts:ts-node/register",
format: "json:./reports/json/cucumber_report.json",
//require: ["../../typeScript/stepdefinitions/*.js", "../../typeScript/support/*.js"],
require: ["src/Test/steps/*.ts", "src/Test/support/*.ts"],
strict: true,
tags: "#CucumberScenario or #ProtractorScenario or #TypeScriptScenario or #OutlineScenario",
},
onComplete: () => {
Reporter.createHTMLReport();
},
};
3) When I am trying to run above feature file using node_modules.bin\cucumber-js "Test1.feature"
it shows the below :
0 scenarios
0 steps
0m00.000s
4) Also I am unable to see the webdriver manager jar files in the below location:
When I ran the commands :
node_modules\.bin\webdriver-manager update
node_modules\.bin\webdriver-manager start
It gives error as
events.js:167
throw er; // Unhandled 'error' event
^
Error: connect ETIMEDOUT 172.217.7.208:443
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1113:14)
Emitted 'error' event at:
at Request.onRequestError (..\..\node_modules\request\request.js:881:8)
at ClientRequest.emit (events.js:187:15)
at TLSSocket.socketErrorListener (_http_client.js:391:9)
at TLSSocket.emit (events.js:182:13)
at emitErrorNT (internal/streams/destroy.js:82:8)
at emitErrorAndCloseNT (internal/streams/destroy.js:50:3)
at process._tickCallback (internal/process/next_tick.js:63:19)
How can I add the webdriver-manager related jar files as part of my npm package so that I can update and start it ?
Any help is much appreciated.Thanks!
Why are you not running your config file with Protractor.
You have specified your framework,selenium address,specs file location and feature files location. You should run the config file with protractor.
https://github.com/igniteram/protractor-cucumber-typescript
To avoid webdriver-manager refer the below post.
https://stackoverflow.com/a/53358685/8903949
I’m added this calendar (https://market.ionic.io/themes/ionic-calendar-week )for my Application ,But I had some error
How to fix it ,
this is my
im try to installed but not work npm install #angular/animations#latest --save
package.jason
{
"name": "MyApp",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "4.4.3",
"#angular/compiler": "4.4.3",
"#angular/compiler-cli": "4.4.3",
"#angular/core": "4.4.3",
"#angular/forms": "4.4.3",
"#angular/http": "4.4.3",
"#angular/platform-browser": "4.4.3",
"#angular/platform-browser-dynamic": "4.4.3",
"#ionic-native/core": "4.3.2",
"#ionic-native/splash-screen": "4.3.2",
"#ionic-native/status-bar": "4.3.2",
"#ionic/storage": "2.0.1",
"angular-percent-circle-directive": "^1.1.1",
"angular-svg-round-progressbar": "^1.1.1",
"cordova-android": "6.3.0",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-ionic-webview": "^1.1.16",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-whitelist": "^1.3.1",
"ion2-calendar": "^2.1.1",
"ionic-angular": "3.7.1",
"ionic-plugin-keyboard": "^2.2.1",
"ionic3-calendar": "^1.1.6",
"ionicons": "3.0.0",
"moment": "^2.19.1",
"rxjs": "5.4.3",
"sw-toolbox": "3.6.0",
"uuid": "^3.1.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"#ionic/app-scripts": "3.0.1",
"typescript": "2.3.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"ionic-plugin-keyboard": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {}
},
"platforms": [
"android"
]
}
}
error
Runtime Error Cannot find module "#angular/animations" Stack Error:
Cannot find module "#angular/animations"
at Object. (http://localhost:8100/build/vendor.js:132377:7)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.356 (http://localhost:8100/build/main.js:1179:95)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.337 (http://localhost:8100/build/main.js:1159:70)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at webpackJsonpCallback (http://localhost:8100/build/vendor.js:26:23)
at http://localhost:8100/build/main.js:1:1
now its work Im reinstalled npm install ionic AND AFTER INSTALLED AGAIN npm install #angular/animations#latest --save
I have style-loader, css-loader, sass-loader and node-sass installed. And i think the webpack.config file is set up properly...although it seems I'm missing something. please help!
package.json
{
"name": "pluralsight-redux-starter",
"version": "1.0.0",
"description": "Starter kit for React and Redux Pluralsight course by Cory House",
"author": "Cory House",
"license": "MIT",
"//": "alternative for this include gulp and grunt",
"scripts": {
"//": "react specific library, you can use redux with other libraries as well, like angular etc...",
"prestart": "babel-node tools/startMessage.js",
"start": "npm-run-all --parallel open:src lint:watch test:watch",
"open:src": "babel-node tools/srcServer.js",
"lint": "node_modules/.bin/esw webpack.config.* src tools",
"lint:watch": "npm run lint -- --watch",
"test": "mocha --reporter spec tools/testSetup.js \"src/**/*.test.js\"",
"test:watch": "npm run test -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"prebuild": "npm-run-all clean-dist test link build:html",
"build": "babel-node tools/build.js",
"postbuild": "babel-node tools/distServer.js"
},
"dependencies": {
"babel-polyfill": "6.8.0",
"bootstrap": "3.3.6",
"css-loader": "^0.23.1",
"jquery": "2.2.3",
"node-sass": "^3.8.0",
"react": "15.1.0",
"react-dom": "15.0.2",
"react-redux": "4.4.5",
"react-router": "2.4.0",
"react-router-redux": "4.0.4",
"react-toolbox": "^1.0.1",
"redux": "3.5.2",
"redux-thunk": "2.0.1",
"sass-loader": "^0.5.0",
"style-loader": "^0.13.1",
"toastr": "2.1.2"
},
"devDependencies": {
"babel-cli": "6.8.0",
"babel-core": "6.8.0",
"babel-loader": "6.2.4",
"babel-plugin-react-display-name": "2.0.0",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-react-hmre": "1.1.1",
"babel-register": "6.8.0",
"colors": "1.1.2",
"compression": "1.6.1",
"cross-env": "1.0.7",
"css-loader": "0.23.1",
"enzyme": "2.2.0",
"eslint": "2.9.0",
"eslint-plugin-import": "1.6.1",
"eslint-plugin-react": "5.0.1",
"eslint-watch": "2.1.11",
"eventsource-polyfill": "0.9.6",
"expect": "1.19.0",
"express": "4.13.4",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.8.5",
"jsdom": "8.5.0",
"mocha": "2.4.5",
"nock": "8.0.0",
"npm-run-all": "1.8.0",
"normalize.css": "^4.0.0",
"react-addons-css-transition-group": "^15.0.0",
"open": "0.0.5",
"postcss-loader": "0.8.2",
"react": "^15.0.2",
"react-addons-test-utils": "15.0.2",
"redux-immutable-state-invariant": "1.2.3",
"redux-mock-store": "1.0.2",
"rimraf": "2.5.2",
"sass-loader": "0.5",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.0",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.10.0"
},
"repository": {
"type": "git",
"url": "https://github.com/coryhouse/pluralsight-redux-starter"
}
}
webpack.config.dev.js
import webpack from 'webpack';
import path from 'path';
const ExtractTextPlugin = require('extract-text-webpack-plugin');
export default {
debug: true,
devtool: 'cheap-module-eval-source-map',
noInfo: false,
entry: [
'eventsource-polyfill', // necessary for hot reloading with IE
'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
'./src/index.js'
],
target: 'web',
output: {
path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './src'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.css', '.scss', '.js']
},
// Tells webpack the types of files that we want it to handle.
module: {
loaders: [
{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
{test: /\.s?css$/, loaders: ['style', 'css', 'sass']},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
]
}
};
error message in console:
SyntaxError: /Users/Macbook/projects/pluralsight-redux-starter/src/styles/test.scss: Unexpected token (1:5)
> 1 | form {
| ^
2 | h1 {
3 | color: red;
4 | }
at Parser.pp.raise (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/location.js:22:13)
at Parser.pp.unexpected (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/util.js:89:8)
at Parser.pp.semicolon (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/util.js:76:38)
at Parser.pp.parseExpressionStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:499:8)
at Parser.parseExpressionStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/plugins/flow.js:52:20)
at Parser.pp.parseStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:168:17)
at Parser.parseStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/plugins/flow.js:30:22)
at Parser.pp.parseBlockBody (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:529:21)
at Parser.pp.parseTopLevel (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:36:8)
at Parser.parse (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/index.js:129:19)
at parse (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/index.js:47:47)
at File.parse (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/file/index.js:540:58)
at File.parseCode (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/file/index.js:626:20)
at /Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/pipeline.js:52:12
at File.wrap (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/file/index.js:586:16)
at Pipeline.transform (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/pipeline.js:50:17)
at Object.transformFileSync (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/api/node.js:152:10)
at compile (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:129:20)
at loader (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:158:14)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:168:7)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (CourseForm.js:4:1)
at Module._compile (module.js:541:32)
at loader (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:158:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:168:7)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (CourseForm.Enzyme.test.js:12:1)
at Module._compile (module.js:541:32)
at loader (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:158:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:168:7)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at /Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/lib/mocha.js:219:27
at Array.forEach (native)
at Mocha.loadFiles (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/lib/mocha.js:216:14)
at Mocha.run (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/lib/mocha.js:468:10)
at loadAndRun (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/bin/_mocha:359:22)
at Object.<anonymous> (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/bin/_mocha:376:3)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Function.Module.runMain (module.js:575:10)
at startup (node.js:160:18)
at node.js:449:3
test.scss
form {
h1 {
color: red;
}
}
webpack-validator output:
import webpack from webpack;
seems to be causing a problem for webpack-validator, not sure why this is. I'm not convinced it is related to my scss loading issue.
==> webpack-validator webpack.config.dev.js
Reading: webpack.config.dev.js
/Users/Macbook/projects/pluralsight-redux-starter/webpack.config.dev.js:1
(function (exports, require, module, __filename, __dirname) { import webpack from 'webpack';
^^^^^^
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:513:28)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at validateConfig (/usr/local/lib/node_modules/webpack-validator/dist/bin/validate-config.js:13:16)
at /usr/local/lib/node_modules/webpack-validator/dist/bin/webpack-validator.js:35:32
From the error it looks like you are just missing a brace somewhere in your .scss
SyntaxError: /Users/Macbook/projects/pluralsight-redux-starter/src/styles/test.scss: Unexpected token (1:5)
> 1 | form {
| ^
2 | h1 {
3 | color: red;
4 | }
Double check test.scss and make sure everything is fine.
Resolved the problem using the following package:
https://www.npmjs.com/package/ignore-styles
added:
mocha--require ignore-styles
to test script and problem solved.
Thanks #eblin
Can you try and extend your config to include the following:
export default {
resolve: {
extensions: ['', '.css', '.scss', '.js']
},
...
}
Problem solved.
Updated sass-loader from 0.5.0 to 3.2.0, and tweaked the webpack.config file. See below, the updated package.json and webpack.config. Allows me to use bootstrap and react-toolbox styles.
package.json
{
"name": "pluralsight-redux-starter",
"version": "1.0.0",
"description": "Starter kit for React and Redux Pluralsight course by Cory House",
"author": "Cory House",
"license": "MIT",
"//": "alternative for this include gulp and grunt",
"scripts": {
"//": "react specific library, you can use redux with other libraries as well, like angular etc...",
"prestart": "babel-node tools/startMessage.js",
"start": "npm-run-all --parallel open:src lint:watch test:watch",
"open:src": "babel-node tools/srcServer.js",
"lint": "node_modules/.bin/esw webpack.config.* src tools",
"lint:watch": "npm run lint -- --watch",
"test": "mocha --require ignore-styles --reporter spec tools/testSetup.js \"src/**/*.test.js\"",
"test:watch": "npm run test -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"prebuild": "npm-run-all clean-dist test link build:html",
"build": "babel-node tools/build.js",
"postbuild": "babel-node tools/distServer.js"
},
"dependencies": {
"babel-polyfill": "6.8.0",
"bootstrap": "3.3.6",
"css-loader": "^0.23.1",
"jquery": "2.2.3",
"minimatch": "^3.0.2",
"node-sass": "^3.8.0",
"react": "15.1.0",
"react-dom": "15.0.2",
"react-redux": "4.4.5",
"react-router": "2.4.0",
"react-router-redux": "4.0.4",
"react-toolbox": "^1.0.1",
"redux": "3.5.2",
"redux-thunk": "2.0.1",
"resolve-path-webpack-plugin": "^1.1.0",
"sass-loader": "^3.2.1",
"style-loader": "^0.13.1",
"toastr": "2.1.2",
"webpack-validator": "^2.2.0"
},
"devDependencies": {
"babel-cli": "6.8.0",
"babel-core": "6.8.0",
"babel-loader": "6.2.4",
"babel-plugin-react-display-name": "2.0.0",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-react-hmre": "1.1.1",
"babel-register": "6.8.0",
"colors": "1.1.2",
"compression": "1.6.1",
"cross-env": "1.0.7",
"css-loader": "0.23.1",
"enzyme": "2.2.0",
"eslint": "2.9.0",
"eslint-plugin-import": "1.6.1",
"eslint-plugin-react": "5.0.1",
"eslint-watch": "2.1.11",
"eventsource-polyfill": "0.9.6",
"expect": "1.19.0",
"express": "4.13.4",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.8.5",
"ignore-styles": "^4.0.0",
"jsdom": "8.5.0",
"mocha": "2.4.5",
"nock": "8.0.0",
"normalize.css": "^4.0.0",
"npm-run-all": "1.8.0",
"open": "0.0.5",
"postcss-loader": "0.8.2",
"react": "^15.0.2",
"react-addons-css-transition-group": "^15.0.0",
"react-addons-test-utils": "15.0.2",
"redux-immutable-state-invariant": "1.2.3",
"redux-mock-store": "1.0.2",
"rimraf": "2.5.2",
"sass-loader": "^3.2.0",
"style-loader": "0.13.1",
"toolbox-loader": "0.0.3",
"url-loader": "0.5.7",
"webpack": "1.13.0",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.10.0"
},
"repository": {
"type": "git",
"url": "https://github.com/coryhouse/pluralsight-redux-starter"
}
}
webpack.config.dev.js
import webpack from 'webpack';
import path from 'path';
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const modulesPath = path.join(__dirname, 'node_modules');
const autoprefixer = require('autoprefixer');
export default {
debug: true,
devtool: 'source-map',
noInfo: false,
entry: [
'eventsource-polyfill', // necessary for hot reloading with IE
'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
'./src/index.js'
],
target: 'web',
output: {
path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './src'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.css', '.scss', '.js', '.json'],
modulesDirectories: ['node_modules']
},
postcss: [autoprefixer],
toolbox: {
theme: path.join(__dirname, 'src/styles/variables.scss')
},
// Tells webpack the types of files that we want it to handle.
module: {
loaders: [
{test: /(\.js|\.jsx)$/,
include: path.join(__dirname, 'src'),
loaders: ['babel']
},
{
test: /\.s?css$/,
loaders: ['style', 'css', 'sass'],
exclude: /(node_modules)\/react-toolbox/
},
{
test : /(\.scss|\.css)$/,
include : /(node_modules)\/react-toolbox/,
loaders : [
require.resolve('style-loader'),
require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
require.resolve('sass-loader') + '?sourceMap', 'toolbox'
]
},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
]
}
};