tsify + babelify + browserify with threejs modules: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (9:0) #286
Comments
|
In your babel config, I think you're looking for the Browserify transforms only run on "local" code (not inside node_modules) by default, to encourage more self-contained modules in the ecosystem. To allow transforms to run on files inside node_modules, use |
|
Hello @goto-bus-stop Thanks a lot for the reply. Good point, the modules should be commonjs from what I can tell. I changed my babelrc and gulp file to the following: {
"presets": [
["@babel/preset-env",
{
"targets": {
"modules": "commonjs"
}
}
],
],
"plugins": ["@babel/plugin-transform-modules-commonjs"], // Tried it with and without the plugin
"extensions": [ ".js", ".ts", ".tsx" ]
}function buildBundle() {
return browserify({
debug: true
})
.add("./src/main.ts")
.plugin(tsify, { target: 'es6'})
.transform(babelify, {"compact": false, "global": "true"}) // compact false since three.js is larger than 500kb
.bundle()
}Sadly I still get the same error: Any idea what else I can try? |
|
Oh, I think babel in v7 also changed how its babelrc resolution works, so a local babelrc is no longer used for modules inside node_modules(?). You might try: b.transform(babelify, { global: true, plugins: ['@babel/plugin-transform-modules-commonjs'] })that should not be affected by the new babelrc resolution. you can then use .babelrc only for the transforms you need in your own code. You can also add https://www.npmjs.com/package/tfilter to optimize things a bit and only transform the three.js modules: b.transform(
tfilter(babelify, { include: /\/three\/examples\/jsm/ }),
{ global: true, plugins: ['@babel/plugin-transform-modules-commonjs'] }
) |
|
Wow, thanks a lot for the quick response! function buildBundle() {
return browserify({
debug: true
})
.add("./src/main.ts")
.plugin(tsify, { target: 'es6'})
.transform(babelify, { global: true, presets: ["@babel/preset-env"], plugins: ['@babel/plugin-transform-modules-commonjs'] })
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(terser())
.pipe(gulp.dest("dist"));
}I tried it with and without the preset setting. Thanks also for the info with optimizing. I will do that once the pipeline works again :) |
|
you're missing a .bundle() call between transform and pipe to start the bundling: .transform(babelify, ...)
.bundle()
.pipe(source(...)) |
|
Oh, just saw that as well. 😊 It works again, thank you so much for your guidance! |
JohannesDeml
changed the title
|
Sorry to post once again, but sadly the new setup created a problem: It seems to me like three.js is now included two times in the bundle. When I'm counting for specific lines of code in the new bundle I always get two matches (for the bundles I created before babel it was only one hit). Also the heap size seems to fit with the theory and the problem described here. That being said, I guess the problem could be solved with defining tfilter correctly to only run on the jsm folder. I tried the following: b.transform(
tfilter(babelify, { include: /\/three\/examples\/jsm/ }),
{ global: true, plugins: ['@babel/plugin-transform-modules-commonjs'] }
)b.transform(
tfilter(babelify, { include: "*/three/examples/jsm*" }),
{ global: true, plugins: ['@babel/plugin-transform-modules-commonjs'] }
).transform(babelify,
{ compact: false,
only: [
"./src",
"./node_modules/three/examples/jsm"
],
plugins: ['@babel/plugin-transform-modules-commonjs'],
sourceMaps: false })For all of them I get the same error again: Is there something other than tfilter you can recommend or what is wrong with the configuration you suggested? folder structure: -dist/bundle.js |
|
Try adding |
Thanks for the suggestion, I added it to the config and to the gulpfile, sadly it seems to change nothing. I did solve the tfilter riddle: You need to use backslashes for windows paths, and the jsm are also in the build folder which also needs to be included. That however didn't solve my problem with a lot of things being included twice. Is this a problem on my pipeline or is this maybe caused by threejs? |
|
three.js includes different bundle versions, so it might be that you're accidentally including the commonjs version somewhere and the ESM version somewhere else. |
That sounds quite likely. On the other hand I don't know how that would happen... From what I can tell from the Documentation I can import the commonjs version with I went through my project and I never use require for threejs The imports I'm doing for threejs look like that: Sorry, I'm not doing that much webdev, how can I find out when commonjs is imported? |
|
Babelify transforms imports to CommonJS before browserify looks at the file, so browserify sees The only way to get to the ESM build of three.js is by explicitly |
|
I'm not familiar with browserify, but if it supports es modules you can pass the |
Ah, that makes sense. I took a look in one of the examples, they are also using import from the build/three.module.js: import {
BufferGeometry,
DefaultLoadingManager,
Euler,
FileLoader,
Float32BufferAttribute,
Group,
LineBasicMaterial,
LineSegments
} from "../../../build/three.module.js";In my code I'm just pointing to three (
I think that is sadly not an option. I got the error from browserify because of using import and export. |
|
you can explicitly do b.require(require.resolve('three/build/three.module.js'), { expose: 'three' })to alias the .module.js version to the bare module name. |
|
Wow, thanks a lot. The require setting indeed solved the problem. Here is the final gulp script: and the following dependencies: Sadly the build time now went up from 8 to 15 seconds for me, but at least it works now :) |
I messed with this for days - this resolved all my issues - TY so much! :) These parts in particular helped me: Then in my typescript gulp task: |
Hello there,
I'm trying to use threejs with typescript for a web application. Since I would like to use modules (threejs introduced them in r105), I need to get down to es5 for browserify again for which I thought babel might be a solution. Sadly I still get the error
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (9:0)I have the following configuration:
package.json
.babelrc
.tsconfig
gulpfile.js
File at which the error is triggered
What am I missing? I'm completely stuck.
The text was updated successfully, but these errors were encountered: