Module build failed Cannot find module '#babel/preset-env' - javascript

I was working on my react application with set up babel. Unfortunately while setting it up using yarn and when I build my bundle.js file, I run into some problems:
ERROR in ./src/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '#babel/preset-env' from '/Users/react-file/Desktop/indecision'
at Function.resolveSync [as sync] (/Users/react-file/Desktop/indecision/node_modules/resolve/lib/sync.js:89:15)
at resolveStandardizedName (/Users/react-file/Desktop/indecision/node_modules/#babel/core/lib/config/files/plugins.js:101:31)
at resolvePreset (/Users/react-file/Desktop/indecision/node_modules/#babel/core/lib/config/files/plugins.js:58:10)
at loadPreset (/Users/react-file/Desktop/indecision/node_modules/#babel/core/lib/config/files/plugins.js:77:20)
at createDescriptor (/Users/react-file/Desktop/indecision/node_modules/#babel/core/lib/config/config-descriptors.js:154:9)
at /Users/react-file/Desktop/indecision/node_modules/#babel/core/lib/config/config-descriptors.js:109:50
at Array.map (<anonymous>)
at createDescriptors (/Users/react-file/Desktop/indecision/node_modules/#babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/react-file/Desktop/indecision/node_modules/#babel/core/lib/config/config-descriptors.js:101:10)
at presets (/Users/react-file/Desktop/indecision/node_modules/#babel/core/lib/config/config-descriptors.js:47:19)
at mergeChainOpts (/Users/react-file/Desktop/indecision/node_modules/#babel/core/lib/config/config-chain.js:320:26)
at /Users/react-file/Desktop/indecision/node_modules/#babel/core/lib/config/config-chain.js:283:7
at Generator.next (<anonymous>)
at buildRootChain (/Users/react-file/Desktop/indecision/node_modules/#babel/core/lib/config/config-chain.js:120:29)
at buildRootChain.next (<anonymous>)
at loadPrivatePartialConfig (/Users/react-file/Desktop/indecision/node_modules/#babel/core/lib/config/partial.js:95:62)
at loadPrivatePartialConfig.next (<anonymous>)
at Function.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/#babel/core/lib/config/partial.js:120:25)
at Generator.next (<anonymous>)
at evaluateSync (/Users/react-file/Desktop/indecision/node_modules/gensync/index.js:244:28)
at Function.sync (/Users/react-file/Desktop/indecision/node_modules/gensync/index.js:84:14)
at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/#babel/core/lib/config/index.js:41:61)
at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:151:26)
at Generator.next (<anonymous>)
at asyncGeneratorStep (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:3:103)
at _next (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:5:194)
at /Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:5:364
at new Promise (<anonymous>)
at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:5:97)
at Object._loader (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:231:18)
at Object.loader (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:64:18)
at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:59:12)
Here's my package.json:
{
"name": "Box",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"server": "live-server public/",
"build": "webpack --watch",
"build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"live-server": "^1.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"validator": "^13.0.0",
"webpack": "^4.43.0"
},
"devDependencies": {
"#babel/core": "^7.9.6",
"webpack-cli": "^3.3.11"
}
}
Here's my webpack.config.js const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}]
}
};file"
And here's my .babelrc file:
{
"presets": [
"env",
"react"
]
}
Any idea what's wrong with this?

You need to install #babel/preset-env instead of babel-preset-env.
I believe that most babel modules now live under the #babel org
Edit:
also IMHO the correct syntax for the babelrc file should be
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
}

Related

Webpack Build SyntaxError: Unexpected token )

Note: I read through the other similar questions (here and others), but they are all about earlier versions of webpack and babel and do not solve the following issue.
This is serving just fine, but when I run npm run build I'm getting the following error. How do I solve this? (And how do I get better errors than this?, the log is just as bad).
> react_01#1.0.0 build /Users/monkeydo/Documents/code/__tests/react_01
> webpack --mode production
/Users/monkeydo/Documents/code/__tests/react_01/node_modules/webpack-cli/bin/cli.js:41
)} manually.`,
^
SyntaxError: Unexpected token )
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:549:28)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.require (module.js:504:17)
at require (internal/module.js:20:19)
at runCli (/Users/monkeydo/Documents/code/__tests/react_01/node_modules/webpack/bin/webpack.js:69:2)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react_01#1.0.0 build: `webpack --mode production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react_01#1.0.0 build script.
My webpack file looks like this:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
//entry: ['#babel/polyfill', './src/index.js'],
entry: './src/index.js',
// Where files should be sent once they are bundled
output: {
path: path.join(__dirname, '/dist'),
filename: 'index.bundle.js'
},
// webpack 5 comes with devServer which loads in development mode
devServer: {
port: 3000,
watchContentBase: true
},
// Rules of how webpack will take our files, complie & bundle them for the browser
module: {
rules: [
{
test: /\.(js|jsx)$/,
// test: /\.jsx?/,
exclude: /nodeModules/,
use: {
loader: 'babel-loader',
query:
{
presets:['react', 'preset-env']
}
}
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' }), new MiniCssExtractPlugin()]
}
My package json looks like this:
{
"name": "react_01",
"version": "1.0.0",
"description": "",
"main": "index.jsx",
"scripts": {
"serve": "webpack serve --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"css-loader": "^6.0.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^2.1.0",
"style-loader": "^3.1.0",
"webpack": "^5.45.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
My babelrc file looks like this:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
My index.js file looks like this:
import React from "react"
import ReactDom from "react-dom"
import App from "./components/app"
import "./style.css"
ReactDom.render(<App />, document.getElementById('app'))
My app.js file looks like this:
import React from "react"
function App() {
return (<div>
<h2>Welcome to My new React App</h2>
<h3>Date : {new Date().toDateString()}</h3>
</div>)
}
export default App
*** Edit: not sure what I was thinking... I totally forgot to add the webpack code before :o ! I guess that was a dyslexic senior moment. It's added now.
Just remove the styles import
import "./style.css"
Webpack speaks JavaScript, not css, if you want it to learn it you need to create a webpack config file and use the proper loader to handle css

Trying to build ReactJS app in prod - Module build failed: SyntaxError: Unexpected token

Its been a while since I've pushed my React app to a prod environment after a bunch of changes (dumb, I know) and now when I try to build it for prod the build is failing and I'm getting the following error:
ERROR in ./src/app.js
Module build failed: SyntaxError: Unexpected token (9:16)
7 |
8 |
> 9 | ReactDOM.render(<AppRouter />, document.getElementById('app'));
| ^
10 |
11 |
# multi #babel/polyfill ./src/app.js
error Command failed with exit code 2.
Here's my webpack.config.js file:
const path = require('path');
module.exports = (env) => {
const isProduction = env === 'production';
console.log(env);
return {
entry: ["#babel/polyfill", "./src/app.js"],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}]
},
devtool: isProduction ? 'source-map' : 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true
}
};
};
And here's my package.json file:
{
"name": "SheSaysGo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"serve": "live-server public/",
"build:dev": "webpack",
"build:prod": "webpack -p --env production",
"dev-server": "webpack-dev-server",
"start": "node server/server.js"
},
"dependencies": {
"#babel/polyfill": "^7.4.4",
"babel-cli": "6.24.1",
"babel-core": "6.25.0",
"babel-loader": "7.1.1",
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
"chaituvr-react-graphjs-test": "^0.0.3",
"cosmicjs": "^3.2.17",
"express": "4.15.4",
"google-maps-react": "^2.0.2",
"live-server": "^1.2.1",
"lodash": "^4.17.11",
"react": "16.0.0",
"react-dom": "16.0.0",
"react-leaf-carousel": "^1.2.2",
"react-router-dom": "4.2.2",
"validator": "8.0.0",
"webpack": "3.1.0",
"webpack-dev-server": "2.5.1"
}
}
It builds when I run it locally as a dev build with "yarn run dev-server" but not when I run "yarn run build:prod".
EDIT: Sorry I had written .babel.rc, it's .babelrc
Getting babel-loader to use preset-react
It looks like Babel is interpreting your file as regular JavaScript, as opposed to React JSX (or whatever it's called).
I see in your package.json that you're using #babel/preset-react, so it should work if well configured.
In .babelrc
Check your .babelrc file, it should contain something like this:
{
"presets": ["#babel/preset-react"]
}
You can also change the extension of the file to .jsx, it find it to be clearer, but that's up to your personal preference.
In webpack.config.js
Alternatively, you can define this in the webpack config. Replace this:
loader: 'babel-loader',
with this (in your webpack.config.js):
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
},
Check the package's name
Looking closer at your package.json, it contains:
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
But you're using #babel/preset-env and #babel/preset-react. So npm install --save those and remove the old ones from your package.json.
Run babel --presets #babel/preset-react ./src/app.js, to see if the preset is there and works:
Running it should print to the console:
ReactDOM.render(React.createElement(AppRouter, null), document.getElementById('app'));
^ this is babel successfully converting JSX to JS.

Plugin/Preset files are not allowed to export objects, only functions. Removing and keeping babel installs? Selection with webpack?

I'm trying to learn how to write a React App and set up from practically scratch.
I keep trying to run webpack --config webpack.dev.config.js.
I keep getting this error. And I've tried using different loaders and presets.
What is wrong with my setup? Is it my npm node modules are outdated?
I've tried updating all my presets, loaders and even babel itself.
Error:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/babel-preset-es2015/lib/index.js
at createDescriptor (/Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/#babel/core/lib/config/config-descriptors.js:178:11)
at items.map (/Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/#babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
webpack.dev.config.js:
var path = require('path');
module.exports = {
mode: 'development',
// context: path.resolve(__dirname, 'src'),
entry: path.resolve(__dirname,'src/index.js'),
output: {
filename: 'main.js',
libraryTarget: "commonjs2"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015','react'],
plugins: ['transform-class-properties']
}
}
]
}
]
},
resolve: {
extensions: ['.js']
}
};
package.json :
{
"name": "react-imgur-album",
"version": "0.0.1",
"description": "React Component for displaying images in an Imgur Album",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.dev.config.js --progress --display-error-details"
},
"keywords": [
"imgur",
"react",
"react-components",
"component",
"images",
"photos",
"pics"
],
"author": "Kyle Calica",
"license": "ISC",
"dependencies": {
"#babel/preset-react": "^7.0.0",
"react-dom": "^16.5.2"
},
"devDependencies": {
"#babel/cli": "^7.1.2",
"#babel/core": "^7.1.2",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"eslint": "^5.7.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"fixed": "^0.3.0",
"it": "^1.1.1",
"path": "^0.12.7",
"react": "^16.5.2",
"webpack": "^4.22.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
}
}
index.js:
import React, { Component } from 'react';
var imgurAPI = 'https://api.imgur.com/3/album/';
export default class ImgurAlbum extends Component {
constructor(props){
super(props);
this.state = {
imgurPosts: [],
isLoading: true
};
}
componentDidMount(){
fetch(imgurAPI + this.props.album + '/images',{
'headers':{
'Authorizathion': 'client-id'
}
}).then(res => res.json())
.then(data => console.log(data));
}
render(){
return(
<div>
<h1>hi!</h1>
</div>
);
}
}
I notice I have two babel cores installed, I don't know how to remove one, or which one to keep. Or even how to select which one with webpack?
I found my solution!
It's a babel mismatch.
I had an old babel-core and babel-presets installed.
In Babel 7, it is best to install using:
npm i #babel/preset-react #babel/preset-env
then in your .babelrc:
{
"presets" : ["#babel/preset-env","#babel/preset-react"]
}
I also uninstalled the old babel-preset-react and babel-preset-es2015 for safe measure.
Still learning so I might be missing steps or understanding here. Please add if you believe you need more information or if I am wrong about anything, but I was able to get mine to build

webpack error : CLI moved into a separate package: webpack-cli

I'm following a tutorial here to install react and I'm new to ReactJS.
I completed installations as shown in the video and run this command in the root project folder:
npm start it
I encountered with following error here:
The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
module.js:471
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
at Function.Module._resolveFilename (module.js:469:15)
I tried the solutions posted in this link but it's still the same.
Here's webpack.config.js:
var path = require('path');
module.exports = {
entry: './script.jsx',
output: {
path: path.resolve(__dirname,''),
filename: 'transpiled.js'
},
module: {
rules: [
test: /\.jsx?$/,
loaders: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
]
}
}
And package.json:
{
"name": "react_project",
"version": "1.0.0",
"description": "first project on react",
"main": "index.js",
"scripts": {
"it": "webpack-dev-server --hot"
},
"author": "azima",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.17.1",
"webpack-dev-server": "^3.1.7"
},
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2"
}
}
Is it the issue with Webpack version?
Try npm install webpack-cli --save

Mocha with webpack can not resolve module

I was trying to run mocha tests in my project. When i execute npm command i get the next error:
> Frontent#0.0.0 test /home/serperga/falcon/falcon-project/frontend
> mocha-webpack
ERROR in ./test/src/app/components/contact-us/contact-us.spec.ts
Module not found: Error: Can't resolve 'main/src/app/components/contact-us/contact-us' in '/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us'
resolve 'main/src/app/components/contact-us/contact-us' in '/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us'
Parsed request is a module
using description file: /home/serperga/falcon/falcon-project/frontend/package.json (relative path: ./test/src/app/components/contact-us)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /home/serperga/falcon/falcon-project/frontend/package.json (relative path: ./test/src/app/components/contact-us)
resolve as module
/home/serperga/falcon/falcon-project/node_modules doesn't exist or is not a directory
/home/serperga/falcon/node_modules doesn't exist or is not a directory
/home/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us/node_modules doesn't exist or is not a directory
/home/serperga/falcon/falcon-project/frontend/test/src/app/components/node_modules doesn't exist or is not a directory
/home/serperga/falcon/falcon-project/frontend/test/src/app/node_modules doesn't exist or is not a directory
/home/serperga/falcon/falcon-project/frontend/test/src/node_modules doesn't exist or is not a directory
/home/serperga/falcon/falcon-project/frontend/test/node_modules doesn't exist or is not a directory
looking for modules in /home/serperga/falcon/falcon-project/frontend/node_modules
using description file: /home/serperga/falcon/falcon-project/frontend/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /home/serperga/falcon/falcon-project/frontend/package.json (relative path: ./node_modules)
using description file: /home/serperga/falcon/falcon-project/frontend/package.json (relative path: ./node_modules/main/src/app/components/contact-us/contact-us)
as directory
/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us.js doesn't exist
looking for modules in /home/serperga/node_modules
No description file found
Field 'browser' doesn't contain a valid alias configuration
No description file found
as directory
/home/serperga/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/node_modules/main/src/app/components/contact-us/contact-us.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/node_modules/main/src/app/components/contact-us/contact-us.js doesn't exist
[/home/serperga/falcon/falcon-project/node_modules]
[/home/serperga/falcon/node_modules]
[/home/serperga/node_modules/package.json]
[/home/node_modules]
[/node_modules]
[/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us/node_modules]
[/home/serperga/falcon/falcon-project/frontend/test/src/app/components/node_modules]
[/home/serperga/falcon/falcon-project/frontend/test/src/app/node_modules]
[/home/serperga/falcon/falcon-project/frontend/test/src/node_modules]
[/home/serperga/falcon/falcon-project/frontend/test/node_modules]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us/package.json]
[/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us.ts]
[/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us.js]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us.ts]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us.js]
# ./test/src/app/components/contact-us/contact-us.spec.ts 2:0-74
# ./test/src object Object
# ./.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449-entry.js
/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us/contact-us.spec.ts:3
import { By } from '#angular/platform-browser';
^
Error: Cannot find module "main/src/app/components/contact-us/contact-us"
at Object.map../app/components/contact-us/contact-us.spec.ts (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us/contact-us.spec.ts:3:1)
at __webpack_require__ (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/webpack/bootstrap d6f4950c2aa1937a19f2:19:1)
at webpackContext (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/home/serperga/falcon/falcon-project/frontend/test/src object Object:5:1)
at Array.forEach (native)
at Object.<anonymous> (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/17ee8e5ef87ab9f1f1c6d5078648f449-entry.js:6:1)
at __webpack_require__ (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/webpack/bootstrap d6f4950c2aa1937a19f2:19:1)
at /home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/webpack/bootstrap d6f4950c2aa1937a19f2:63:1
at Object.<anonymous> (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/17ee8e5ef87ab9f1f1c6d5078648f449-output.js:67:10)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at /home/serperga/falcon/falcon-project/frontend/node_modules/mocha/lib/mocha.js:230:27
at Array.forEach (native)
at Mocha.loadFiles (/home/serperga/falcon/falcon-project/frontend/node_modules/mocha/lib/mocha.js:227:14)
at Mocha.run (/home/serperga/falcon/falcon-project/frontend/node_modules/mocha/lib/mocha.js:495:10)
at /home/serperga/falcon/falcon-project/frontend/node_modules/mocha-webpack/lib/cli/runner.js:59:11
at Compiler.<anonymous> (/home/serperga/falcon/falcon-project/frontend/node_modules/mocha-webpack/lib/webpack/createCompiler.js:72:7)
at Compiler.applyPlugins (/home/serperga/falcon/falcon-project/frontend/node_modules/tapable/lib/Tapable.js:61:14)
at Compiler.<anonymous> (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:226:13)
at Compiler.emitRecords (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:319:37)
at Compiler.<anonymous> (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:220:12)
at /home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:312:11
at Compiler.applyPluginsAsyncSeries (/home/serperga/falcon/falcon-project/frontend/node_modules/tapable/lib/Tapable.js:131:46)
at Compiler.afterEmit (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:309:8)
at Compiler.<anonymous> (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:304:14)
at /home/serperga/falcon/falcon-project/frontend/node_modules/webpack/node_modules/async/lib/async.js:52:16
at done (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/node_modules/async/lib/async.js:246:17)
at /home/serperga/falcon/falcon-project/frontend/node_modules/webpack/node_modules/async/lib/async.js:44:16
at /home/serperga/falcon/falcon-project/frontend/node_modules/graceful-fs/graceful-fs.js:43:10
at FSReqWrap.oncomplete (fs.js:114:15)
npm ERR! Test failed. See above for more details.
My package.json file is :
{
"name": "Frontent",
"version": "0.0.0",
"description": "frontent",
"repository": {
"type": "git"
},
"author": {
"name": "Vishu"
},
"license": "MIT",
"private": true,
"engines": {
"node": ">=6.4"
},
"scripts": {
"build": "cross-env NODE_ENV=production webpack --display-chunks",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
"clean": "del-cli target",
"heroku-postbuild": "npm run build",
"lint": "run-s lint:js lint:ts",
"lint:js": "eslint -c .eslintrc.yml *.js src server",
"lint:ts": "tslint 'main/src/**/*.ts'",
"prebuild": "npm run clean",
"pretest": "npm run lint -s",
"server": "cross-env NODE_ENV=development nodemon -w 'server/**/*.*' server/main.js",
"server:dev": "cross-env NODE_ENV=development webpack-dev-server --progress",
"start": "npm run server:dev",
"test": "mocha-webpack",
"test:watch": "mocha-webpack --watch",
"version": "npm run changelog && git add CHANGELOG.md",
"compodoc": "./node_modules/.bin/compodoc -p tsconfig.json"
},
"dependencies": {
"compression": "~1.6.2",
"express": "~4.14.0",
"helmet": "~2.2.0",
"serve-favicon": "~2.3.0",
"winston": "~2.2.0"
},
"devDependencies": {
"#angular/common": "2.0.1",
"#angular/compiler": "2.0.1",
"#angular/core": "2.0.1",
"#angular/forms": "2.0.1",
"#angular/http": "2.0.1",
"#angular/platform-browser": "2.0.1",
"#angular/platform-browser-dynamic": "2.0.1",
"#angular/router": "3.0.1",
"#compodoc/compodoc": "^1.0.0-beta.9",
"#types/chai": "^3.4.34",
"#types/core-js": "^0.9.34",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.41",
"#types/sinon": "^1.16.32",
"angular2-template-loader": "^0.4.0",
"autoprefixer": "~6.4.1",
"awesome-typescript-loader": "^2.2.4",
"chai": "^3.5.0",
"conventional-changelog-cli": "~1.2.0",
"copy-webpack-plugin": "~3.0.1",
"core-js": "~2.4.1",
"cross-env": "~3.0.0",
"css-loader": "~0.25.0",
"del-cli": "~0.2.0",
"eslint": "~3.6.0",
"extract-text-webpack-plugin": "2.0.0-beta.4",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "~2.22.0",
"immutable": "~3.8.1",
"jasmine-core": "~2.5.2",
"jsdom": "^9.8.3",
"json-loader": "~0.5.4",
"karma": "~1.3.0",
"karma-chrome-launcher": "~2.0.0",
"karma-jasmine": "~1.0.2",
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "~2.2.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sinon": "^1.0.5",
"karma-sourcemap-loader": "~0.3.7",
"karma-webpack": "~1.8.0",
"mocha": "^3.1.2",
"mocha-webpack": "^0.7.0",
"morgan": "~1.7.0",
"node-sass": "~3.10.0",
"nodemon": "~1.10.2",
"npm-run-all": "~3.1.0",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.7",
"postcss-loader": "~0.13.0",
"raw-loader": "~0.5.1",
"rimraf": "^2.5.2",
"rxjs": "5.0.0-beta.12",
"sass-loader": "~4.0.2",
"sinon": "^2.0.0-pre.4",
"style-loader": "~0.13.1",
"ts-helpers": "~1.1.1",
"ts-loader": "~0.8.2",
"tslint": "~3.15.1",
"typescript": "2.0.10",
"webpack": "2.1.0-beta.22",
"webpack-dev-server": "2.1.0-beta.4",
"webpack-md5-hash": "~0.0.5",
"webpack-merge": "^0.14.0",
"webpack-node-externals": "^1.5.4",
"zone.js": "~0.6.25"
}
}
I was using the webpack configuration tutorial in Angular 2 official configuration. This is mi project structure:
My mocha-test-shim.js configuration file is :
var jsdom = require('jsdom')
// setup the simplest document possible
var document = jsdom.jsdom('<!doctype html><html><body></body></html>');
// get the window object out of the document
var window = document.defaultView;
global.document = document;
global.HTMLElement = window.HTMLElement;
global.XMLHttpRequest = window.XMLHttpRequest;
require('core-js/es6');
require('core-js/es7/reflect');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
var testing = require('#angular/core/testing');
var browser = require('#angular/platform-browser-dynamic/testing');
testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
The webpack.common.js file is
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'polyfills': '../main/src/polyfills.ts',
'vendor': '../main/src/vendor.ts',
'app': '../main/src/main.ts'
},
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
exclude: helpers.root('main/src', 'app'),
loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
},
{
test: /\.css$/,
include: helpers.root('main/src', 'app'),
loader: 'raw'
}
]
}
};
And webpack.test.js is:
var helpers = require('./helpers');
module.exports = {
devtool: 'cheap-module-source-map',
entry: {
'app': '../main/src/main.ts'
},
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: 'null'
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
]
}
}
Any idea why am i getting this error?
I have been following the same path and eventually decided to not use webpack when running my tests.
If that is a viable option for you, you could try the following:
let mocha compile your files:
"scripts": {
"test": "mocha --compilers ts:ts-node/register app "
}
configure TestBed to read your resource from the file system
testing.TestBed.initTestEnvironment(
browser.BrowserDynamicTestingModule,
browser.platformBrowserDynamicTesting()
);
testing.TestBed.configureCompiler({
providers: [ {
provide:require('#angular/compiler').ResourceLoader,
useValue:{
get:function(url){
var content = require('fs').readFileSync('./app/lib/' + url)
.toString();
return content;
}
}
}],
useJit: true
});
You can see that approach applied in this working example:https://github.com/ericminio/learning-typescript/blob/master/app/angular.component.spec.ts
Hope that helps

Categories