Comments (12)
Minimal Reproducing in this case
// rspack config
module.exports = {
module: {
rules: [
{
test: /\.c?js$/,
// reproducing requirements 1 - for the `.cjs` file
type: 'javascript/auto',
},
]
},
optimization: {
// reproducing requirements 2
concatenateModules: true,
},
plugins: [
// reproducing requirements 3
new rspack.CssExtractRspackPlugin(),
]
};
Workaround
apply type: 'javascript/esm'
for the foo.cjs
file that is actually an esm file
from rspack.
@colinaaa could you please try rspack 0.7.5-canary-129960e-20240620181737
from rspack.
0.7.5-canary-129960e-20240620181737
works well in our project. Thanks!
from rspack.
Why is it considered as an ESM file?
from rspack.
Setting it to type: 'javascript/esm'
only prevents rspack from panic. But the result is not correct:
> [email protected] build:rspack
> RSPACK=1 pnpm rspack -c ./config.mjs
WARNING in ./src/index.js
⚠ HarmonyLinkingWarning: export 'foo' (imported as 'foo') was not found in './foo.cjs' (module has no exports)
╭─[1:1]
1 │ import * as foo from "./foo.cjs";
2 │
3 │ console.log(foo.foo);
· ───────
╰────
Rspack compiled with 1 warning in 11 ms
rspack-concatenated-repro on main [!] is 📦 v1.0.0 via v22.3.0
❯ node rspack-dist/main.js
undefined
from rspack.
strict esm use cjs should use import foo from foo.cjs
from rspack.
With the following configuration:
module: {
parser: {
javascript: {
exportsPresence: 'warn'
}
},
rules: [
/* config.module.rule('js') */
{
test: /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/,
type: 'javascript/esm',
},
]
},
it still not works
❯ npm run build:rspack
> [email protected] build:rspack
> RSPACK=1 pnpm rspack -c ./config.mjs
WARNING in ./src/index.js
⚠ HarmonyLinkingWarning: export 'default' (imported as 'foo') was not found in './foo.cjs' (module has no exports)
╭─[1:1]
1 │ import foo from "./foo.cjs";
2 │
3 │ console.log(foo.foo);
· ───────
╰────
Rspack compiled with 1 warning in 8 ms
rspack-concatenated-repro on main [!] is 📦 v1.0.0 via v22.3.0
❯ node rspack-dist/main.js
/Users/bytedance/rspack-concatenated-repro/rspack-dist/main.js:41
console.log(foo_namespaceObject["default"].foo);
^
TypeError: Cannot read properties of undefined (reading 'foo')
at /Users/bytedance/rspack-concatenated-repro/rspack-dist/main.js:41:44
at Object.<anonymous> (/Users/bytedance/rspack-concatenated-repro/rspack-dist/main.js:43:3)
at Module._compile (node:internal/modules/cjs/loader:1460:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1544:10)
at Module.load (node:internal/modules/cjs/loader:1275:32)
at Module._load (node:internal/modules/cjs/loader:1091:12)
at wrapModuleLoad (node:internal/modules/cjs/loader:212:19)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:158:5)
at node:internal/main/run_main_module:30:49
Node.js v22.3.0
The output looks like this:
var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// NAMESPACE OBJECT: ./src/foo.cjs
var foo_namespaceObject = {};
__webpack_require__.r(foo_namespaceObject);
;// CONCATENATED MODULE: ./src/foo.cjs
Object.defineProperty(exports, "__esModule", { value: true });
exports.foo = void 0;
Object.defineProperty(exports, "foo", {
enumerable: true,
get: function () {
return "foo";
},
});
;// CONCATENATED MODULE: ./src/index.js
console.log(foo_namespaceObject["default"].foo);
from rspack.
If I use javascript/auto
with import foo from './foo.cjs
, Rspack will panic
from rspack.
rspack/crates/rspack_plugin_extract_css/src/parser_and_generator.rs
Lines 45 to 52 in d73b4fa
@JSerFeng sorry for tagging you, but could you please help with this issue.
I just found that this issue might be related to these lines but not sure. Any reason why get_concatenation_bailout_reason
is not inherited?
from rspack.
Css Module has same waring, and namedExports not work
⚠ HarmonyLinkingWarning: export 'default' (imported as 'styles') was not found in './App.module.css' (possible exports: card, logo, logo-spin, react, read-the-docs, root)
╭─[6:1]
6 │ import "./App.css";
7 │ import styles from './App.module.css';
8 │ console.log("suming", styles);
· ──────
9 │ function App() {
10 │ _s();
╰────
parser: {
css: {
namedExports: false,
},
// css/auto 模块的解析器选项
'css/auto': {
namedExports: false,
},
// css/module 模块的解析器选项
'css/module': {
namedExports: false,
},
'javascript/auto': {
exportsPresence: false,
importExportsPresence: false,
reexportExportsPresence: false,
}
}
from rspack.
hi @dpzxsm , parser config for types css/*
will only take effect when experiments.css
is true
.
If you're using CssExtractRspackPlugin
, please configure css modules with css-loader
's options, e.g.,
{
test: /\.css$/,
use: [
rspack.CssExtractRspackPlugin.loader,
{
loader: "css-loader",
options: {
modules: {
auto: true,
namedExport: false,
},
},
},
],
},
from rspack.
@xc2 experiments.css is true , my rspack's vesion is 0.7.4 and I'm not use CssExtractRspackPlugin. I has try 0.7.5-canary-35f8542-20240619004508
, also not work.
from rspack.
Related Issues (20)
- [Bug]: Panic occurred at runtime `[email protected]` HOT 3
- [Bug]: production build with mjs empty module results in error
- [Bug]: Removing CSS File while runnning `npm run dev` results in compile error HOT 1
- [Feature]: Module.addBlock API HOT 1
- [Tracking]: enable biome lint and format rules HOT 1
- [Bug]: `html-rspack-plugin` child compilation fail when used with `case-sensitive-paths-webpack-plugin` HOT 2
- [Bug]: Panic occurred at runtime HOT 3
- [Bug]: webpackMissingModule with relative import HOT 3
- [Bug]: 也更新后报错 HOT 1
- [Bug]: Some `output.copy` glob patterns fail
- [Bug]: should have dependency id HOT 21
- [Bug]: plugin compiles fine in webpack, but does not work in rspack HOT 2
- [Feature]: Add chunks raised for imports in third-party npm packages, which need to be captured in ouput.chunkFilename HOT 2
- [Tracking]: JS -> TS refactor the remaining .js file to .ts and esm HOT 1
- [Bug]: HMR update not found
- [Bug]: Panic occured at runtime. HOT 1
- [Bug Report]: css-loader errors occurred while using tailwindcss. HOT 2
- JavaScript parsing error: Expression expected HOT 2
- [Bug]: `webpack-test/statsCases/runtime-specific-used-exports` randomly panics
- [Bug]: module federation plugin makes dev/build/HMR a lot slower
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rspack.