I want to use dynamic import in webpack 2. I use webpack 2.4.1
index.js
import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import Root from './containers/Root'
import '../styles/custom.scss'
var btn = document.getElementsById('button');
btn.addEventListener("click", () => {
import('./assets/chunk.css').then(()=>{
console.log("Success")
})
});
render(
<Root />,
document.getElementById('root')
)
But when I run "npm start" it didn't work and notify an error at line 9 of index.js
Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level (9:4)
Thanks for any help!
As wuxiandiejia mentioned, the answer is
install babel-plugin-syntax-dynamic-import
make sure 'syntax-dynamic-import' appears in your babel options.plugins
Example babel.rc
{
"plugins": [
"syntax-dynamic-import",
}
Related
At the beginning I got a problem with the french date in the antd calendar. I use vite so I install the antd_dayjs_vite_plugin to switch from Moment.js to Day.js. It worked well but this morning the vite build process is in error. I tried to update the antd_dayjs_vite_plugin version (was 1.1.4) and now I got the same problem when I try to lunch a yarn dev as you can see :
$ yarn dev
yarn run v1.22.15
$ vite
failed to load config from vite.config.ts
error when starting dev server:
TypeError: (0 , import_antd_dayjs_vite_plugin.default) is not a function [...]
Here is the code in vite.config.ts :
import reactRefresh from '#vitejs/plugin-react-refresh';
import antdDayjs from 'antd-dayjs-vite-plugin';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh(), antdDayjs()],
server: {
host: process.env.HOST || '127.0.0.1',
},
resolve: {
alias: [{ find: '#', replacement: '/src' }],
},
define: {
__APP_VERSION__: JSON.stringify(process.env.npm_package_version),
},
build: {
commonjsOptions: {
transformMixedEsModules: true,
},
},
});
The problem also appears in antd-dayjs-vite-plugin 1.1.4 version or the 1.2.2. I also already tried to update vite to 3.1 (was in 2.5).
I don't understand the code seems to be exactly the same as the usage in the Readme package.
Thanks in advance for your help. 🙏🏻
Seams that a default export is expected by vite.js (tried to replace import statement with import {antdDayjs} from 'antd-dayjs-vite-plugin'; without success)
I was able to create a workaround using patch-package with the below steps:
modifiy node_modules/antd-dayjs-vite-plugin/dist-node/index.js
at the very end of that file, add exports.default = antdDayjs;
create a patch for antd-dayjs-vite-plugin
ensure you have the postinstall script (refer to patch-package doc)
I want to use TributeJS to mention users in my application but after I have added the package, the import is giving me an error in the console. here is what I have:
# package.json
{
"dependencies": {
"tributejs": "^5.1.3",
"trix": "^1.0.0"
}
}
# mentions_controller
import { Controller } from "#hotwired/stimulus";
import Tribute from "tributejs";
import Trix from "trix";
require("tributejs/tribute.css")
export default class extends Controller { ...
.
.
}
I am getting this in the console [![developer console error][1]][1]
I was following a Rails 6 lecture and I am using Rails 7, I was then adding packages with yarn instead of importmap. After I did that, the error went away.
I want to change entry point of my expo app. I have tried these simple steps:
First of all, I have created a simple expo project.
$ expo init test
$ cd test
$ rm App.js
$ mkdir src
$ touch src/App.js
I have changed app.json of my expo based app as follows
{
"expo": {
...,
entryPoint: "./src/App.js",
...
}
}
Then i have filled the App.js as folows
import React from "react";
import { Text } from "react-native";
export default () => <Text>Hello World</Text>;
However, the first trial have been failed. It have shown only splash screen.
Then i have edited the App.js as follows:
import React from "react";
import { Text } from "react-native";
import { registerRootComponent } from "expo";
const App = () => <Text>Hello World</Text>;
registerRootComponent(App);
I have seen "Hello World" text in the screen. However, hotreloading have not been working.
Then i have modified main entry in package.json
"main": "./src/App.js",
In this way hot reloading is working in second save action.
I am wondering
How can i solve hot reloading problem (in first save action)?
What is the difference between app.json's entryPoint and package.json's main field?
I suggest you read this article:
https://docs.expo.dev/versions/latest/sdk/register-root-component/#what-if-i-want-to-name-my
and be sure you restarted your whole dev process
I am new with Svelte and trying to import some package.
After the npm install, I import it directly into my svelte file:
import jspdf from "jspdf"
that got me the error:
Error: UMD and IIFE output formats are not supported for
code-splitting builds.
then I tried to use CDN and import via HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.1.1/jspdf.umd.min.js"></script>
and the svelte give me undefined error from:
var doc = new jsPDF();
I googled and some some comments and it seems like the first solution should already be working. How can I resolve this?
Add inlineDynamicImports: true in rollul.config.js at the export, like this:
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js',
inlineDynamicImports: true
},
I am running into a strange issue where everything is working as expected except select2. I am having Rails 6.0.0 app and installed select2 via yarn add select2.
Then i added it to application.js file. File looks like below.
#app/javascripts/packs/application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require('datatables.net')
require('datatables.net-dt')
require('datatables.net-bs4')
require('select2')
import "bootstrap"
import 'popper.js/dist/popper.js';
import $ from 'jquery';
global.$ = jQuery;
import "chart.js"
import 'select2'; // globally assign select2 fn to $ element
import 'select2/dist/css/select2.css'; // optional if you have css loader
document.addEventListener("turbolinks:load", () => {
setTimeout(function() {
$('.success, .alert').fadeOut();
}, 10000);
})
Right now it looks like this
select2 dropdown box
When I go to Source tab in chrome developer tools, it shows only select2/dist/js folder under node_modules. I have tried precompiling and clobbering the assets but not working. The whole this is running fine in my local, only causing issue in production server.
Edit:
My production.rb
https://gist.github.com/rajanhcah/3ee13925b0ae305a6fe2c64013ab6534
If you're including CSS in app/javascripts/packs/application.js, make sure that app/views/layouts/application.html.erb is also using the stylesheet_pack_tag (see the "Usage" section in the webpacker doc).
Otherwise, if you have stylesheet_link_tag, you can use the classical app/assets/stylesheets/application.css.
# app/assets/stylesheets/application.scss
#import 'select2/dist/css/select2';