I'm having lots of trouble getting the webpack DLL plugin to work for me. It's work in the sense that the dll is being extracted, and the other bundle sizes are reducing, however when run in the browser I get the following error:
module.js from dll-reference [name]:1 Uncaught TypeError: __webpack_require__(...) is not a function
at Object.../node_modules/webpack/buildin/module.js (module.js from dll-reference [name]:1)
at __webpack_require__ (bootstrap dff23196bbd9943d1e33:678)
at fn (bootstrap dff23196bbd9943d1e33:88)
at Object.../node_modules/node-libs-browser/node_modules/punycode/punycode.js (punycode.js:533)
at __webpack_require__ (bootstrap dff23196bbd9943d1e33:678)
at fn (bootstrap dff23196bbd9943d1e33:88)
at Object.../node_modules/url/url.js (url.js:24)
at __webpack_require__ (bootstrap dff23196bbd9943d1e33:678)
at fn (bootstrap dff23196bbd9943d1e33:88)
at Object.<anonymous> (client:6)
My config seems to be correct according to the docs and people on SO / github who have had the same error message.
webpack.development.js:
let fs = require('fs')
let path = require('path')
let webpack = require('webpack')
const { extractLegacy, extractModules } = require('./extract-text')
let defaultConfig = require('./webpack')
module.exports = Object.assign({}, defaultConfig, {
cache: true,
devtool: '#source-map',
entry: Object.assign(defaultConfig.entry, {
'webpack-dev-server/hot/client?https://app.local.app:8080/':
'webpack-dev-server/client?https://app.local.app:8080/',
'dll.vendor': '../build/dll.vendor.js'
}),
devServer: {
hot: true,
inline: true,
disableHostCheck: true,
host: 'app.local',
headers: { 'Access-Control-Allow-Origin': '*' },
https: {
key: fs.readFileSync(path.join(__dirname, '../l ocalssl/server.key')),
cert: fs.readFileSync(path.join(__dirname, '../localssl/server.crt'))
},
stats: {
cached: false,
cachedAssets: false,
children: false,
chunks: false,
chunkModules: false,
chunkOrigins: false,
depth: false,
errors: true,
errorDetails: true,
hash: false,
maxModules: 0,
modules: false,
providedExports: false,
reasons: false,
source: false,
timings: false,
usedExports: false
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
}),
extractLegacy,
extractModules,
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new webpack.DllReferencePlugin({
manifest: require('../build/vendor.json'),
name: '[name]',
context: path.resolve(__dirname, '../')
})
]})
webpack.dll.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: {
vendor: [path.resolve(__dirname, './vendors.js')]
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ['babel-loader?cacheDirectory']
}
]
},
output: {
path: path.resolve(__dirname, '../build'),
filename: 'dll.[name].js',
library: '[name]'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '../build', '[name].json'),
name: '[name]'
})
],
resolve: {
modules: ['node_modules']
}
}
package.json
{
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"dependencies": {
"#heroku/foreman": "^2.0.2",
"adm-zip": "^0.4.7",
"amqplib": "^0.5.2",
"autoprefixer": "7.1.3",
"aws-sdk": "^2.104.0",
"babel-cli": "6.16.0",
"babel-eslint": "^7.2.3",
"babel-loader": "6.2.5",
"babel-plugin-flow-react-proptypes": "^5.1.2",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-recharts": "1.1.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.22.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "6.16.0",
"babel-preset-es2015-node": "^6.1.1",
"babel-preset-react": "6.16.0",
"basic-auth": "1.1.0",
"bcrypt": "^1.0.3",
"body-parser": "1.17.2",
"bookshelf": "0.10.4",
"bookshelf-cascade-delete": "2.0.1",
"bookshelf-paranoia": "0.9.0",
"bootstrap": "3.3.7",
"bunyan": "1.8.10",
"bunyan-middleware": "0.4.0",
"change-case": "3.0.1",
"cheerio": "^1.0.0-rc.2",
"classnames": "2.2.5",
"compression": "1.7.0",
"connect-flash": "0.1.1",
"connect-redis": "3.3.0",
"cookie-parser": "^1.4.3",
"cookies-js": "^1.2.3",
"cron": "1.2.1",
"css-loader": "0.28.4",
"csvtojson": "^1.1.7",
"date-holidays": "^1.2.0",
"deep-equal": "^1.0.1",
"deep-freeze": "^0.0.1",
"deserialize-error": "^0.0.3",
"draft-convert": "^1.4.8",
"draft-extend": "^1.5.0",
"draft-js": "^0.10.1",
"elasticsearch": "^13.0.1",
"email-templates": "^2.7.1",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-flow-vars": "^0.5.0",
"express": "4.16.0",
"express-request-id": "1.4.0",
"express-session": "1.15.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"flow": "^0.2.3",
"forever": "^0.15.3",
"helmet": "3.8.0",
"http-errors": "1.6.1",
"ignore-styles": "^5.0.1",
"immutable": "^3.8.1",
"isomorphic-fetch": "2.2.1",
"jackrabbit": "git+https://github.com/leonlau/jackrabbit.git#da554347132757cd81c39037dd527ee258d088b5",
"jsdom": "^11.5.1",
"json-loader": "0.5.4",
"json2csv": "^3.7.3",
"knex": "0.13.0",
"knex-migrate": "^1.3.0",
"less": "2.7.1",
"less-loader": "2.2.3",
"lodash": "4.16.4",
"md5": "^2.2.1",
"microtime-nodejs": "^1.0.0",
"moment": "2.15.2",
"moment-range": "^2.2.0",
"mongo": "0.1.0",
"mongodb": "2.2.11",
"nconf": "0.8.4",
"newrelic": "^2.6.0",
"node-sass": "^4.5.3",
"normalizr": "^3.2.1",
"numeral": "^2.0.6",
"oauth": "git+https://github.com/Dakuan/node-oauth.git#24bc9bec128b5ca718eb5cd6e319cd22129a5158",
"oauth2-server": "^2.4.1",
"ordinal-numbers": "^1.0.3",
"pdfmake": "^0.1.32",
"pg": "6.1.6",
"pg-hstore": "2.3.2",
"pluralize": "^7.0.0",
"postcss": "6.0.10",
"postcss-loader": "1.1.1",
"prettyjson": "^1.2.1",
"proxyquire": "^1.7.11",
"pug": "2.0.0-beta6",
"quill": "^1.3.1",
"react": "^15.4.1",
"react-addons-perf": "^15.4.2",
"react-autosize-textarea": "^0.4.4",
"react-datepicker": "^0.40.0",
"react-dom": "^15.6.1",
"react-joyride": "^1.10.1",
"react-redux": "4.4.5",
"react-router": "2.8.1",
"react-router-redux": "4.0.7",
"react-scroll": "^1.5.5",
"react-scrollbar": "^0.5.1",
"react-slick": "^0.15.0",
"react-slider": "^0.7.0",
"react-sparklines": "^1.6.0",
"react-stripe-elements": "^1.0.1",
"react-table": "^6.6.0",
"react-textarea-autosize": "^5.0.6",
"react-toggle": "^4.0.2",
"react-tooltip": "^3.2.10",
"recharts": "^1.0.0-beta.1",
"recompose": "^0.24.0",
"redfour": "^1.0.2",
"redis": "2.6.3",
"redux": "3.6.0",
"redux-devtools-extension": "^1.0.0",
"redux-form": "^7.1.1",
"redux-logger": "2.7.0",
"redux-saga": "^0.16.0",
"redux-saga-test-plan": "^3.3.1",
"redux-thunk": "2.1.0",
"request": "^2.78.0",
"request-promise": "^4.2.2",
"rewire": "^2.5.2",
"s3": "^4.4.0",
"sass-loader": "^6.0.6",
"sendgrid": "4.7.1",
"serialize-error": "^2.1.0",
"simulant": "^0.2.2",
"snyk": "^1.41.1",
"soap": "^0.21.0",
"socket.io": "^2.0.2",
"socket.io-client": "^2.0.2",
"socket.io-cookie-parser": "^1.0.0",
"socket.io-redis": "^5.1.0",
"stripe": "^5.1.0",
"style-loader": "^0.19.1",
"url-loader": "0.5.7",
"url-parse": "^1.1.9",
"urlencode": "^1.1.0",
"uuid": "2.0.3",
"validate.js": "^0.11.1",
"velocity-animate": "^1.4.0",
"velocity-react": "^1.2.1",
"victory": "0.13.7",
"webpack": "^3.10.0",
"xml2json": "^0.11.0"
},
"devDependencies": {
"ava": "^0.24.0",
"babel-jest": "16.0.0",
"babel-register": "6.16.3",
"chromedriver": "^2.34.1",
"enzyme": "^2.7.0",
"eslint": "3.8.1",
"eslint-config-prettier": "2.9.0",
"eslint-plugin-flowtype": "^2.30.0",
"eslint-plugin-lodash-fp": "2.1.3",
"eslint-plugin-react": "6.4.1",
"fetch-mock": "5.5.0",
"flow-bin": "^0.57.2",
"husky": "^0.14.3",
"lint-staged": "^6.0.0",
"nightwatch": "^0.9.19",
"nock": "9.0.2",
"node-mocks-http": "^1.5.4",
"nodemon": "1.11.0",
"npm-run-all": "^4.1.1",
"nyc": "8.3.2",
"prettier": "1.9.2",
"ps-node": "^0.1.4",
"react-addons-test-utils": "^15.4.1",
"react-hot-loader": "3.0.0-beta.6",
"redux-mock-store": "^1.2.2",
"selenium-server-standalone-jar": "^3.8.1",
"sinon": "1.17.6",
"supertest": "2.0.1",
"webpack-dev-server": "^2.11.1",
"webpack-hot-middleware": "^2.21.0"
},
"ava": {
"require": [
"babel-register",
"babel-polyfill",
"ignore-styles"
],
"babel": "inherit"
},
"nyc": {
"extension": [
".jsx",
".js"
],
"include": [
"src"
],
"exclude": [
"tests",
"build",
"node_modules"
]
},
"engines": {
"node": "8.9.x",
"npm": "5.5.x",
"yarn": "1.3.2"
},
}
folder structure:
-- build
-- src
-- webpack
Related
I've been cleaning up my npm audit errors and after I was done I could not execute npm tun build anymore.
Error
ERROR in web/themes/custom/js/funds-chunk.js from Terser
Unexpected token: punc ()) [webpack://./node_modules/source-map-loader/dist/cjs.js!./frontend/js/shared/select2.countSelectionAdapter.js:18,0][web/themes/custom/js/funds-chunk.js:26214,4]
at ne (/node_modules/terser/dist/bundle.min.js:1:19592)
at c (/node_modules/terser/dist/bundle.min.js:1:28298)
at l (/node_modules/terser/dist/bundle.min.js:1:28389)
at f (/node_modules/terser/dist/bundle.min.js:1:28442)
at /node_modules/terser/dist/bundle.min.js:1:38167
at x (/node_modules/terser/dist/bundle.min.js:1:38198)
at O (/node_modules/terser/dist/bundle.min.js:1:34874)
at U (/node_modules/terser/dist/bundle.min.js:1:42405)
at me (/node_modules/terser/dist/bundle.min.js:1:48326)
at /terser/dist/bundle.min.js:1:49206
package.json
{
...
"scripts": {
"build": "webpack --config webpack.config.js --env production",
},
"devDependencies": {
"#babel/core": "^7.10.4",
"#types/jquery": "^3.5.1",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"image-webpack-loader": "^6.0.0",
"mini-css-extract-plugin": "^1.6.2",
"prettier": "2.8.1",
"sass": "1.32",
"sass-loader": "^9.0.2",
"scss-loader": "0.0.1",
"terser-webpack-plugin": "^3.0.6",
"ts-loader": "^8.0.18",
"typescript": "^4.2.3",
"webpack-cli": "^4.7.2",
"webpack-merge": "^5.0.8"
},
"dependencies": {
"#popperjs/core": "^2.9.2",
"#types/bootstrap": "^5.0.12",
"#types/googlemaps": "^3.43.3",
"#types/iframe-resizer": "^3.5.9",
"#types/js-cookie": "^3.0.0",
"#types/requirejs": "^2.1.32",
"autoprefixer": "^9.8.5",
"bootstrap": "^4.0.0",
"filemanager-webpack-plugin": "^8.0.0",
"fork-ts-checker-webpack-plugin": "^6.2.0",
"highcharts": "^9.3.3",
"highlight.js": "^10.1.1",
"iframe-resizer": "^3.5.5",
"jquery": "^3.5.1",
"jquery-quicksand": "^1.6.0",
"js-cookie": "^3.0.1",
"loader-utils": "^2.0.3",
"parsleyjs": "^2.9.2",
"popper.js": "^1.0.8",
"postcss-loader": "^3.0.0",
"query-string": "^7.0.1",
"select2": "^4.0.13",
"slick-carousel": "^1.8.1",
"source-map-loader": "^2.0.1",
"swiper": "^6.5.3 <6.8",
"tippy.js": "^6.2.6",
"webpack": "^5.30.0"
},
"overrides": {
"got": "12.1.0",
"semver-regex#<3.1.4": "3.1.4",
"semver-regex#>=4.0.0 <4.0.3": "4.0.3",
"trim-newlines": "4.0.1",
"minimist": "1.2.6",
"terser#<4.8.1": "4.8.1",
"terser#>=5.0.0 <5.14.2": "5.14.2",
"nth-check": "2.0.1",
"minimatch": "3.0.5"
}
}
webpack.config.prod.js
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'production',
devtool: 'source-map',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: false,
terserOptions: {
ecma: 5, // IE11
compress: true,
output: {
comments: false,
beautify: false
}
}
})
]
},
module: {
rules: [{
test: /images.*\.(jpg|jpeg|gif|png|svg|webp)$/i,
use: info => {
const theme = path.basename(info.issuer, path.extname(info.issuer));
return [{
loader: "file-loader",
options: {
outputPath: url => path.join('/web/themes/custom', theme, 'dist/images', url),
name: "[name].[ext]",
publicPath: '../images'
},
},
]
}
}]
}
};
I've looked into these:
https://github.com/webpack-contrib/terser-webpack-plugin/issues/114,
https://github.com/jantimon/html-webpack-plugin/issues/1262 but I do not use uglify or html-minifier.
https://github.com/webpack/webpack/issues/14662 updated webpack from 5.30.0 to version 5.75 did not help
Webpack 5 - "Unexpected token: punc (.)" after import axios adding mode: web didn't do a thing
the context is the following: I am learning unit testing using Jest. My current enviroment is Jest with Webpack as I am using ES6 Modules. In my current project, I'm only testing JavaScript logic, not the UI. Ideally, Jest would skip over my imported files and only test functions in my current file. The test suite was working as expected, until I imported a DOM rendering file into my main JS file (import './display.js'). I see this error in every test I run.
import './display.js';
import './style.css';
import {pubSub, ps} from './subscriptions.js';
import {Gameboard, tiles} from './gameboard.js'
If I don't add import './display.js', I get this error:
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
I did try installing jsdom as well, but nothing happens.
I also tried adding './display.js' to an excluded files list in my package.json, but that didn't work either.
I used:
collectCoverageFrom: ['!src/display.js']
This is my package.json:
{
"name": "battleship",
"jest": {
"collectCoverageFrom": [
"!src/display.js"
]
},
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "jest --coverage",
"build": "webpack",
"watch": "jest --watch *.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/itsaflamingo/Battleship.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/itsaflamingo/Battleship/issues"
},
"homepage": "https://github.com/itsaflamingo/Battleship#readme",
"devDependencies": {
"#babel/preset-env": "^7.18.6",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"jest": "^28.1.2",
"style-loader": "^3.3.1",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"acorn": "^8.7.1",
"acorn-import-assertions": "^1.8.0",
"ajv": "^6.12.6",
"ajv-keywords": "^3.5.2",
"ansi-regex": "^5.0.1",
"boolbase": "^1.0.0",
"browserslist": "^4.21.1",
"buffer-from": "^1.1.2",
"camel-case": "^4.1.2",
"caniuse-lite": "^1.0.30001361",
"chrome-trace-event": "^1.0.3",
"clean-css": "^5.3.0",
"clone-deep": "^4.0.1",
"colorette": "^2.0.19",
"commander": "^2.20.3",
"cross-spawn": "^7.0.3",
"css-select": "^4.3.0",
"css-what": "^6.1.0",
"cssesc": "^3.0.0",
"dom-converter": "^0.2.0",
"dom-serializer": "^1.4.1",
"domelementtype": "^2.3.0",
"domhandler": "^4.3.1",
"domutils": "^2.8.0",
"dot-case": "^3.0.4",
"electron-to-chromium": "^1.4.173",
"enhanced-resolve": "^5.10.0",
"entities": "^2.2.0",
"envinfo": "^7.8.1",
"es-module-lexer": "^0.9.3",
"escalade": "^3.1.1",
"eslint-scope": "^5.1.1",
"esrecurse": "^4.3.0",
"estraverse": "^4.3.0",
"events": "^3.3.0",
"fast-deep-equal": "^3.1.3",
"fast-json-stable-stringify": "^2.1.0",
"fastest-levenshtein": "^1.0.12",
"find-up": "^4.1.0",
"function-bind": "^1.1.1",
"glob-to-regexp": "^0.4.1",
"graceful-fs": "^4.2.10",
"has": "^1.0.3",
"has-flag": "^4.0.0",
"he": "^1.2.0",
"html-minifier-terser": "^6.1.0",
"htmlparser2": "^6.1.0",
"icss-utils": "^5.1.0",
"import-local": "^3.1.0",
"interpret": "^2.2.0",
"is-core-module": "^2.9.0",
"is-plain-object": "^2.0.4",
"isexe": "^2.0.0",
"isobject": "^3.0.1",
"jest-worker": "^27.5.1",
"jsdom": "^20.0.0",
"json-parse-even-better-errors": "^2.3.1",
"json-schema-traverse": "^0.4.1",
"kind-of": "^6.0.3",
"loader-runner": "^4.3.0",
"locate-path": "^5.0.0",
"lodash": "^4.17.21",
"lower-case": "^2.0.2",
"lru-cache": "^6.0.0",
"merge-stream": "^2.0.0",
"mime-db": "^1.52.0",
"mime-types": "^2.1.35",
"nanoid": "^3.3.4",
"neo-async": "^2.6.2",
"no-case": "^3.0.4",
"node-releases": "^2.0.5",
"nth-check": "^2.1.1",
"p-limit": "^2.3.0",
"p-locate": "^4.1.0",
"p-try": "^2.2.0",
"param-case": "^3.0.4",
"pascal-case": "^3.1.2",
"path-exists": "^4.0.0",
"path-key": "^3.1.1",
"path-parse": "^1.0.7",
"picocolors": "^1.0.0",
"pkg-dir": "^4.2.0",
"postcss": "^8.4.14",
"postcss-modules-extract-imports": "^3.0.0",
"postcss-modules-local-by-default": "^4.0.0",
"postcss-modules-scope": "^3.0.0",
"postcss-modules-values": "^4.0.0",
"postcss-selector-parser": "^6.0.10",
"postcss-value-parser": "^4.2.0",
"pretty-error": "^4.0.0",
"punycode": "^2.1.1",
"randombytes": "^2.1.0",
"rechoir": "^0.7.1",
"relateurl": "^0.2.7",
"renderkid": "^3.0.0",
"resolve": "^1.22.1",
"resolve-cwd": "^3.0.0",
"resolve-from": "^5.0.0",
"safe-buffer": "^5.2.1",
"schema-utils": "^3.1.1",
"semver": "^7.3.7",
"serialize-javascript": "^6.0.0",
"shallow-clone": "^3.0.1",
"shebang-command": "^2.0.0",
"shebang-regex": "^3.0.0",
"source-map": "^0.6.1",
"source-map-js": "^1.0.2",
"source-map-support": "^0.5.21",
"strip-ansi": "^6.0.1",
"supports-color": "^8.1.1",
"supports-preserve-symlinks-flag": "^1.0.0",
"tapable": "^2.2.1",
"terser": "^5.14.1",
"terser-webpack-plugin": "^5.3.3",
"tslib": "^2.4.0",
"update-browserslist-db": "^1.0.4",
"uri-js": "^4.4.1",
"util-deprecate": "^1.0.2",
"utila": "^0.4.0",
"watchpack": "^2.4.0",
"webpack-merge": "^5.8.0",
"webpack-sources": "^3.2.3",
"which": "^2.0.2",
"wildcard": "^2.0.0",
"yallist": "^4.0.0"
},
"keywords": []
}
This is my webpack.config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
display: './src/display.js',
subscriptions: './src/subscriptions.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Battleship',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
This is the test I am running for index.js:
import {Ship, Players, playerBoats} from './index';
test('factory function returns object', () => {
expect(Ship('Carrier', 5)).toMatchObject({
boatName: 'Carrier',
length: 5,
hitSpot: [],
sunk: false,
});
})
test('when hit, factory function returns modified object', () => {
expect(Ship('Destroyer', 2).isHit(1, playerBoats)).toMatchObject({
boatName: 'Destroyer',
coordinates: [],
length: 2,
hitSpot: [1],
sunk: false,
});
})
test('player can attack computer multiple times', () => {
expect(Players().Player().playerAttack(4)).toMatchObject({
boatName: 'Carrier',
coordinates: [2, 3, 4],
length: 5,
hitSpot: [2, 4],
sunk: false,
})
})
I am running Linux on Chromebook and using VS Code, I'm not sure if that makes a difference. I just want to be able to skip UI tests with Jest.
Came back to answer as I struggled with this for a while. My issue was that I was not separating my UI and logic, and jest does not accept DOM methods or selectors unless specified.
I am not able to understand the error in my react class component.
I have to use translation for that I have created below file.
import i18n from 'i18next';
// import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
i18n
// .use(LanguageDetector)
.use(initReactI18next)
.use(LanguageDetector)
.init({
// we init with resources
resources: {
en: {
translations: {
Accueil: 'Home',
Projets: 'Work',
Graphisme: 'Design',
Web: 'Web',
Contact: 'Contact',
// "Projets":"Work",
'Bienvenue sur notre Blog': 'Welcome to our Blog',
},
},
fr: {
translations: {
Accueil: 'Accueil',
Projets: 'Projets',
Graphisme: 'Graphisme',
Web: 'Web',
Contact: 'Contact',
// "Projets":"Projets",
'Bienvenue sur notre Blog': 'Bienvenue sur notre Blog',
},
},
},
fallbackLng: 'fr',
debug: true,
// have a common namespace used around the full app
ns: ['translations'],
defaultNS: 'translations',
keySeparator: false, // we use content as keys
interpolation: {
escapeValue: false,
},
});
export default i18n;
I am using in react component.
import React from 'react';
import i18n from '../../../i18n';
class LoginComponent extends React.Component {
constructor(props) {
super(props);
render(){
const { t } = this.props;
return(
{t('Accueil')}
)
}
}
I am not able to understand from where this error is coming.
Could you please, please help me on the same.
Below is the package.json file.
{
"name": "myapplication",
"version": "0.1.0",
"private": true,
"scripts": {
"test": "mocha --compilers js:babel-core/register --recursive",
"start": "dotenv -e .env -- webpack-dev-server --hot --define process.env.dev --inline --port 80 --host localhost",
"build": "webpack -p --config webpack.config.js --env.prod"
},
"dependencies": {
"axios": "^0.17.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"bootstrap": "^3.3.7",
"bowser": "^2.1.0",
"classnames": "^2.1.3",
"copy-webpack-plugin": "^4.2.1",
"core-js": "^2.5.4",
"create-react-class": "^15.7.0",
"css-hot-loader": "^1.3.4",
"css-loader": "^0.28.7",
"draft-js": "^0.10.5",
"extract-text-webpack-plugin": "^3.0.2",
"fbemitter": "^2.0.0",
"file-loader": "^1.1.5",
"findup-sync": "^0.1.2",
"font-awesome": "^4.7.0",
"html-loader": "^0.5.1",
"html-react-parser": "^0.4.2",
"html-webpack-plugin": "^2.30.1",
"html2canvas": "^1.0.0-alpha.10",
"i18next": "^21.6.3",
"i18next-browser-languagedetector": "^6.1.2",
"jquery": "^3.2.1",
"jspdf": "^1.3.5",
"moment": "^2.13.0",
"prop-types": "^15.7.2",
"randomstring": "^1.1.5",
"react": "^17.0.2",
"react-addons-test-utils": "^15.6.0",
"react-addons-update": "^15.6.0",
"react-anything-sortable": "^1.7.2",
"react-bootstrap": "^0.31.5",
"react-bootstrap-date-picker-thecodingmachine": "^5.0.1",
"react-bootstrap-native-slider": "^2.0.1",
"react-bootstrap-slider": "^2.0.0",
"react-bootstrap-table": "^4.1.5",
"react-color": "^2.13.8",
"react-datepicker": "1.6.0",
"react-dropzone": "^4.2.3",
"react-i18next": "^11.15.1",
"react-modal": "^3.1.2",
"react-router-dom": "^4.2.2",
"react-scrollable-anchor": "^0.6.1",
"react-select": "^1.0.0-rc.5",
"react-signature-pad": "^0.0.6",
"react-spinners": "^0.4.5",
"react-star-rating": "^1.4.2",
"react-stepzilla": "^4.6.3",
"react-textarea-autosize": "^5.1.0",
"react-toastify": "^3.1.0",
"react-toggle": "^4.0.2",
"react-transition-group": "^1.2.1",
"reactjs-localstorage": "0.0.5",
"reactstrap": "^4.8.0",
"reflux": "^6.4.1",
"style-loader": "^0.19.0",
"superagent": "^3.8.1",
"transform-class-properties": "^1.0.0-beta",
"url-loader": "0.6.2",
"xss": "^0.3.4"
},
"peerDependencies": {
"react": "^16.0.0",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"babel": "6.23.0",
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-register": "6.26.0",
"canvas": "1.6.7",
"css-loader": "^0.28.7",
"dotenv-cli": "2.0.1",
"draftjs-to-html": "^0.8.3",
"immutable": "^3.8.1",
"jsdom": "11.2.0",
"mocha": "^3.3.0",
"mocha-jsdom": "^1.1.0",
"node-libs-browser": "^2.0.0",
"node-sass": "^4.5.3",
"react-draft-wysiwyg": "1.10.12",
"react-hot-loader": "^1.2.7",
"react-tools": "0.13.3",
"sass-loader": "^6.0.6",
"source-map": "^0.6.1",
"style-loader": "^0.18.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.4"
}
I can provide more details if it helps.
Currently, I'm working on a vuetify v1.5 project. One of my dependency package (d3-flextree) does not work in the case of the 'babelHelpers is not defined' error.
What I've found says: "Use transform-runtime instead of the external-helpers plugin".
My .babelrc file is:
{
"presets": ["es2015", "stage-2"],
"plugins": [
"transform-runtime",
"transform-async-to-generator"
],
"comments": false
}
but .babelrc in ./node_module/d3-flextree is:
{
"presets": [
[
"es2015",
{ "modules": false }
]
],
"plugins": ["external-helpers"]
}
Should I override ./node_module/d3-flextree/.babelrc? if yes, how?
Is there any webpack trick?
My package.json
"dependencies": {
"axios": "^0.19.0",
"core-js": "^2.5.3",
"d3": "^5.7.0",
"d3-flextree": "^2.1.1",
"d3-flextree-v4": "^1.0.1",
"font-awesome": "^4.6.3",
"hchs-vue-charts": "^1.2.8",
"html-loader": "^1.1.0",
"html-webpack-externals-plugin": "^3.8.0",
"html2canvas": "^1.0.0-rc.5",
"ts-loader": "^7.0.5",
"vue": "^2.5.11",
"vue-color": "^2.7.1",
"vue-grid-layout": "^2.3.8",
"vue-i18n": "^8.22.1",
"vue-input-autowidth": "^1.0.10",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.1",
"vue-server-renderer": "^2.6.11",
"vue-template-compiler": "^2.5.11",
"vue2-editor": "^2.10.2",
"vuedraggable": "^2.23.2",
"vuetify": "^1.5.24",
"vuex": "^3.0.1",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"aspnet-webpack": "^2.0.1",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-2": "^6.18.0",
"babel-register": "^6.18.0",
"bootstrap": "^3.4.1",
"cross-env": "^3.1.3",
"css-loader": "^0.26.4",
"event-source-polyfill": "^0.0.7",
"extract-text-webpack-plugin": "^2.0.0-rc",
"file-loader": "^0.9.0",
"jquery": "^2.2.1",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^1.3.1",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"uglifyjs-webpack-plugin": "^2.1.3",
"url-loader": "^0.5.7",
"vue-loader": "^13.6.0",
"webpack": "^2.2.0",
"webpack-hot-middleware": "^2.12.2"
}
I've found a trick.
There is a CDN file for 'd3-flextree'. Just copy it into a file in the project and then replace the original npm package.
- import * as d3flex from "d3-flextree"
+ import * as d3flex from "../statics/scripts/d3-flextree.min"
After upgrading my project to Babel 7, running tests through Jest is throwing the following error. The tests used to run without any issues in Babel 6, but they are failing in Babel 7 with the following error
TypeError: wks is not a function
at Object.<anonymous>.module.exports (node_modules/core-js/modules/_fix-re-wks.js:16:16)
at Object.<anonymous> (node_modules/core-js/modules/es6.regexp.replace.js:4:25)
at Object.<anonymous> (node_modules/core-js/modules/es6.regexp.split.js:3:1)
at Object.<anonymous> (node_modules/core-js/modules/es6.symbol.js:7:1)
at Object.<anonymous> (node_modules/core-js/modules/_is-object.js:5:1)
at Object.<anonymous> (node_modules/core-js/modules/_inherit-if-required.js:3:16)
at Object.<anonymous> (node_modules/core-js/modules/es6.regexp.constructor.js:5:25)
at Object.<anonymous> (node_modules/core-js/modules/es6.regexp.match.js:3:1)
at Object.<anonymous> (node_modules/core-js/modules/es6.function.name.js:3:1)
at Object.<anonymous> (node_modules/core-js/modules/_wks.js:3:1)
at Object.<anonymous> (node_modules/core-js/modules/_add-to-unscopables.js:4:19)
at Object.<anonymous> (node_modules/core-js/modules/es6.array.iterator.js:3:24)
at Object.<anonymous> (node_modules/core-js/modules/web.dom.iterable.js:3:18)
at Object.<anonymous> (node_modules/regenerator-runtime/runtime.js:3:1)
Jest configuration
{
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react",
"<rootDir>/node_modules/react-dom",
"<rootDir>/node_modules/react-addons-test-utils",
"<rootDir>/node_modules/fbjs",
"enzyme"
],
"roots": [
"<rootDir>/__tests__"
],
"transformIgnorePatterns": [
"node_modules/(^generic-)/i", //a module matching this is throwing an error
"node_modules/react-infinite-scroller"
],
"setupFiles": [
"./jestsetup.js"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"testResultsProcessor": "./jestTrxProcessor",
"verbose": true
}
File babel.js.config
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"ie": 11
},
"useBuiltIns": "usage"
}
],
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-transform-runtime",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-json-strings",
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"#babel/plugin-proposal-function-sent",
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-numeric-separator",
"#babel/plugin-proposal-throw-expressions",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-transform-object-assign"
]
}
File package.json
"devDependencies": {
"#babel/cli": "^7.0.0",
"#babel/core": "^7.0.1",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-transform-object-assign": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-core": "7.0.0-bridge.0",
"babel-loader": "^8.0.0",
"body-parser": "^1.18.3",
"create-if-not-exist": "^0.0.2",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.1",
"eslint": "^4.13.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-defaults": "^9.0.0",
"eslint-config-rallycoding": "^3.2.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.4.0",
"exports-loader": "0.6.4",
"express": "^4.16.3",
"generic-redux-root": "^0.0.1",
"imports-loader": "0.7.1",
"jasmine": "^2.8.0",
"jest": "^23.4.1",
"jest-cli": "^23.4.1",
"jest-trx-results-processor": "^0.0.7",
"redux-mock-store": "^1.5.1",
"string-replace-webpack-plugin": "^0.1.3",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {
"#babel/polyfill": "^7.0.0",
"babel-jest": "^23.6.0",
"babel-plugin-add-module-exports": "^0.2.1",
"core-js": "^2.5.5",
"draft-js": "^0.10.5",
"es6-promise": "^3.3.1",
"flux": "^3.1.3",
"generic-api-fetch": "1.0.1",
"generic-http": "^1.0.2",
"generic-limited-textarea": "^1.1.0",
"generic-select": "^1.0.3",
"generic-throttled-select": "^1.0.3",
"lodash": "4.17.4",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"react": "16.2.0",
"react-addons-update": "15.6.2",
"react-datepicker": "^1.5.0",
"react-dom": "16.2.0",
"react-hot-loader": "3.1.3",
"react-infinite-scroller": "^1.2.0",
"react-redux": "5.0.6",
"react-select": "1.1.0",
"redux": "3.7.2",
"redux-logger": "3.0.6",
"redux-thunk": "2.2.0",
"reselect": "3.0.1",
"whatwg-fetch": "^2.0.4"
}
What am I doing wrong?