Develop Reference

How to fix unexpected Webpack error when including #popperjs/core and eslint in code

I am having a problem with #popperjs/core not working in my normal javascript environment.
Here is some code that demos my problem
index.js
import { createPopper } from '#popperjs/core';
console.log("Hello world!");
package.json
{
"name": "popperjsproblem",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"dependencies": {
"#popperjs/core": "^2.10.2"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/plugin-proposal-class-properties": "^7.14.5",
"#babel/preset-env": "^7.15.8",
"#babel/eslint-parser": "^7.15.8",
"babel-loader": "^8.2.2",
"eslint": "^8.0.1",
"eslint-import-resolver-webpack": "^0.13.1",
"eslint-webpack-plugin": "^3.0.1",
"eslint-plugin-import": "^2.20.0",
"webpack": "^5.58.2",
"webpack-cli": "^4.9.0"
},
"babel": {
"presets": [
"#babel/preset-env"
]
},
"eslintConfig": {
"extends": [
"eslint:recommended"
],
"root":true,
"parser": "#babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"no-debugger": "off",
"no-console": "off",
"no-unused-vars": "warn"
},
"settings": {
"import/resolver": "webpack"
}
}
}
webpack.config.js
const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin');
const esLintLoaderOptions = {
extensions: [`js`, `jsx`],
exclude: [
`/node_modules/`
]
};
module.exports = {
entry: "./index.js",
mode: "development",
target:"web",
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/dist/",
},
stats: {
colors: true,
},
devtool: "cheap-module-source-map",
plugins: [
new ESLintPlugin(esLintLoaderOptions)
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
],
}
};
When I run "npm run build" I get the following error
ERROR in Failed to load config "./.config/eslint.config" to extend from.
Referenced from: {project directory}\node_modules\#popperjs\core\package.json
If I were to import another 3rd party library instead of #popperjs/core in index.js and run "npm run build" no errors are displayed, the code is correctly transpiled and put in a file called main.bundle.js which is found in the dist folder. I would expect exactly the same to happen with #popperjs/core. So my question is is it possible to change something so that I can import #popperjs/core and get the same behaviour as you get with other libraries. The problem appears to be to do with ESLint. I would ideally like to keep ESLint because it is obviously a very useful tool in development.
When researching the problem I came across this link https://github.com/popperjs/popper-core/issues/1105 which appears to describe a problem similar to mine. However I can't see how I would apply the solutions given my set up.

Strangely the solution appears to be to remove node_modules from the eslint-webpack-plugin options. I.e. change
const esLintLoaderOptions = {
extensions: [`js`, `jsx`],
exclude: [
`/node_modules/`
]
};
to
const esLintLoaderOptions = {
extensions: [`js`, `jsx`]
};
The eslint-webpack-plugin docs say that node_modules are excluded by default so must be something to do with that.

Jest encountered an unexpected token - React with jest and enzyme

tsconfig.json
{
"extends": "./node_modules/pcf-scripts/tsconfig_base.json",
"compilerOptions": {
"typeRoots": ["node_modules/#types"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"sourceMap": true
},
"include": ["./ConsumptionSummaryComponent/src", "ConsumptionSummaryComponent/globals.d.ts"],
"exclude": ["./node_modules/pcf-scripts/./node_modules"]
}
.babelrc file
{
"env": {
"test": {
"plugins": [
"#babel/plugin-transform-modules-commonjs"
]
}
}
}
Package.json
{
"name": "pcf-project",
"version": "1.0.0",
"description": "Project containing your PowerApps Component Framework (PCF) control.",
"scripts": {
"build": "pcf-scripts build",
"clean": "pcf-scripts clean",
"rebuild": "pcf-scripts rebuild",
"start": "pcf-scripts start",
"test": "jest",
"test:watch": "jest --watch"
},
"jest": {
"roots": [
"<rootDir>/ConsumptionSummaryComponent/src"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
"^.+\\.tsx?$": "ts-jest",
"^.+\\.jsx$": "ts-jest"
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"testEnvironment": "node",
"setupFiles": [
"<rootDir>/ConsumptionSummaryComponent/src/setupEnzyme.ts"
],
"globals": {
"ts-jest": {
"tsConfig": "tsconfig.json",
"babelConfig": "<rootDir>/ConsumptionSummaryComponent/.babelrc",
"diagnostics": {
"ignoreCodes": [
"TS1149"
]
}
}
},
"collectCoverage": true,
"coverageReporters": ["lcov"],
"coverageDirectory": "test-coverage",
"collectCoverageFrom": [
"<rootDir>/ConsumptionSummaryComponent/src/components/**/*.{ts,tsx}",
"<rootDir>/ConsumptionSummaryComponent/src/services/**/*.{ts,tsx}"
],
"coverageThreshold": {
"global": {
"branches": 0,
"functions": 0,
"lines": 0,
"statements": 0
}
},
"moduleNameMapper": {
"ts-jest": "<rootDir>/node_modules/ts-jest",
"office-ui-fabric-react/lib/": "office-ui-fabric-react/lib-commonjs/",
"#uifabric/fluent-theme/lib/": "#uifabric/fluent-theme/lib-commonjs/",
"#uifabric/styling/lib/": "#uifabric/styling/lib-commonjs/",
"expose-loader\\?jQuery\\!jquery": "<rootDir>/ConsumptionSummaryComponent/src/blank-mock",
"^style-loader.*$": "<rootDir>/ConsumptionSummaryComponent/src/blank-mock",
"^.*.svg$": "<rootDir>/src/blank-mock.js"
},
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
"dependencies": {
"#apollo/react-hooks": "^3.1.3",
"#common-pcf/sdk": "file:../sdk/common-pcf-sdk-1.0.0.tgz",
"#microsoft/applicationinsights-web": "^2.3.1",
"#types/node": "^10.12.18",
"#types/powerapps-component-framework": "^1.2.0",
"#uifabric/icons": "^7.3.2",
"apollo-boost": "^0.4.7",
"cra-template-typescript": "^1.0.0",
"enzyme": "^3.11.0",
"graphql": "^14.6.0",
"graphql-tag": "^2.10.2",
"office-ui-fabric-react": "^7.84.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
},
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"#graphql-codegen/introspection": "1.12.1",
"#graphql-codegen/typescript": "1.12.1",
"#graphql-codegen/typescript-operations": "1.12.1",
"#graphql-codegen/typescript-react-apollo": "1.12.1",
"#types/enzyme": "3.10.5",
"#types/enzyme-adapter-react-16": "1.0.6",
"#types/jest": "^25.1.1",
"#types/react": "^16.9.19",
"#types/react-dom": "^16.9.5",
"babel-jest": "^25.1.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "3.4.4",
"jest": "^25.1.0",
"pcf-scripts": "^1",
"pcf-start": "^1",
"source-map-loader": "^0.2.4",
"ts-jest": "25.1.0",
"ts-loader": "^6.2.1"
}
}
SetupEnzyme.ts
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
testcase
import * as React from "react";
import { shallow } from "enzyme";
import { DataModel } from "../../utils/DataModel";
import { styles } from "../../utils/style";
import { Enums } from "../../utils/enums";
import SummaryComponent from "../SummaryComponent";
const testProp: DataModel.ProductGroupSummaryViewModel = {
consumptionText: "300 Subscriptions . 200 Active . $500 ACR",
iconName: Enums.ProductTypeLogo.azureLogo,
iconStyle: styles.AzureIcon,
productGroupName: Enums.ProductTypeName.azureProductTypeName,
isEnabled:true,
order: 1
};
it("Should render the Summary component for the test Product Group Summary", () => {
const result = shallow(<SummaryComponent {...testProp} />);
expect(result).toMatchSnapshot();
});
Error
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
C:\DemandResponse\CSM-RCMND-DIGI-DigExp-UXWidgets\CSM-RCMND-DIGI-DigExp-UXWidgets\msp_RecommendationComponentSolution\ConsumptionSummaryComponent\ConsumptionSummaryComponent\src\setupEnzyme.ts:1
import { configure } from 'enzyme';
^^^^^^
SyntaxError: Cannot use import statement outside a module
It is working in other system but not in my system. Every thing is latest in my system.
Kindly help me with the issue

missing preset and no need for enzymeSetup to be ts file
would take the jest configuration to stand alone file to make life easier :)
jest.config.js
module.exports = {
collectCoverageFrom: [
'<rootDir>/src/**/*.ts',
'<rootDir>/src/**/*.tsx',
],
moduleDirectories: ['node_modules', 'src'],
testPathIgnorePatterns: ['<rootDir>/test/setup/'],
setupFilesAfterEnv: ['<rootDir>/test/setup/setupEnzyme.js'],
transform: {
'\\.jsx?$': 'babel-jest',
},
transformIgnorePatterns: ['<rootDir>/node_modules/'],
testRegex: 'test/.*\\.test\\.tsx?$',
preset: 'ts-jest',
moduleFileExtensions: ['ts', 'tsx', 'js'],
moduleNameMapper: {
'\\.(png)$': '<rootDir>/test/setup/fileMock.js',
'\\.(css|less)$': '<rootDir>/test/setup/fileMock.js',
},
};
collect coverage only for ts and tsx files.
transform all js and jsx files via babel-jest
apply preset ts-jest for ts and tsx files
mock styles and images with plain empty js file.
setupEnzyme.js
require('#babel/polyfill');
const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
Enzyme.configure({ adapter: new Adapter() });

Jest importing re-exported named exports

I'm trying to test modules which import re-exported named exports. Basic import statement work properly (both default and named) except the case the title suggests.
A repro-repo: https://github.com/bali182/babel-jest-export-everything-bug
(I think it's a problem with Jest but after opening an issue devs suggested that it's a configuration problem, so I'm asking here)
To demonstrate the issue here:
package.json
{
"name": "babel-jest-export-everything-bug",
"scripts": {
"test": "jest --config .jestrc.json"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-jest": "^21.2.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"jest": "^21.2.1"
}
}
.babelrc
{
"presets": [
[ "es2015", { "modules": "commonjs" } ],
"stage-0",
"react"
],
"plugins": [
"transform-decorators-legacy",
"transform-runtime"
]
}
.jestrc.json
{
"transform": {
"^.+\\.jsx?$": "babel-jest"
}
}
namedExports.js
export const x = 1
export const y = 2
export const z = 3
reExports.js
export * from './namedExports'
export default { hello: 'world' }
reExports.test.js
import Foo, { x, y, z } from './reExports'
describe('testing re-exports', () => {
it('will never get to this method', () => {
expect(x).toBe(1)
})
})
Which then fails with
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
at Object.<anonymous> (src/reExports.test.js:1:120)
at Generator.next (<anonymous>)
Any suggestions what am I doing wrong here?

solution
this happens due to transform-runtime plugin, in order to fix it, just updated your .babelrc file with
["transform-runtime", { "polyfill": false }]
see example of my file:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
"jsx-vue-functional",
"transform-vue-jsx", ["transform-runtime", { "polyfill": false }],
"transform-decorators-legacy",
"lodash"
],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [
"transform-vue-jsx",
"transform-es2015-modules-commonjs",
"dynamic-import-node",
"transform-decorators-legacy"
]
},
"cli": {
"presets": ["env", "stage-2"],
"plugins": [
[ "babel-plugin-webpack-alias", { "config": "./aliases.config.js" } ],
"transform-vue-jsx",
"transform-es2015-modules-commonjs",
"dynamic-import-node",
"transform-decorators-legacy"
]
}
}
}

React Hot Loader seems to work but doesn't update. [babel-preset-env]

I tried to set up a minimal project which utilises the newest versions of Webpack, React, Babel and React Hot Loader.
I have the same issue as described here. However the only difference is that I am using (beside solely the stuff mentioned above) babel-preset-env instead of babel-preset-es2015, thus the fix does not apply for me.
In short: Everything works, React Hot Loader detects changes but the components are not rerendered and the changes are not applied to the website.
You can find the complete project here. (yarn install/yarn start should get it started) You can reproduce the behaviour by changing the testString in /components/App.js and saving the file.
What am I doing wrong?
webpack.config.js
var webpack = require('webpack')
module.exports = {
entry: [
'react-hot-loader/patch',
'./src/index.js'
],
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
}
}
]
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
}
.babelrc
{
"presets": [
"react",
[ "env", {
"targets": {
"browsers": "> 10%"
}
}]
],
"plugins": ["react-hot-loader/babel"]
}
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from '../components/App'
const render = Component => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById('app'),
)
}
render(App)
if (module.hot) {
const NextApp = require('../components/App').default
module.hot.accept('../components/App', () => { render(NextApp) })
}
package.json
{
"name": "minimal-react",
"version": "0.1.0",
"description": "minimal react",
"main": "index.js",
"repository": "https://github.com/PeterKey/minimal-react.git",
"dependencies": {
"path": "^0.12.7",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"react-hot-loader": "^3.1.3"
},
"scripts": {
"start": "webpack-dev-server --progress --colors --config ./webpack.config.js"
}
}

Okay I realised that I simply need to set the {"modules": false} property for the "env" preset the same way as for the "es2015" preset.
.babelrc
{
"presets": [
"react",
[ "env", {
"modules": false,
"targets": {
"browsers": "> 10%"
}
}]
],
"plugins": ["react-hot-loader/babel"]
}

[React-Native][Jest]SyntaxError: Unexpected token import

It seems babel transform works in my testcase code, but es6 syntax in node_modules does not.
Error
environment
npm 4.5
MacOS Sierra
jest config
{
"preset": "react-native",
"globals": {
"__DEV__": true
},
"transform": {
"^.+\\.js$": "babel-jest"
}
}
babelrc
{
"env": {
"test": {
"presets": ["react-native"],
"plugins": [["import", { "libraryName": "antd-mobile" }]]
},
"development": {
"presets": ["react-native"],
"plugins": [["import", { "libraryName": "antd-mobile" }]]
},
"production": {
}
}
}
testcase
import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';
import Index from '../index.ios.js';
it('renders correctly', () => {
const tree = renderer.create(
<Index />
);
});
package.json
{
"private": true,
"scripts": {
"web": "roadhog server",
"build-web": "cross-env NODE_ENV=production roadhog build",
"start": "react-native start",
"ios": "cross-env NODE_ENV=development node themes/theme.rn.config.js && react-native run-ios",
"android": "cross-env NODE_ENV=development node theme/theme.rn.config.js && react-native run-android",
"lint": "eslint --ext .js src test",
"precommit": "npm run lint",
"test": "cross-env NODE_ENV=test jest --config .jest.config.json --no-cache"
},
"engines": {
"install-node": "6.9.2"
},
"theme": "./themes/theme.web.config.js",
"dependencies": {
"antd-mobile": "^1.0.8",
"babel-runtime": "^6.9.2",
"dva": "^1.2.1",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"rc-form": "^1.3.0",
"react": "15.4.2",
"react-dom": "15.4.2",
"react-native": "0.42.3",
"react-native-chart": "^1.0.8-beta",
"react-native-gesture-password": "^0.2.0",
"react-native-scrollable-tab-view": "^0.7.4",
"react-native-smart-gesture-password": "^2.1.0",
"react-navigation": "^1.0.0-beta.7",
"recharts": "^0.21.2",
"socket.io-client": "^1.7.3"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-jest": "^19.0.0",
"babel-plugin-dva-hmr": "^0.3.2",
"babel-plugin-import": "^1.1.1",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-react-native": "^1.9.1",
"cross-env": "^4.0.0",
"eslint": "^3.12.2",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.8.0",
"expect": "^1.20.2",
"husky": "^0.13.3",
"jest": "^19.0.2",
"less-vars-to-js": "^1.1.2",
"postcss-pxtorem": "^4.0.0",
"react-test-renderer": "15.4.2",
"redbox-react": "^1.3.2",
"roadhog": "^0.6.0-beta1"
}
}
debug message
jest version = 19.0.2
test framework = jasmine2
config = {
"automock": false,
"bail": false,
"browser": false,
"cacheDirectory": "/var/folders/h3/bfmnzb_j3zg3pdffgps1w3vh0000gn/T/jest",
"clearMocks": false,
"coveragePathIgnorePatterns": [
"/node_modules/"
],
"coverageReporters": [
"json",
"text",
"lcov",
"clover"
],
"expand": false,
"globals": {
"__DEV__": true
},
"haste": {
"defaultPlatform": "ios",
"platforms": [
"android",
"ios",
"native"
],
"providesModuleNodeModules": [
"react-native"
]
},
"moduleDirectories": [
"node_modules"
],
"moduleFileExtensions": [
"js",
"json",
"jsx",
"node"
],
"moduleNameMapper": [
[
"^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$",
"RelativeImageStub"
],
[
"^React$",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react"
]
],
"modulePathIgnorePatterns": [
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react-native/Libraries/react-native/",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react-native/packager/"
],
"noStackTrace": false,
"notify": false,
"preset": "react-native",
"resetMocks": false,
"resetModules": false,
"roots": [
"/Users/erickim/Documents/Develop/react/glfm"
],
"snapshotSerializers": [],
"testEnvironment": "/Users/erickim/Documents/Develop/react/glfm/node_modules/jest-environment-node/build/index.js",
"testMatch": [
"**/__tests__/**/*.js?(x)",
"**/?(*.)(spec|test).js?(x)"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"testRegex": "",
"testResultsProcessor": null,
"testURL": "about:blank",
"timers": "real",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element)"
],
"useStderr": false,
"verbose": null,
"watch": false,
"setupFiles": [
"/Users/erickim/Documents/Develop/react/glfm/node_modules/babel-polyfill/lib/index.js",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react-native/jest/setup.js"
],
"transform": [
[
"^.+\\.js$",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/babel-jest/build/index.js"
]
],
"rootDir": "/Users/erickim/Documents/Develop/react/glfm",
"name": "005c8bf9b4d78dfa0bb0e32c0c55b0fb",
"testRunner": "/Users/erickim/Documents/Develop/react/glfm/node_modules/jest-jasmine2/build/index.js",
"cache": false,
"watchman": true
}

I figured it out. By default jest doesn't transform ES6 js code from node_modules. In my case, the package react-navigation module need to be translated. So I added transformIgnorePatterns to my jest configuration and everything worked:
{
"preset": "react-native",
"setupFiles": ["./test/setup.js"],
"globals": {
"__DEV__": true
},
"transform": {
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!react-native|react-navigation)/"
]
}
https://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns-customization

The problem is that node doesn't understand ES6 modules and JEST is node process, so using import inside your test throw this error. Instead of babel we specifically tell Webpack to transcompile ES6 modules.So, we can fix this error by telling babel that when we are in testing scenario please combile ES6 modules by using below babel configuration settings
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
you can download this babel plugin by npm
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs
Hopefully this will fix your problem.