I am having this error when import
/export
JS class, but not with JS function
. So I want to seek help here to fix this problem.
I have this folder structure, with the following simple JS code:
src
├── scripts
│ ├── entries
│ │ └── main.js
│ └── lib
│ └── base.js
├── styles
│ └── main.css
├── package.json
├── babel.config.json
└── webpack.config.json
In main.js
:
import Base from "../lib/base"
new Base()
In base.js
:
class Base {
constructor () {}
}
export default Base
In babel.config.json
:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
],
[
"@babel/preset-react",
{}
]
]
}
In webpack.config.json
:
const ROOT = path.resolve(__dirname)
const ASSETS_DIR = path.join(ROOT, 'assets')
const SRC_DIR = path.join(ROOT, 'src')
const SCRIPT_ENTRIES_DIR = path.join(SCRIPTS_DIR, 'entries')
const VENDORS_DIR = path.join(ROOT, 'node_modules')
export default env => {
return {
entry: {
'entry-main': path.resolve(SCRIPT_ENTRIES_DIR, 'main.js')
},
output: {
filename: `[name].js?v=${Date.now()}`,
path: ASSETS_DIR
},
...
module: {
rules: [
{
test: /.m?js$/,
exclude: VENDORS_DIR,
use: {
loader: 'babel-loader'
}
}
]
},
}
}
In package.json
:
{
...
"scripts": {
...
"build": "webpack --env production --progress --color",
...
},
...
}
So when I run npm run build
in command line, there is this error:
ERROR in ./src/scripts/lib/base.js 1:0-38
Module not found: Error: Can't resolve 'core-js/modules/es.symbol.js' in '~/src/scripts/lib'
@ ./src/scripts/entries/main.js 1:0-28
But when I change base.js
into a function, running npm run build
will work fine:
const B = function () {}
export default B
Is there any ways for me to export/import class
instead of function
, since I need it to be base class and the other classes could extend from it.